{"_id":"aws-amplify-vue","_rev":"943-0579d57beeed2a0ae9d4dfa5bd61d2fc","name":"aws-amplify-vue","dist-tags":{"rn-hosted-ui":"0.2.6-rn-hosted-ui2.3","beta":"0.2.12-beta.0","next":"1.1.0","stable-1.0":"0.4.4","rn-datastore":"1.1.5-rn-datastore.6","PR-5187":"1.1.5-PR-5187.49","preview":"2.1.2-preview.240","pr-6530":"2.1.4-pr-6530.17","pr-7040":"2.1.3-pr-7040.137","beta-ds":"2.1.4-beta-ds.51","sdk-bump":"2.1.4-sdk-bump.37","native":"2.1.4-native.26","ui-preview":"2.1.3-ui-preview.61","rn-sqlite":"2.1.6-rn-sqlite.227","migrate-rn-picker":"2.1.6-migrate-rn-picker.224","geo":"2.1.6-geo.264","in-app-messaging":"2.1.6-in-app-messaging.403","legacy-ui":"2.1.8-legacy-ui.77","legacy-ui-tests":"2.1.8-legacy-ui-tests.90","latest":"2.1.9","unstable":"2.1.10-unstable.2"},"versions":{"0.1.1-beta.0":{"name":"aws-amplify-vue","version":"0.1.1-beta.0","_id":"aws-amplify-vue@0.1.1-beta.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"13e50d3c7ca71002eb48dc5267f029b072680af6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.0.tgz","fileCount":58,"integrity":"sha512-H+Zxuh30TRbjKxNrWxaMCSbspH49jXrI1+KuXqMF+QPZiOV2jWJ8eGowqSVp08miw4x1WvKfdKFShCFi4LAtwA==","signatures":[{"sig":"MEUCIF22sWMUZyJaoDtghv8XGNyrBihQHcqETjc9AuB1+Yo2AiEAn9UFGDSckAnHIqRwGTrVLzPE4J4xoQkIC0axcic7Kpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1188551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmG5XCRA9TVsSAnZWagAAqsQP/ize5H/HJJ9pkF4eAu0a\nLbTpxLHwM8pYSth0hGVZRulEdqTNBPWjxEQ1/bSxWHSjkgBSx+cPDjP8Hv+z\nowLFxzLTjXR5vmoD/7TEWDo6560TP09dfHCLU54TjdjwE0OigKihWTyuNUaw\nj8z8K0CyEqhpRWdxfJybNzt9mm/rG4CrgQx/V9QiORPxveS9joah6bDa37ix\nLAQs3kPtHQLgZ/AANtsG7Ib9RfSNOqgqNpQ6yH6Yaz+ZL7G16EHiJa2haEW+\nyMrWDKpUKSEGjrrqip6DQAMnXq1zZryMNyoQFjiSF/i0QMGLAmjq4XExAxa/\novUI4NES+kTDJpe/mNNDYgdXVNTIrJSFPekHMjZGYI1FllOb2e61bpecYsus\nNiraM08E3cA+Jwggu63Qut6aFQlXcfkjkJEMSO64P/7L/b46BOWBt8cOYJBA\nMuHOusGG4qbm8q6H7PPg0owM8/xNybhL24iFZsnwmUOmHs3fERjqsx/dRC/7\n6Onkv8qArgSu5hml+PHJQKD78M35/bWxLnVvoQJJkKkVNWRWzbR02UuVo9P+\n8NNwcmnpWksvJ9ertskfegyFEpxP+z76Fycs+Q4xdkK9YGwMRpiaLpAVqGuE\nREO5Nb1L5mS1gZGdgzIVZtXAoWGotOUxkB85WDoN/fNdluGBcYU9SUu/3tQl\npBSz\r\n=TWQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"devDependencies":{"babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.0_1536716374595_0.9590429907937237","host":"s3://npm-registry-packages"}},"0.1.1-beta.1":{"name":"aws-amplify-vue","version":"0.1.1-beta.1","_id":"aws-amplify-vue@0.1.1-beta.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"30a2bbd45aedd07c9f0267def0b508dbe5497077","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.1.tgz","fileCount":58,"integrity":"sha512-cQeQrSJJhIqy/sLWDEcrYgHSN+8TQbXdpp8Xrr0DNIYeT+NcRRZaIpXK71sa9HqviFVeUp9Qi4FmNaPeR6vbaw==","signatures":[{"sig":"MEUCICgaph0240xycp4467c7PZMhtS5Xxx7wGIClRteAKy0KAiEA4ilC/mPuPdBWyFtzBtNLMcfSLkM8UqMjWuJdhZoYZNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmZ2tCRA9TVsSAnZWagAA5qUP/REuosGfXAja/snRXWaI\nz/63o3f8E5cE1TyntstEBtQPd9uJcVv+Pi7RJRYVf0n/CygoTF2jAwa+c4FC\niTx1xpk3rhCgTPu/xhj/7hoLqhEGOkd4hn+VichgpHCyIL84V5k2G6ze5ORP\nT8ajw65A1QN/0cGzjLio/VCFm2dDL5NAu88lPTdZAGsn7sGinNd1zprFUmic\nMrFAkvkNJBjBifkxI55yXkUIWOY7yCWNknOgO/gchYcWRbGvmOqn3p0ARJXG\nnpz+yDLktz/5p/arJ0NuBklSGj+P92pwMUXXY6hZ8mRhC5XudgeYISBM4EM3\n8moXBZZf7AcUrpzoLzlm9Jl4JOTPaoIB1Lbm/e93/BOqdllxkPLKGsvJBedu\noXhfVvEJyp9ekhmxhY3AMRL5U22tcZD24Q8tRG92njkPkWi25PN9hQhLVT4g\nHA/iFjAZzkJCCmJ+Bl/jgcDEn6WQvvVpP25gGOVCpHVP4imM0Znd0uTa7ihD\neflBaLbSRo7E5EaeSl+blTRHMHPP1ikf9LTBYDhlX70lecPYn2zka/vvbcyv\nOjj/XUFWWV+3I8AvIz0mfJHjGYshMPKXEO26qOvXD1T404sDeGO356yowBwX\n//QjtQtfydFXgGG86vIhQpd1NzfgkbdoSmTTstO7lf0S0Ga7Ob3Y3lcZEHhH\nWPYb\r\n=NKFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport * as AmplifyModules from 'aws-amplify';\nimport * as AmplifyVue from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyVue.plugins.amplifyPlugin, {AmplifyModules});\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implments a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyVue.plugins.amplifyPlugin, {AmplifyModules})```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nOptions: \n\n```\n<amplify-authenticator v-bind:authOptions=\"authOptions\"></amplify-authenticator>\n\nauthOptions = {\n  confirmSignInOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Confirm Sign In', required: false\n    user: 'The user who is attempting to log in', // type: object, default: user who completed sign in step, required: **true**\n  },\n  confirmSignUpOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Confirm Sign Up', required: false\n    username: 'The username of the user who is attempting to sign up', // type: string, default: username of user who completed sign up step, required: false\n  },\n  forgotPasswordOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Forgot Password', required: false\n  },\n  signInOptions: {\n    username: 'This is the default value for the username input field', // type: string, default: '' (unless user has completed signup actions), required: false\n    header: 'This is a label at the top of the component',  // type: string, default: 'Sign In', required: false\n  },\n  signOutOptions: {\n    msg: 'This is a message that appears above the sign out button', // type: string, default: null\n    signOutButton: 'This is a label on the signout button', // type: string, default: 'Sign Out', required: false\n  },\n  signUpOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Sign Up', required: false\n    signUpFields: [], // [see SignUp Options section](#signup-fields)\n  },\n\n}\n```\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nOptions:\n```\n<amplify-sign-in v-bind:signInOptions=\"signInOptions\"></amplify-sign-in>\n\nsignInOptions = {\n  username: 'This is the default value for the username input field', // type: string, default: '', required: false\n  header: 'This is a label at the top of the component'  // type: string, default: 'Sign In', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe SignIn component provides your users with the ability answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nOptions:\n```\n<amplify-sign-in v-bind:confirmSignInOptions=\"confirmSignInOptions\"></amplify-sign-in>\n\nconfirmSignInOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Sign In', required: false\n  user: 'The user who is attempting to log in', // type: object, default: {}, required: **true**\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nOptions:\n```\n<amplify-sign-up v-bind:signUpOptions=\"signUpOptions\"></amplify-sign-up>\n\nsignUpOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Sign Up'\n  signUpFields: [], // [see SignUp Fields section](#signup-fields)\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nOptions:\n```\n<amplify-sign-in v-bind:confirmSignUpOptions=\"confirmSignUpOptions\"></amplify-sign-in>\n\nconfirmSignUpOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Sign In', required: false\n  username: 'The username of the user who is attempting to sign up', // type: string, default: '', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nOptions:\n```\n<amplify-forgot-password v-bind:forgotPasswordOptions=\"forgotPasswordOptions\"></amplify-forgot-password>\n\nforgotPasswordOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Forgot Password', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe ForgotPassword component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nOptions:\n```\n<amplify-sign-out v-bind:signOutOptions=\"signOutOptions\"></amplify-sign-out>\n\nsignOutOptions = {\n  msg: 'A message displayed above the sign out button',  // type: string, default: null, required: false\n  signOutButton: 'The text that appears in the sign out button', // type: string, default: 'Sign Out', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferrend Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nOptions:\n```\n<amplify-set-mfa v-bind:mfaOptions=\"mfaOptions\"></amplify-set-mfa>\n\nmfaOptions = {\n  mfaDescription: 'This is a description of MFA for your users', // type: string, default: 'AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password.',\n  mfaTypes: ['An array of MFA types'], // type: array, default: [], possible values: 'SMS', 'TOTP', 'None'\n  tokenInstructions: 'These are instructions for decoding the QR code used with TOTP', // type: string, default: 'Scan the QR Code with your phone camera or authentication app to get the MFA code',\n  smsDescription: 'A description of SMS for your users', // type: string, default: 'SMS text messaging (receive a code on your mobile device)',\n  totpDescription: 'A description of TOTP for your users', // type: string, default: 'One-time password (use a QR code and MFA app to save a token on your mobile device)',\n  noMfaDescription: 'A description of no MFA for your users', // type: string, default: 'Do not enable MFA'\n}\n\n```\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpOptions=\"signUpOptions\"></amplify-sign-up>\n\nthis.signOptions = {\n  signUpFields: [\n    {\n      label: 'Label for the input field', // type: string\n      key: 'Key name for the attribute as defined in the User Pool', //type: string\n      required: boolean,\n      type: 'string', 'number' or 'password',\n      displayOrder: 'number indicating the order in which fields will be displayed' // type: number, default: none, required: false\n    }\n  ]\n}\n\n``` \n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpOptions.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nOptions:\n```\n<amplify-photo-picker v-bind:photoPickerOptions=\"photoPickerOptions\"></amplify-photo-picker>\n\nphotoPickerOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'File Upload', required: false\n  title: 'This is the text displayed in the upload button', // type: string, default 'Upload', required: false\n  accept: 'A string representing the \"accept\" value for the input element', // type: string, default: '*/*', required: false\n  path: 'The S3 path for the file upload', // type: string, default: none, required: **true**\n}\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n```\npath = 'The S3 path from which the images should be retrieved' // type: string, default: none, required: **true**\n```\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays the a single image from the provided path.\n\nUsage: ```<amplify-s3-album imagePath=\"path\"></amplify-s3-album>```\n\nProps:\n```\nimagePath = 'The S3 path from which the image should be retrieved' // type: string, default: none, required: **true**\n```\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nOptions:\n```\n<amplify-chatbot v-bind:chatbotOptions=\"chatbotOptions\"></amplify-chatbot>\n\nchatbotOptions = {\n  bot: 'The name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\"', // type: string, default: none, required: **true**\n  clearComplete: true, // type: boolean, default: true, required: false\n  botTitle: 'The name of the chatbot component in your frontend app' // type: string, default: 'Chatbot', required: false\n}\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.1_1536794029246_0.4612448115571328","host":"s3://npm-registry-packages"}},"0.1.1-beta.2":{"name":"aws-amplify-vue","version":"0.1.1-beta.2","_id":"aws-amplify-vue@0.1.1-beta.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"11ff1085a80eede9bba9905afea4e1d1df599ab3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.2.tgz","fileCount":58,"integrity":"sha512-xtXT+jchhHhQ5pza4Uk+pO/7nmFcgF2uZCpzUtHBAXYj9b1aKuLxjvofX32M//NXvF7o+hQLs9Y0rghnQKnWrg==","signatures":[{"sig":"MEUCIAWYqwn30Bgcj8oknvYHg1BydbNQ3UqVaP/rKEdmmkisAiEA3mIllEuvyThCUyfdXihTNRxJhLkAbUjlHPGm05uUzTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1365519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnCVUCRA9TVsSAnZWagAAj8IQAJeaes2d4oI7hnvJ+zEA\nqkXwUq9rkL49zUSzRN59WpqpmA18u0e+vNtMwgMwNhOyjHd0QUhL0ARKPuUw\n+rVK4r+Cgz2Fq/QcFER+uZRM/JHj2steQPsmE7c7/rIowjSucjBSfVJDNU4+\n7Mue4TNSxnicQnx2BbOFtVFmUq+17h9+hO5vgR9LVt6ZJDY0IOshXDhqq41n\n3vdpsEVQJEGAR+15Yd9wqLA1Mkyeqjz+mD8gZJHpnWOz81OIabPiIaV40A0y\nIbE2m/1Z9ei2u9x/+Zns++U9a5YoyLM+LjK7/69tiOBoch3DXgeIr3lqU9Sn\n07R8EEu0IDmGzL3ShCiRRWbgai32cbmWRFZDvSB57Eu2gWYQFd52zHZlVW4f\nIadoynSROfsnPE+O6s3hhdhIDko0JK4CGPjIpCtpd6raJdNjjGp1qtiASttl\nU1FeORXlcU5k3bhQ+egM3mi/R/mE5fNYIiZ2ek7xHcZa2jbJ3q/bheG4IrFp\nESxtHirCtbB4IImhiERlgnAsX6FeBA8mbS2XEu1OySNG/T9fc4frcu6uOwnX\nx2Z7B6M+kn81I3hNKi6HBCAVMLk46NWuv/vaZ8tqZzotUjmEsgQ3TixeswTr\nevDZ90Id493p1WCGYvxoD6pxHOnS4NVkKZzDAQg2lYdKkT/BReISR7jPYIse\nQ+6F\r\n=xHwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport * as AmplifyModules from 'aws-amplify';\nimport * as AmplifyVue from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyVue.plugins.amplifyPlugin, {AmplifyModules});\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implments a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyVue.plugins.amplifyPlugin, {AmplifyModules})```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nOptions: \n\n```\n<amplify-authenticator v-bind:authOptions=\"authOptions\"></amplify-authenticator>\n\nauthOptions = {\n  confirmSignInOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Confirm Sign In', required: false\n    user: 'The user who is attempting to log in', // type: object, default: user who completed sign in step, required: **true**\n  },\n  confirmSignUpOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Confirm Sign Up', required: false\n    username: 'The username of the user who is attempting to sign up', // type: string, default: username of user who completed sign up step, required: false\n  },\n  forgotPasswordOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Forgot Password', required: false\n  },\n  signInOptions: {\n    username: 'This is the default value for the username input field', // type: string, default: '' (unless user has completed signup actions), required: false\n    header: 'This is a label at the top of the component',  // type: string, default: 'Sign In', required: false\n  },\n  signOutOptions: {\n    msg: 'This is a message that appears above the sign out button', // type: string, default: null\n    signOutButton: 'This is a label on the signout button', // type: string, default: 'Sign Out', required: false\n  },\n  signUpOptions: {\n    header: 'This is a label at the top of the component',  // type: string, default: 'Sign Up', required: false\n    signUpFields: [], // [see SignUp Options section](#signup-fields)\n  },\n\n}\n```\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nOptions:\n```\n<amplify-sign-in v-bind:signInOptions=\"signInOptions\"></amplify-sign-in>\n\nsignInOptions = {\n  username: 'This is the default value for the username input field', // type: string, default: '', required: false\n  header: 'This is a label at the top of the component'  // type: string, default: 'Sign In', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe SignIn component provides your users with the ability answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nOptions:\n```\n<amplify-sign-in v-bind:confirmSignInOptions=\"confirmSignInOptions\"></amplify-sign-in>\n\nconfirmSignInOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Sign In', required: false\n  user: 'The user who is attempting to log in', // type: object, default: {}, required: **true**\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nOptions:\n```\n<amplify-sign-up v-bind:signUpOptions=\"signUpOptions\"></amplify-sign-up>\n\nsignUpOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Sign Up'\n  signUpFields: [], // [see SignUp Fields section](#signup-fields)\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nOptions:\n```\n<amplify-sign-in v-bind:confirmSignUpOptions=\"confirmSignUpOptions\"></amplify-sign-in>\n\nconfirmSignUpOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Sign In', required: false\n  username: 'The username of the user who is attempting to sign up', // type: string, default: '', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nOptions:\n```\n<amplify-forgot-password v-bind:forgotPasswordOptions=\"forgotPasswordOptions\"></amplify-forgot-password>\n\nforgotPasswordOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'Forgot Password', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe ForgotPassword component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nOptions:\n```\n<amplify-sign-out v-bind:signOutOptions=\"signOutOptions\"></amplify-sign-out>\n\nsignOutOptions = {\n  msg: 'A message displayed above the sign out button',  // type: string, default: null, required: false\n  signOutButton: 'The text that appears in the sign out button', // type: string, default: 'Sign Out', required: false\n}\n```\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferrend Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nOptions:\n```\n<amplify-set-mfa v-bind:mfaOptions=\"mfaOptions\"></amplify-set-mfa>\n\nmfaOptions = {\n  mfaDescription: 'This is a description of MFA for your users', // type: string, default: 'AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password.',\n  mfaTypes: ['An array of MFA types'], // type: array, default: [], possible values: 'SMS', 'TOTP', 'None'\n  tokenInstructions: 'These are instructions for decoding the QR code used with TOTP', // type: string, default: 'Scan the QR Code with your phone camera or authentication app to get the MFA code',\n  smsDescription: 'A description of SMS for your users', // type: string, default: 'SMS text messaging (receive a code on your mobile device)',\n  totpDescription: 'A description of TOTP for your users', // type: string, default: 'One-time password (use a QR code and MFA app to save a token on your mobile device)',\n  noMfaDescription: 'A description of no MFA for your users', // type: string, default: 'Do not enable MFA'\n}\n\n```\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpOptions=\"signUpOptions\"></amplify-sign-up>\n\nthis.signOptions = {\n  signUpFields: [\n    {\n      label: 'Label for the input field', // type: string\n      key: 'Key name for the attribute as defined in the User Pool', //type: string\n      required: boolean,\n      type: 'string', 'number' or 'password',\n      displayOrder: 'number indicating the order in which fields will be displayed' // type: number, default: none, required: false\n    }\n  ]\n}\n\n``` \n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpOptions.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nOptions:\n```\n<amplify-photo-picker v-bind:photoPickerOptions=\"photoPickerOptions\"></amplify-photo-picker>\n\nphotoPickerOptions = {\n  header: 'This is a label at the top of the component',  // type: string, default: 'File Upload', required: false\n  title: 'This is the text displayed in the upload button', // type: string, default 'Upload', required: false\n  accept: 'A string representing the \"accept\" value for the input element', // type: string, default: '*/*', required: false\n  path: 'The S3 path for the file upload', // type: string, default: none, required: **true**\n}\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n```\npath = 'The S3 path from which the images should be retrieved' // type: string, default: none, required: **true**\n```\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays the a single image from the provided path.\n\nUsage: ```<amplify-s3-album imagePath=\"path\"></amplify-s3-album>```\n\nProps:\n```\nimagePath = 'The S3 path from which the image should be retrieved' // type: string, default: none, required: **true**\n```\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nOptions:\n```\n<amplify-chatbot v-bind:chatbotOptions=\"chatbotOptions\"></amplify-chatbot>\n\nchatbotOptions = {\n  bot: 'The name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\"', // type: string, default: none, required: **true**\n  clearComplete: true, // type: boolean, default: true, required: false\n  botTitle: 'The name of the chatbot component in your frontend app' // type: string, default: 'Chatbot', required: false\n}\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.2_1536959827597_0.8914879340212218","host":"s3://npm-registry-packages"}},"0.1.1-beta.3":{"name":"aws-amplify-vue","version":"0.1.1-beta.3","_id":"aws-amplify-vue@0.1.1-beta.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"17ae0a66ab30002013bcf280f1be80a4be4986d1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.3.tgz","fileCount":58,"integrity":"sha512-YUyChN0/k+UGskrCkvX/QXJa9yX1VlUctOgyQFa0Xog3aJwFWV4wGFXUWd6oF+lWqYYiYSYaGdp9a5wHmzI+pg==","signatures":[{"sig":"MEUCIBGBtcp4kt731alLn49rOfDEkKlMU+CFMOE3bnt4goDnAiEA6eVxvX2R2+5pfnIS4XKjnjifWxpfYnATh9J6ZflwwXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1367596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnGRpCRA9TVsSAnZWagAAwm4QAI9mXu504Ykup74afbQd\n4jwA5IWUnuS5X32aghhEBWh5OwpVOYwU5HzQCH45jKPOe++g6ocbtCWdrOg+\nPizbjPyuJIijIUOO8SOzLJLCI+U6j1cx226mANIPQ26QW5WxpUGOsuCvdfjk\nAsOn43H2X6uL3dt4PavXeJx6KNEhtsV/mVJSwmQ9GJMLhbh5RFHFvVzmXU1A\nathEtMVZNl547WvwTr7atFPKrH1+8G543NZjc2SejmIxrJ0nKovmQST2j8no\n0/U2YQlU4QVaioMqsscIgXIf9+iQ2tbKTrqDlzDUofmG1z0M1xypb7ypLMfO\n71gl4e4ABdTvGAdUoZqZsxR3KPr3BCcznlICSMTafOw5bU+7gvFyMl4WiZnL\n4sm0n9JxKo6uAn202EB65I1tb+Ry5xyFxkI+xNN91OMeGvoaTmRN+WXUhLQv\niQxBXxg/yATicIa6EVBgLqbvIHTXHTMRfSkGqfcoKdXaxXrAsPPfAXwy4cvo\nreL/DuTwKIXEau8exBVIEq1Lr7sPfNb+D/RLmKbybvDUKD+DBKc20aeOa3JF\nocQlKaNONAyIb7Vqpyy4eOoz7j9r+pQLwrtgFZvg8Jjiaz7qV+EY9oXomOjj\n6HZ2WoGgoIJCUEZAINtbIRnxQn2mhw5BBE5ihzYlnxKmJR4WhGAhrQOWPtmz\nALZS\r\n=lH4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport * as AmplifyModules from 'aws-amplify';\nimport * as AmplifyVue from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyVue.plugins.amplifyPlugin, {AmplifyModules});\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implments a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyVue.plugins.amplifyPlugin, {AmplifyModules})```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe ForgotPassword component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferrend Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type   | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|--------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array  | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute | Type   | Description                                                            | Default       | Required |\n|-----------|--------|------------------------------------------------------------------------|---------------|----------|\n| header    | string | the component header                                                   | 'File Upload' | no       |\n| title     | string | text displayed in the upload button                                    | 'Upload'      | no       |\n| accept    | string | a string representing the 'accept' attribute in the html input element | '*/*'         | no       |\n| path      | string | S3 path for the file upload                                            | N/A           | yes      |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays the a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.3_1536975977010_0.9010626721761736","host":"s3://npm-registry-packages"}},"0.1.1-beta.4":{"name":"aws-amplify-vue","version":"0.1.1-beta.4","_id":"aws-amplify-vue@0.1.1-beta.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"9a4f0b3373ceb5321fee629b6a4cf43b4c63d55d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.4.tgz","fileCount":58,"integrity":"sha512-NPYlIo2JFexf20733y2RiMJUVyM/iDmNmkVy3c+FW9/ZTouySzfpjD/QqXZs7HLAvxKcd4DGCz8pCbcTMUPerA==","signatures":[{"sig":"MEYCIQD9tZ2C+tUY5JeL1+7YcoifbiuCzLYTmqg+bZSHqtHkXgIhALxhNtKnLCEjrM0PS+/cXS1D080hvsF4EL3z+khMrqZ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1367787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnbt6CRA9TVsSAnZWagAAWdAQAKAv5oRpv7VzcrPNw9Cg\nJwSAOK5zERcJ6tbKTAd+QLEBEPWk/1w3R1jU3jCyVgkaKH+ijLZjptWZjTf8\nFJEHlxuE7P3IKetWw84FlmqI41LgCc9jpyGfvrtC547JWQhAfewRAY5Ydbbg\nEE8fFStj/vAKUemnwgU1c/GNzCnKpsVhYg2vfuBt0xtcmPYo8QbxODtpLIc8\nH4ijVflivGbChfHCf4TEAEdWcxvYoSKClMOAJW6bsuLmgbyjLZyPs7QtGqR8\noT5rjWSjQIiDpuc9mvI7O9BW6yIU+jb1Zx/01o2RaiqaTV7GM1ivcI6CdKRv\nX7Q9c5vzl7SM/WCJoedYmBlgCDnmrj89bv13cIY1/brXOmnFeVm1n365DKeP\naEHQzD4U42N2VB5FxfgcTcF0Pl4zwqeb243w1MwU4Vj0R/2QQIg/z5T2JBRi\njS13jG6VnEb9b6Xjo4StwAbkk7+9kjbqmV+rB7LIh8TyVkTZ3AtAybDCfHYj\n/ZoMRv6OY3E0JXXdIfhMvebLnHBOTESzQ/I1jhYVMIUhxxBl+IFMJNE4q77a\nYWvAAQ68KX5euKUWQVAHUhDQ+zhED1jYIM2bKVi8KCt0xUu203wtAATfZ98H\nJ/tcmH2ka08VEXJCCg0/HE/I4ldWMB2Tq7BYHLIT7JWQs/+MwoFjtWT98JOQ\nemiA\r\n=6BmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implments a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules)```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe ForgotPassword component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferrend Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type   | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|--------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array  | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute | Type   | Description                                                            | Default       | Required |\n|-----------|--------|------------------------------------------------------------------------|---------------|----------|\n| header    | string | the component header                                                   | 'File Upload' | no       |\n| title     | string | text displayed in the upload button                                    | 'Upload'      | no       |\n| accept    | string | a string representing the 'accept' attribute in the html input element | '*/*'         | no       |\n| path      | string | S3 path for the file upload                                            | N/A           | yes      |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays the a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.4_1537063801418_0.369421548088255","host":"s3://npm-registry-packages"}},"0.1.1-beta.5":{"name":"aws-amplify-vue","version":"0.1.1-beta.5","_id":"aws-amplify-vue@0.1.1-beta.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"da1d940fdc01c6b33277a0f5e63a2179a6639936","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.5.tgz","fileCount":58,"integrity":"sha512-icpxvwo5i4xXtoZFi5BvpSl2E514RAKOz3UEv9MKrH6Aejx/43QZzeQtoWVmz3DnyF+wv2M8amt32qr3LcqbZQ==","signatures":[{"sig":"MEQCIEiZArML13JH4lZAzWvcQxvpqggZgqVyilvGA3TfD/DJAiBFprBpqx619YJw3IHdxNBUlxucb8t5n6vzdMW5yDR3GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1367974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbonyFCRA9TVsSAnZWagAArFUP/1jcfpBmyJhby08jQPuh\nsIwi01pd25ca3IIDVNslVeKir11JCqBFDL6/orfb3ooIST4QmnCrxMIIB3w8\nfIhR2BxI250W7QzAnWIwiYhZa30g4jhfX0HrNSAiVqWReH2ERxTBpN1dXrLZ\nM24WO4go7CfFsAts8qT1hEXoBs+0YBYDJdbIOOgF5Ftuzp04GLrAHuMTXK2b\naXMxE0r+DD9RwYiSmchtUNj2MziPEAC7AkE815NRN5mZD5xI8lOD1OId58oJ\nGmJXzPWA8PfMIIRxCbgChhRN82taXHG1oWjUDA7YlevhXWHKRxzPPDIRZmvF\n1zwUlGukHKZ6aVaJX4faQ3i3BnXRXgx+eBcy9WZ8UYSxfyy48pf19NI5jda/\nC4kai+yp24y/Wny2YbCutWlwZ2cedCm58CT170LAL+ouGVM3SOPHyH4VxiPz\nusrfYhzs95VXcInLlQlulicXgkTTg8htBgrU9uzudbuvkOrMO8UokKPLdNMa\n4YRwdiV+7AtRagKtMe8nWU2k/uaVW66fkCfrQP+qDU8T6EZGIxE1iQ5n7XYg\nEhn/U0727EE5Pj9W7Nlg9hER6IFtlpNoEHKRZy+G1RyQEf9S159xp0EKbgbM\nF479txrek9To6u90Kl5pgyZIKKhaHbUnYztypqm30cmjBqf13DWUYcvgeDaf\nzREv\r\n=7fAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implments a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules)```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe ForgotPassword component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferrend Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type   | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|--------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array  | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays the a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.5_1537375364930_0.9749116631096906","host":"s3://npm-registry-packages"}},"0.1.1-beta.6":{"name":"aws-amplify-vue","version":"0.1.1-beta.6","_id":"aws-amplify-vue@0.1.1-beta.6","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"f7b9f76c000a09eeda8750da5de0cfd969384915","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-beta.6.tgz","fileCount":67,"integrity":"sha512-+n1chwR8sIABZV4o/zVMV7A+Z7EBNQlh4l7k7xsyHw9nbM1LxD91TyMP3mDrxVM1Lqkw6+lieuCkw/pfDr64TA==","signatures":[{"sig":"MEQCIFktaIqCg1wibxfWU8dorn+GYfIFPNDjI714G82yYn8xAiBk/Gu0L8x0l6rxR42Smktj9zqcbPbosPPPGwATQf3ZtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1409985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqQZeCRA9TVsSAnZWagAAy/4QAJI7UmJLLmlrzy+rDjKg\n89Qsmsb8spZIQ54AnwGgjignqd1aKjPKwmc/cva5yC6gVcwg0ePRKyq34tc7\nKhE/c96mByiXBxVdpxMZgWlMQE2j6nUec0JToM0Q4Z7J3EVPp12n8yH+0h64\nOxA1AP3RnJgtg2s0rrlkc+skbC4byctsdllRG3m0bVEw4x7V5RExTZxpZANg\nedPt3qj6bL1l4RJqhd0yph2PL1idD9jJH38FlwaJjkIUjB9TIXdbIzr/XB7F\nueGQg/JPsvtyyaelVsY9ctdyMOp2EPJrw3RnxFX95MEP/O1EepwCVgF9xBQt\nwXXIJGH5zEO13C0fHr2OaL3W9MZRbLj16U26yV9x1j+mtcOXm9VPjyoyEHqb\nCFp9co5rdqNCCWjnjSt0ni3WuoRKtZEcO0meNj3PT0sHpk0l/cNqDDaWcfaE\n76QVq4Z0PVp1tfWxCFTbHPuC1a6oKn2C+oGjTAku/UY8dboC3FkRwn+JCrDj\n6i9L0sf/Y/3Hm5iv039h5i7UjsNcEFKEdoWut7s1oAg4LX5c4OFGcgMKUyHu\np9va5nQ0xcqgbOpsNTJ8CyRRTMpVkX/XKcU6dGD+M7QkANU6UDSRGAdoVbGS\nqlXsI25Dfu+bHXYNadXIZyFi8Oa5YDVxk5vVURBc8YzUjWzro2HUO7QJVkSM\n5I+i\r\n=fQdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implments a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules)```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe ForgotPassword component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferrend Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type   | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|--------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array  | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays the a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"eslintConfig":{"env":{"node":true},"root":true,"rules":{},"extends":["plugin:vue/essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint","ecmaVersion":2017}},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","babel-eslint":"^8.2.5","eslint-loader":"^2.1.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.3-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.16","@vue/cli-plugin-eslint":"^3.0.1","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-beta.6_1537803869650_0.4719186354737219","host":"s3://npm-registry-packages"}},"0.1.1-unstable.0":{"name":"aws-amplify-vue","version":"0.1.1-unstable.0","_id":"aws-amplify-vue@0.1.1-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"f8c5283cf57fe2b9e57ea6b4850042d88ce81c81","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1-unstable.0.tgz","fileCount":65,"integrity":"sha512-Y5BxoTaIAIMTIQL//5fBbg17zxR0kQTJUHzSMt4lPyy4pCOG1lT6IT56ibIdRqNKHEblRLBlJt1tNyy2DHHSqA==","signatures":[{"sig":"MEUCIQCZ/xzSoBu2rHS53Eqefpe/FJIzYTTToZDC1YLFSWsOmwIgPLjxWXs8OH7Gr+15D+UtnNpIiikvprpB8wz9KVwXciM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1439319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrAwsCRA9TVsSAnZWagAAFKcP/3faYIql4PIG9mO9Tz4V\n6Au+pQj4D7VBVqqtiRVXsrUwVqMhJW6n8pzuLqwa8gahcpLJ2bdw51dVYAEQ\ngGiXuPVH+MPDY7miXbXGIAFLEqnjvHg2UlnaZHr/eByPuANPOtrquVVxQPUX\n8JKcQWOU7QxHOe17n2Siq7TEdJBNneSZEA+2BbqUZhsG2VIqDx1Snw7FRfBv\nFSGhv1GFt/YR3mbZR2ThLrKCbHCkJKklHSnsqHq5o8swwxcCgXO0T5P+qb6u\nakBzObvhjJtGAsn5ifOaumbveiJb7zz+WyMkZIaYfiU1q4A+B1UbnWhio6qJ\n+VZaGgCkLP9aHYrPaXczR9lEu165SasrM9DIpqsutQCtIHVKQLKmfV9hsFnl\nvHg2FbhaKk7idKRo/nxdbeHHd5ecW+Nzvi+xRzKoE+AYXRFGK29xuZvlwE9C\nClEktILNwMeCussVPUnL162h1+klvry+/LBC0JMAYjH/yrSNcX9Y/xoxXEGn\ndpobmvmkvhBTX/CHvIEpwlPm/KFyv7htgIBpjnSjOvBu02Wn5tV3aq+mNJJ0\n1ulrEDRsemwCsCjJQ6AjhQu/lehtmKnyXerEgpM98W02gYg3OAvNG0xmY4g0\nicbY9lW7aTf652BtXKSI5Q8dKkAK6KSB+L3j3iQEQhlWr6PfrNHhHErZaW3V\nzt9e\r\n=Bq1S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.2","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1-unstable.0_1538001963668_0.5684771439623144","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"aws-amplify-vue","version":"0.1.1","_id":"aws-amplify-vue@0.1.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"a0bf578708f67bd5367e83c93d78895e01842af3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.1.tgz","fileCount":65,"integrity":"sha512-cLbhhcVq2W3x4PjSisu6IramsOb2sjczn93H1at5aAEExP3SQH8fsL9X8dn64dB5C2ZQgkxqSyS8FUzq8PmV8Q==","signatures":[{"sig":"MEQCIHuUbzayU4/20xRzhI3evdZCz3v2TpaFzGJdOXOhOx6sAiBmg4n1hh30THQdHiKMhR7ynVhpn3iQeyWpqA0c6LAkLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1439522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrCf3CRA9TVsSAnZWagAAJ0wP/1pZbKbzfP68wQv9WxRb\nopha45Rk/QlxNRhmceymsgfByvNyT2uNY74JH0uGB8HETf/Q9j2YDk+0Ud99\ngnuESuZLGIw2OVbBgOobbP5Ip6Oc0oFFTf8HVHu9CsNRAoyebJTUv/XXn0zV\nanvNkk9/en9c/G4Yy+nOLejCKRY2rlP8i4ch97/rcUdrFMkPrAVYbFWEUnot\nTS1B2oRrBH5rBzgy8OQXlFPUE511NOB9R1ptPz4pMQNkN9FnMq141wf9/kRh\nSx4S7WkvxOK3tsaV2CKmVkvjjPzdvGrfAyzYOAxtxqXxfmBoGZ3TkzAm/HhP\nBemiiyUpt1cA4t/71nVOt3V79XkNxXp0/qGhS2+SwuGkNfoOZFhbMNUQH7Ac\npaxgLSS3n5dfaoJBx6EG0Uwwd/cThdvvHBNtfLyOr2FbxjGdJeVr6/bsoYu+\nWJEGB7jtFegVDFku8UNSk6v9IGlLkCDMPGWSwWYd6xxK4ftKykLPBHkUAhem\nbmPbESuLSlJBsN8q27KXJ4M3LMlAtSMQ/ldsj4MUYLxrWm+YuZIXzvtGjKp/\nTIFx6GKkGnI5U+31W/OF8zcWMrDoY0/e27fpalSN+JY/D0ZnWaYX7ENC34Kj\nWVe/b02iFgxVmIQhbNYuNBN/l2oGC284Yv+FXEiZRdsLi/j9nZWb2kLpBYNi\n3DED\r\n=NXy0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.2","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.1_1538009078452_0.4149360969269198","host":"s3://npm-registry-packages"}},"0.1.2-unstable.0":{"name":"aws-amplify-vue","version":"0.1.2-unstable.0","_id":"aws-amplify-vue@0.1.2-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"9aaaaa035a60e2e43a5374a5cf5ab7cdcad277a3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.2-unstable.0.tgz","fileCount":65,"integrity":"sha512-PxyLqWzNtswwqJzS/h/lu1GeqsHlBvmO6R2hbeW46bf6jBBGClj2f9RLPIK9A7zouelydxyf0xNsE8MNhjkuxQ==","signatures":[{"sig":"MEUCIBu7m2yLcMjiAfPR2pMGRXnXImWtHyhq1LUaQ4ET1XlwAiEAhpvNy3wLxMjndoGckDfzyhXouGd1Pc0n71GenC6E5es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1446868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbsmP/CRA9TVsSAnZWagAAhzYP/i2qYJwlImkSLIHtt+rq\nNs1Gc5rk/hPZUNABZLdrBjEbUHKpB/aoIeMwYnVGplisnV11aonrnSdDiQCf\n+yVvC1e7mm6GttrqKCGGgH+lN8fZ5WldwFPW0l+0hqS86bqvqY9hQG0EUQwc\nNjZdEQOYXJEqRVec0Oo2+GvtENoVb8KOlLc1zW2ZCdOdx7lnpz6DaIU5fNQD\ndKD7wWTNgn1sK6/B651j75sRNUvqcCF2NbVkSU2KH6hiJwv3EH1cysI+g+Fg\nOb5FnCTsRzf32aKbGB8DrlXYIb0I5ndWGz9e9FBzL+JxOmoV5g+9vFsQpT8J\nW3b6/NNzwbZHp9SYPGGYC6GL1qxAA7bf6yFjZ0PS6He+2iUEUwcA52ad6p1Y\nBKv5kBS+HKgPcP7EdxH/k5ktIP/EOIhNpCMM8yi4yLysfBQSH1fBPwED2c0I\nlthT3RO3itkc93a3//ntKJ1om3wriD6eO2w/K+owFBdMn2lkoqWKyRr+atVI\nKpdnaENacAL7IzqDRHHcUgILiOMR3PjiARvDjEmT4Ye09x2dHRJPG/8SFsCv\nZY07Ehre50k3Uebenbn0pEFDoHVBcfiyUYsDXZVWXIPlTi2yncOiWebuVYsU\nHnoO6dVYDkxi03lFKu9L7Qg06aj+lSf0mX65vbNC9ep87KFAdxXbVdJQ65Vm\nQzwB\r\n=LulG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.2","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.2-unstable.0_1538417662301_0.4295723375569296","host":"s3://npm-registry-packages"}},"0.1.2-unstable.1":{"name":"aws-amplify-vue","version":"0.1.2-unstable.1","_id":"aws-amplify-vue@0.1.2-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"0036fd356ffd651e722567a089f725c6fe3a7108","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.2-unstable.1.tgz","fileCount":65,"integrity":"sha512-6NTmN4nfpX1htCN9xCdd3rKEOSL8RGr5hFlSMl87pvQj9dEN5SFjsU4f+33NpYpCmZJFOzSAZqAg1F9Xgc/dxQ==","signatures":[{"sig":"MEUCIQDAL89IuRL8Z3AXahUWlkeA6z0szItMy8wcdtGEt62JkAIgAgWD4BNZk7iMFDBkXKWxvT7hpJBCkC4GBH9lHceZTIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1448539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbs6KBCRA9TVsSAnZWagAAhEMP/Azr7OI004IVbfp750VO\nsBh2ZwsjGXA3u8StIE4D7KzKpX0jg4YP/WZd2+5XPrSSdRS+fYCX2Jo2Dz3Y\nGnsKg/ozl8GKSyR/PqYTpnHPc0YQQ92k0ZJ/MRwsr9XVRg+VdSv45s65TW9S\nrjz3Z4E6u6YnPra8KgpPK7IYq/enQeJMh0Nox7Q5GVSBqb+Qnk9n7aNFMEFE\n9k8DGURFjJ9O5FP5xNZ/YgGwEK3V/3uTXdLp5b3JhAbqPO7ERCylmQajOwWE\nsUuo/LxDH1QNoKnb3L4fqUqOAiWYFLbh5Hg+dGSZ3AZDHPnVnuDN2u6Nq/C9\nhh+NdofRTshihwFPWxSYZwuaePeMrjZ7D/XLZT/mikD4fnycX/nLIaGSDCsH\nSUV6j8sJd8z0Pl697+y92L175PBmJFaDh+Zi1VlpGahEpA2/GTxtDr+olDOn\n4xulL+BmuPTE68N5890ZuGbMvWA7q+rI5qhFEpGjmi0t0WWPVJcx8c4BtiZE\nmMN0H0ybL0yeYB/0jbNl292sHgLTg/Btr4IOpeWNt97vDA/1NvzgMfm5Pv9o\nuqaHoihpr7p07onFTw1EIWgHtNJSwQr8xQlGuA8J41EA0LdX6/zLQT79thPt\n+fwrQcGzC39G3/F8NK+gn02DpSXSQO7WKusjbZAMCOKBhVKlf8ie1eIaHDxb\nKkwS\r\n=wOTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.5-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.2-unstable.1_1538499200687_0.07721140130502535","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"aws-amplify-vue","version":"0.1.2","_id":"aws-amplify-vue@0.1.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"8593d58ffc48ccd996da008d89aa0215afca7005","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.2.tgz","fileCount":65,"integrity":"sha512-bBjnMpNnKS3j1hnXmAEhjt3fVpxfLNWP3LE42EucSUC4GfyNmsupBeAPhGjaICKoFrJzZ37z9+0BbseVazSNxg==","signatures":[{"sig":"MEUCICS5oRfGQ3t8dMCy9Mx7clbukkTCtG63AIVloXJR7iM9AiEArBx+R/1n18ZyxnEf6qGDChnJgbGbymXajz5Qi/d2ZBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1448731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtAJSCRA9TVsSAnZWagAA99gP/R6cNQtaOFArHbIah0oV\nPU/KpD/xg89wuu7q3jad6OrtCOEZ1UqtLQqQGu2b2p921QgWMjsEbJlxYQWx\nqjFXmtckCT/bj4BEiDHc8taFFKHpGvVs+2hTLx+I/kMMsuvphT/9e4OBDFaB\n0pWwlve7P7NLOTorUVC+RECyhZtz1H5PaRqcSRaQ5coUcvq0Y+41JtihQSYe\ny333US3N+k6bkcDdkA17QW4Az2ykgVZKbPUanrWKBSH3KOVAStbGiU2wlNCe\nEv9UUVHrTqeMfgr+1Cs7/VHSOeFhLFy+6hafac75UKylZP/JzodQnBjNpPKh\nVZzN75Ei3cdMjnCuCL2F/pA0zu5aTbRL8MEYdsLW2l4K/MQHS1SiRL0bQf5f\n0800+70xmo9915LYH65jz33KoOwh+MzMYsaekzUrkfI9lYTIPg5lEtzP8SoA\nfaL2yWPH+2OckJmg/AVXsP9t+M5mdTOg3IubyjsJm0r5SfsVKBXYSoeLbjVC\nsb50R/oA6Rq+sHhSQxpwhaAC6gDm/QbvbKqftVDwVtZGXKmVtOr46lX+L1bR\nGp6+HGsF7yUpPE9wKVi7pp6k0+DLhzyO5ksBhko+HjUawjs9M2eGXFj8VRST\no5k/PfPXGPa6DWGHh2SEP3SmXDKnEu9MyyJNELnnzpLNdwx/lT7sxHwY7n5D\nwB0y\r\n=U7ys\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.5","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.2_1538523729252_0.6026129319943905","host":"s3://npm-registry-packages"}},"0.1.3-unstable.0":{"name":"aws-amplify-vue","version":"0.1.3-unstable.0","_id":"aws-amplify-vue@0.1.3-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"fab942cb834675460b69ea51e3f702bfabe1b719","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.3-unstable.0.tgz","fileCount":65,"integrity":"sha512-DGl43RTiCK5LnivtfepIyzxZrfJgnVQcgWi7Nw+aYw1isVxrJZbKzbfm07xTQWXUTd7wWh1m9EEhFQI4N617Sw==","signatures":[{"sig":"MEUCIAzef7qKjU9NsBmZg3SeQcaQsqW61Ysc+Asat75neTQMAiEA5opfPZMeefXWcS4+u2GmrZMYkPs7N1PPKxSu7AG56ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1449000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtAr/CRA9TVsSAnZWagAAgccP/Ay15+GNuZx7igEy+rFh\nl5+1aFkgR43h06YLSL+JSUo0AtCe2Mx7Z/P0Xp4XnTLD2n/GVAN5Tuy/LSha\ny1wpUaLlGq+Eqy0m+Pxb3FMu1s6ccSPC0DlBCM8K+SB9FIzVgG4QKQXg/8nC\nhUWOsRwzeWYV8Rzj7OGzhDGyoO2863DcAWz3Jrk94w3nyJtbYQfm+ahZhlgX\n4Vp6/5Iy92mAv89ZCi9MyZ3cE7PPqFFPFdvbWBbTwidSxmqEZXlvNyapwQ1g\nuNO7qVMGCptTsl2UqzfSqCvQI5Y/pUOdi3BgG5MFUdkZUkcEpUx9E5D/55mL\nmFycN/w1+faPDBmCtON/eWXnbXNHJZyY3rl0qDNFDzX9h7fteQPLQEpUk5Xf\nvxbyF04Ee/wtPdmCKHyEkxufTAqpHs7bYuOB9mFVqvLGkK+ELU2YzZyzOWCX\nd3fSseSZFveZ8DJI8p880xRvwxaBeEnx0P7k8eDlRYr6o/qw8dXmgP3j3hJP\nbd/Vv5WqTYTRSTkuY5SftSObAni6NSCIyyPwl5CpD7dao+st6iXItzTfDwzM\nmkfiZG/1ZM+ljKIfX4GN1UXbVt8fSjzX13Cp2EOTeEUHWGhkbj74WrO6hk9a\n2W0IqiNM/K+xZHDWmY+M0XNnQtm721PEYFkZRdvQ+0JSshIiFnxUYd5nsNW5\n9S/o\r\n=mjbN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.6-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.3-unstable.0_1538525951021_0.08512057420708818","host":"s3://npm-registry-packages"}},"0.1.3-unstable.1":{"name":"aws-amplify-vue","version":"0.1.3-unstable.1","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.3-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"3738e21b7975d975e53c9e17e54ddb78dbd5056a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.3-unstable.1.tgz","fileCount":66,"integrity":"sha512-/lnUQ69gzrI5KiVkDiUg4u4WrfeSsL3H2FoJXYumYI2o5/KgsJKMI+MMBW7DQFKlISqDjeaLR2tySp/ZWDoi4w==","signatures":[{"sig":"MEQCIFa8qfIhosbZSbfSGCxbXQGKDIV7V71UKAuphAgf2U/EAiAdDnUBX0tgMMh89Q8iPrx5dN94xH00EYLcQ3YOcNkmAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1460631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtUmzCRA9TVsSAnZWagAAskMP/Ajfv16KWmKWAO26lVO5\nDbU3tBy3mno3/uw+oN4xdn3UeJYmw1waTMAXe3/ZQjE9dCuosvh+QXBpv08v\nmhs0vR8RUKaYdNDH8Upc7yF6ZlCdhbyKLwIx/WFGdyZ5c+c556G2AsN7XtiC\nzNoCv/x52IR178rxvO9NGYzd0DRyxshv/MkVuwuWLlaiAoe13Ln0HhEQSscs\nJx660d1ES5I76UOT3k/eU8Y8BX21gFqPl2wA20k01SzmsZn72zrSmnDzM3mo\nHI0Yp3FnD7h8UEUAxl45L/rl3T3NCkL/oas1846i+1077nkawkkQ8Oa8GKhs\nWiLpHIea++pdrIJGX0a/y8/PZrRlA6+M53Mze2sYkFhCnJLyVmAgS665jFPG\n1P8G527oIhjkcTkaFAH4jDmLU3pU0wIs1dUo/8L1OwsmTu22vGD1k1U6yUQi\nWYBVd0rSCxbIk5vq/UD6uQUMR2DlNob1Q//0rCT9FOhQnZHmQEXvEUfo5qVh\n68ZdTTySHNW21K8D2UDZUZgIlyLYmXElpvC/ZzFLDB/9OhZuzuq1vMKjS+dW\njgcAZ1Wk5Mfp7E6m0qK8Yn8lrYat0+peR1crxuNow4MB0JG4+5LkyNitaZe9\nb+il66m+332GmmzqZ59qcq4olS/A8MqIa9Ba/S6KkBmw5H9hiTZtUs4x8HvH\nYF3I\r\n=N5Bs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.6-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.3-unstable.1_1538607539264_0.0819513596708421","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"aws-amplify-vue","version":"0.1.3","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"d7cb44e072ea9d645732cfe77e14b74fe972ce6c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.3.tgz","fileCount":66,"integrity":"sha512-TnwaMYPO50+3m/Pm0OL1j3xabsFvHNQQgatsOs3CY90H2W2+eBfSYxeo95wa2p+RfjQwre8ThOb8qS2nDVA1/A==","signatures":[{"sig":"MEQCID6VvUXvOqKJjZmR3vPwzs3cfkGpIjHux5/0AohX8bEnAiBQpn6h73VhTIuGPXMErL+/SByDlrAVskgD0SprDWoJcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1460823},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.6","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.3_1538696070045_0.09961473478951333","host":"s3://npm-registry-packages"}},"0.1.4-unstable.0":{"name":"aws-amplify-vue","version":"0.1.4-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.4-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"430c8a8ea0693c5f3585e2efe1efca9c25454ce5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.4-unstable.0.tgz","fileCount":66,"integrity":"sha512-0CzJMeK3Wne5hh+AaNnF+uJDVj0bHWEgpTLwiAz5uvscuUQL5BL7QqYygVy9Sy91giaLFhao6Gd240v9q8V19g==","signatures":[{"sig":"MEUCIQDeOtqjyF+YKlsKF8uPESBLThpd8nV+8Uhi1KfJY9yJLgIgHNMCB4yCrr2ue/xaxi7EWmpPeg+lFQfA+uY/7T9TCbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1461092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbt8VCCRA9TVsSAnZWagAAuowP/iJaToxyZ2PJPcMbT6YS\nf0sIURXK2GgpE8B2KhhjlQrgkGtSYxnGpBTjseQ+ddczyn3ok2KFU8Jt5UEU\nAFRCSU6hXW00detW8xwK6xVurDV3htCfoFFw0rkf35+Wp6/TQ8Mz/nfxCoX5\nozSCi82CbRhwNM5Q0n8PLS86R3yJVAllTEsYShzp8bZ/3lqdmSvUIbeYXBB8\no6VD9D8N9TorIR/1G8z1UrNRTJq147sPrcEliuuG6PCiSw9S/X4M1ov1qKNa\nSCQ+66GqkAIwGICJsVp1wm29/5o4PA5SF+0BEiLpzmdZBw/Jnt4ZslRg2tIL\nf3iuCwDVsKc1Ba/+AYTThMnTdBNQs5+85GHVegXAbWfjSwjZ4ItEKTpkwM4w\nmLLaC3Mo+ozX+1308Aiv9eFOWRAbq9xjaOh3Rt3KD3hbe2rMgjgbJau55Kj5\nGDbsXEwD/1H0hRf9nscmNMo7p//VNACYK94QdUBBxn/urSZkXKGIRbY52MEq\np5tWArYuTnB72XV6vVIx1CNozymVssZxiBdPjAtBaVzhRh535ZV+KCHCROTy\nmqU/ijHrbhcSB8i6fShYVKnzUpMM5Smv49u5XnIU3hND8x8u0WdIU4v5V6eY\ncdSnMkVvMMszdwRt5GywtSauScSzAMSmbIlvIL9ENXeLDiSbxKS8AxmYM4tJ\n1Rwf\r\n=aS53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.7-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.4-unstable.0_1538770241710_0.11908640805267567","host":"s3://npm-registry-packages"}},"0.1.4-unstable.1":{"name":"aws-amplify-vue","version":"0.1.4-unstable.1","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.4-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"3d8fb3de46d85c7333a58963b088217dc4a2aa15","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.4-unstable.1.tgz","fileCount":66,"integrity":"sha512-O+ttxeFwGopVAqXBE9MRkx26fPtfcp+VBAX8HHTjDM8R8pq4Yf+mG0a0O583x9uXHeAevkAYXKciVLzVN3ZmNg==","signatures":[{"sig":"MEUCIQDGl/ESZE2j2NrnPH13LZ9N7pP9acJw5pSB6u3jcllDPAIgNTF09G2Lpqys3RdrrGzNKR3zBvr8g4J6oDWQ+tiqs58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1461324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbviZmCRA9TVsSAnZWagAATM4P/3T7e4ttcfp6DOcpVeHj\n8p4Qqdi8DF2smPPKkV5w9YsMzaJgUJR972nwOt3u1GXcM9sZm+tp5lJyip2o\njCEd5ZJzTvgZcRQ5vLhoF5/CO+iEb0Wbn6Fp0ZGcqfNtdI82llY9padt2v+0\nlIgY4QK9ZvEuLUj68NhXloEqYMwvGCY1ccONngzzRBm+oTTlvmSRspDgGEeB\n8nuVwHmv0qaZZftXc+DrkWHRHhOqvfgreV6WS8GSCpwSoY1XA+8qCVfslzzo\nKlvj6d92leORTTM/y7SEH6xkiYDmweOwPdD9Ut5ofAwNoAWWUcuMoJCKvbLN\nTLUoUu3vqtKDw4LntWozgXXLa3ehCulZvOmQTewW3yzTwfdb4cCiDC0jj8mC\no4RrZnEdwdcUQUviA8UTLH6lY7ewrz+pEG1GyPfr23hCzXHvQhU0YqREq6rd\nHV9QFj85NFwpvGkTuKcpgxMlCx5IPQnJAeoLTBCUW0RaX3W/vUKUpSOZJ3el\nx2FTJ0xJQ0zxndpjoXSIgDtLLCocaM1UEOPqgJ2jeoQVQcofdWq78WjqX3ZB\n0j8KkuZQ5+URLv20aBIVe/vc1rdS2QYEDUrWUrP2Ip/bmzUsNAtLiLfO3ekM\nIvMWBMAZ1GV8JmcZCMFtZLQh8hQ9ueLQO6pmAufI1kBfL69h85N43SbQI23q\nkNbS\r\n=A9h4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.7-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.4-unstable.1_1539188325145_0.7037136790681295","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"aws-amplify-vue","version":"0.1.4","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"b2113af4741f1d9890fab006dcd29d96f79768ee","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.4.tgz","fileCount":66,"integrity":"sha512-rot4jVQxVnvx45DNzfzdndMCX9Lv5QB87iyyoHMGQ54PMAeJfbCEqOJlY8H4N6RxRFge5ztDn78PYWRvjfRC3w==","signatures":[{"sig":"MEUCIGFZ72iG+C3zS3VQrknEZ6VpbiqVan261HTeKJ7ZEK23AiEAmFNWch2EM/QtQZ9mM+x1PhWbzt7/J64wQu+mq4t7QrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1461516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx54ZCRA9TVsSAnZWagAAz70P/RJTgjScVOYwHlOhUSSd\nnU8eveD//5WmeKiCnAECk0nYyETzFY+bBdDpesbCJF2xpFlN0hcOA7QeIR0s\nicfeYFEWa7b7lpuFTkoZfEordrAULtafqGzJd8d+u6w9hz5WgsyBvgQ9B6Op\nms/G3qCxmvc1+bosjc7eHmK6XJOz6bayr/02Otd09a9ibN8a5uWULPmr+rHN\nnt75qHrWGh0OCyjSwiCyj0u8cDXOMrCuKVnaxgMUaMb8KOFa9r5VDDht7FM0\nEJBDmQRttEvffp2U/rTfpgmNTKeDYEFUZuY6TLWTV7bdh7xH3DxfDkPh6gbt\nDBVL2rhNIFPTzzExih/8L2hxjxL7dxG2DHOKqW+XkPNFmxZJhbLHcGKG3P4v\nrWSx6XMXkbQy4ctcyIpofWSTef3W/gn4rKAGQT14Qy3Ajy9OO55sTuKHkXaR\nAKAHqC1ekFjsk8YYZyd08IRRYp0JGwnZTckm5UqTHYFGvWLEW5IbQwkPmiZq\nwUCayJoR/7xEvNmUMXfEjoJTWfH4k87mJnBUvawKXtzF/7WWxVyh3+EJ+sJC\nHUeEoxR8r0epOJpnFXoKlyPwXaE3vZ0cYU18XEPyr2Db+RXh9aAge23Jb7Xb\n8/g3ldYJ0N18KNqKKe6b+2IOWiEnVJLIpJfKY3vq33w4Ek0PiVXabDPhfM3/\nvKKT\r\n=AjVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.7","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.4_1539808792938_0.13034672589392193","host":"s3://npm-registry-packages"}},"0.1.5-unstable.0":{"name":"aws-amplify-vue","version":"0.1.5-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.5-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"8ca1763f6e55425ac0ef362366086a3527942c19","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.5-unstable.0.tgz","fileCount":71,"integrity":"sha512-2GWDoQbW0O6BTUU/3RU2chFgw5bcFivHfkxkdMokJpVzzMo5RHwa02CAQ4zuxzjBgDxwiYN7nur/HZqTuZm4sg==","signatures":[{"sig":"MEUCIDAsDZFMby8jRYhvkXer0Bmg+TpDIaPHda9VWh6l+NuYAiEA2QD5Szpfge8zJisUkZ3EuIbl32jtvohQbMjUHRTDTdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1511443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0K1hCRA9TVsSAnZWagAA4ucP/jWp54mJY3DKd6cBstp+\n33mEMiYmxz3YkGeraXeqbpVImM/OUh0vhfodsr+y/yBnMnTj4veRxqbPO3Th\nPQpKpwBbU4dBgoXlQmbnkN2HuREx4wbtqOyR7bJPNVwovN9lxaLFOpQ/vIvV\nHiocVrnyL8wAHA8a+SSi6W58q4u7wkXlCCazNL8QWCPCsyDTej4YJ+NPbTJr\nhZLag8oKD2GU7zcg5IdEUCG8QRS3MJ3oyUCNkDxnpNVANg5JhtXe3GuC9+wG\nhGeyBXmHmtAzcGJ7/uTNWbT7GOU5SF4b7ZwJdAf3FW8ZN260naXR6070Elfd\ngFV4P9fM2UZqc0jl0qPgAisoYoTUQlN/n/E43QqfJH+iLq60B9K65BvopjRo\nle+yGinxLZ78Fwm+3Q0lfAkDBTS9I7b9YqYDHbeVvXXzkSyL20+iKwWXUNV+\n+AQJU6TpNP9gHnkc0pBSoMpZ9Qq027GrdJqGMDWFcvCb5Qm3loOLxmLmiD69\ndVaGs2SYusKSixAkltKkn4RXR7XYTsYKluFt71PqR4ZnsA+QQIa2+Y7Kc67e\nXLoLixeaVWDrZ/QXdhS48X3n1XrAU89U6X+4YFOSaIWpDrMKVk2jnV8q0FjF\n/hKdUHHtBiCOr3DPRsaUSWmAaqufwSW5umtK44DeDjncKL3j8psHIn/Cmxsk\nyl4z\r\n=JHds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.7","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.5-unstable.0_1540402528688_0.5039634163091182","host":"s3://npm-registry-packages"}},"0.1.5-unstable.1":{"name":"aws-amplify-vue","version":"0.1.5-unstable.1","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.5-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"da003a9677128b7320bed223222c876b1f3547c7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.5-unstable.1.tgz","fileCount":71,"integrity":"sha512-t/pl6ZwxvKDtBRwQydoOsfWYicbopnwsnQAV17L+atCuW3iVliHHM15HvDRrhxK24gEsVDxdbMpth28co/Vc6g==","signatures":[{"sig":"MEUCIBOsITLW4Qs9pceYmZfKynPI0pCLnqPP5EUfOIb1WjEBAiEA172ZIFljJj14I+JOqmUN0ePWt8GCK+Jdjb/+RQLB1X0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1513856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12rcCRA9TVsSAnZWagAAp48P/1ECU5OOCVdTREyfot/2\naH8/M2LFksvNGOc247cFIjtAiJ9ZPlA7CrYz+smuyS3sdr/c4sjlP0VK7bSV\ns191aWdFUdjIk/A+VwZdyNksBKWFM3nFmZzshQU5/ISEHVkJDJ0WhDb8gFew\ne9UjPBp8Xp5PFbBmK5Kme2oSGW/tKOUYcB8fD1T7/6hUDOc+uKtgPOtWktss\nhFD+pUrrFCWY2wubGwIJ3ukI/c6hWVhtaMYrxcTFVy7m7fHfSuSvexJE9HbX\nllz7wXuRIsboZgPNTobT6A+WWlIFG5l4N3+7s2R6sP7uoz4bNblNZGQGYbhY\nGrRyVLPd4RdRU2ZYxrp4kEu+dRKwJi3sAQoOjOnH5dbvzkW1M7wuEbemWszy\nV/ZvmNqe9QI8+Ug9L9/YaLVWHlL1kOLJeH5qGCpJ9fgaTPCkrHbMEGKvMAoR\nmAa3iYC0Frerv5CcT6A/4DVqd5h2dQW4+37qpALk1HRpQ8pULKmqnyT7aMze\nyew5gnJvOLouXQyYx0N3qFoQfhta81qga9foHio7P0n1PystL0viFy7mRGHh\ny51oJxIldRmKax/oytyDFn0OkhcAiSwGsi2RZ5G8c7OKZWDIwm/VXDogRnaQ\np7sJDrqEbOPcKj45e2S1kB720wAWgw634+DRz7Vxcp7tas//nfBv2yX9rNG+\n3ai6\r\n=snao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.8-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.5-unstable.1_1540844251184_0.2516356104525368","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"aws-amplify-vue","version":"0.1.5","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"bd8f0041464259dc4efd793dd9a702ba5c0a6a52","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.5.tgz","fileCount":71,"integrity":"sha512-5zO8qQ3bj+mpbLB85mBY1VT9heb5rxfPgVkV+vE/jGVMOaCSgVFXAvtQaGJN8xMjvtRgai/Gwx4G96XLB60yFw==","signatures":[{"sig":"MEUCIQCMusTh8Ft/1RCkU+DZ0gCz/AqriTl0p4jsXYoB0ogkdQIgVb4N6ctuaObZLCkft0gs1DbxqT15S4/F/5KY1Uak6fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1514048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb15QcCRA9TVsSAnZWagAAKvkP/2TBpI9Btd/B/ROa/ZbI\ncETQh21KQBgUcfRkgIjNxnF6+ZOD/AEJGOMwTLyu2G+s2FoGWyWouULRpF9J\nXDhRH0UK+p9VQ+rjtT8s4SKuBazsj6eh8mXGKbPAhzCkL3HqVWRYi0I9RA06\nzOcwKGwJ+TcXs6jGiYjQsLZ+Qw2GIPpoNUUDJv+CjT0QucjurVHkSozlw7wb\nMerEMGPHcGAbNkmhYwLa7UWen3uYq988TZURhz+no5s1OlBdjrNnac4w4Ml+\nYo9+qGri4hFu53yXWt5Sn8oXd0NIoeh7k2hxO3zBGt+gj+c7i7FKsF1+FNz/\nfqGkIQrKI4mwLPkVgKMAhzOV8COha7RXLbq1oz1F0VJZlBwukMZRpio1KOj/\n1tHhZwn8lYBIjNLS3veNml2mtLC7U/Rv9qbGOyPJgkCBoY6SYm+d+7y9zIev\nzy+YWHtjkhGYMb03tfwUa0lGDz2utHKfCcepbMc9C5ubKzZF5/uwiI+qHFve\n25kP9IVLozeenXI3wUGHZ8ZL6QwwW3U/qj+kbW9exa81DYAzJjtEPjBQFcrE\ntx/CUrk7W64VDrxfjgBHUCdqkz/S1sIXaF7ZDiGl5zUaovSkduhdE4xqBpuJ\nLqi0MCPUmVpXAe0wIfrpK2sLj/icM/XjV+07HfFbfQ7NWhmO8F6h3JTnZKrH\njFcA\r\n=9sGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.8","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.5_1540854811389_0.7369968530556907","host":"s3://npm-registry-packages"}},"0.1.6-beta.0":{"name":"aws-amplify-vue","version":"0.1.6-beta.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.1.6-beta.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"08764ebca6df5919599af59a89fa19cff51181dc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.6-beta.0.tgz","fileCount":71,"integrity":"sha512-mt1q11NeMjl8dnS1xQXIX24GRwWWdo2pa93HZgNy4Hd4e1IvrHY8wO0FxVW01rAzUWPIPG1QQLBcSnh++TCL+A==","signatures":[{"sig":"MEYCIQCpZKMrfcwWB0SWFrqg6J9Y1143hufFfRJZp0nv8DHI3AIhAJ2xtzr7FNeWJ95vBAUWdL5jXYfoZ+K0ocMfhtFJV9uu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1514421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2I+tCRA9TVsSAnZWagAAsHEP/06m9QdoRUYWXSC/TQ7O\nEOEdowPRi1dQ58MtPOZ0ALizxRFaF0EMAOVkyr7M0tKyQluc9LDgjWboMA98\nVOcOwpRHwBLAx8PaUedFt5BXL4NfuBNIxNkxbCdslHTw7tFa+rIDrQ08b1rZ\nIjXjqrdwLmqsGY+ZpdRwzxIdXq5JvFsRM3NTKR3jLNGx6imTFOldZLArsyDF\ngTrfIKBtzc9w6kysX4FS711EtiGFNUWDwX9MFIeCX5eEvpSdZ+XDW6Dt1l+j\nvugluMnBE4iHBHiq/o4LFcsU6NcGlr4Oct1ABSqI4S+4xCjKDbd14i6j5Nn4\n4Z48wPlIlXE3zYHfsyAQXIelVaD1OqJdilmUj/XKRnY8ZB5K+YGqfMfeWWYD\nicPJ7mVTzENcGPr4OmxInwlU80As6ETBTo+OCJxo6oC6nz8yEjOzk+4IZNdp\nq5tg07KlNMIKpmnqKFFR1zXMPbhcTMKf+ae0is0hGxjBA5EUQkhBLQlLeBvy\ntroAPEUOEYR02uUDs4ExGaVyXGLOaxhLFggOywvokpkDfZa2c+qLwG4CwwVl\nmMfJnk40yidZ+OEspKDtNkA9xGJKp1f00Ybt8cZo9b8TR9+YifTKXkjCHeRs\ntnWFGC8GbRTenSaFJ8dw5DOqNP+NFMKR8wjjFa713qH1sNnNm1yrpwtxQgkA\n9ffb\r\n=s1ga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.8","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.6-beta.0_1540919212798_0.10750667842775541","host":"s3://npm-registry-packages"}},"0.1.6-unstable.0":{"name":"aws-amplify-vue","version":"0.1.6-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.6-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"fc7248ad6b950c5490c91ea7139dbe0021965b44","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.6-unstable.0.tgz","fileCount":71,"integrity":"sha512-Pz6YPS/YCA6L3ceyOGE6XxuI1sILOCBHnRd9oQu5tzHWlM+YMo3NAsfZDJuUEF+bUME0y7q7FuzC7/e1aMqzZw==","signatures":[{"sig":"MEUCIFY0+JLdBztYOtjoJ1Kd/wbHxqWneSBub2RzH+B1ggGbAiEAru1c1PS6V08vK0HXk3E3eur+iqd60Zw70ekUGJti1mE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1514136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2M6fCRA9TVsSAnZWagAAmk8QAIzIJtidgpW6fJLXHbav\nTqoR2XjyTMAuEYMjvJMmf2O/2nJjOE/n8iMG5fJ6vCFw0UxvctBj17BX87nX\ny8CetLvVsOIlw3Uvpmig7uHW9vGbblX8FZexIPw4qY2yDLpmz+q2RWHpxFmR\nGZgEza3RHTDyvAPXf21gcnbPbZ0ekSKC2UHoPkaPl1M414DS6HruPWPQCfUW\nycaPVMEO36x+0AI6kxLhHvjDPc1PWidlw31OuAtL/izPWdZ8t2x9gQSzqUUG\nWlFZAO3yoDgwu20hBs1TM8qxQJvMQIRtOW2tEtbDykDaFZZktnFfZ3/im0TA\n6lpA/CPDCp4++w0c3rd7uGzanLt/2fRRMaru+sel7iS7kc52oBox1ya640UV\nLl0IOrSF3RYDqQ6Y9QCKROBKrcopUluZiwdhtx9KpoeZpX7OZMuqKiJZ4L1c\nkOuHn+1QXHm88Q9WjlcwVvi2aE3QqL+JMEt+MTLKjlfrmIaFtImEfAveWqQi\nMhsrFpLcmIPd/MboxYeTndhOi4p0u5eURGPDn2hNEgTG0fHAAuElgciILdqo\nxds5qkUHeFDc0fPeALsjGYNuKJvSjxFNRuZZwg7nZCEo3rBdoVh3qSV8nN/i\ngswM1yCCXjJO62/rP7SGnleJw8XFhI4QDHgNUE124L/7ICUY87q0vt1Uqhsk\nXYVQ\r\n=SGR5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.6-unstable.0_1540935326920_0.9335035198830628","host":"s3://npm-registry-packages"}},"0.1.6":{"name":"aws-amplify-vue","version":"0.1.6","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.6","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"072303fb7b8e7f65dc5c1c2fba72748e618e0015","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.6.tgz","fileCount":71,"integrity":"sha512-C/umlQw2MMTIR+amyWpb/0fu/KoSGGJ6UzJz8x0BmLsuOeyG51XdpDfCsAo62YP2ZefNnrdmrziL1vhd9URzHQ==","signatures":[{"sig":"MEYCIQCMQtLF0U/7JRui6KR7WBnLkla7D5rHKMGWZUK2x3ZZHwIhAO7GfdDiKLv8IZRL65nS4q5lRUnemos/g5quHS46NwYd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1514328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb23hxCRA9TVsSAnZWagAAeV8P/0oNJr1A9t2K1AECEULF\n2lV9kE1ZpFfJDA8FHLi8X1IXFKTWOqjZxjMstsjgmSYcHZtEaMKU1ib6tC4E\nKMQ42mPNCI6/g3NY0csKCJMKQuz98Kbb0g/VMNzCNd1j5H9EBL+Ame4eqa14\nXknvrdesvxETqFLlTwFlJl3ihMbl2wZZNeUxCY96T3qoh3PgflfCx0c7b+d+\nioo9vA+x7ScMh7gHs6WH0QZ7tw2omPQ0iHNsbxY4lWzG9UMch2SQNgRyEUzs\nh0YnOIt/FbH0Y0QMms3dW3t5+cxbj43IVB7KfVSc6H3YUtWLZ5yDamyPv/lV\nBbYUp+4Erc7vbJjx0uXgrNDMNtY1qxL4K3MMNmIzOYTe+CBoZLPZ94UrgjxQ\noted00qgzPZ+ik66xMPgDUNw7CSV15jE7QKo0eoVB8/m/HrWOHAOVTVMX6u6\nJsD1xUBx3durkJP9FTUCJrkCxJdu8hrUic8PNxVFckWROFoqaVm+/1Vit4un\nikAvfwKit/niOD765Yvmtm6ZpG0urtErvMm/oLkT/E3COeZiIBbQvtzKlg5J\nghmardI/1qSoAfHZ9mtMQ1omFvvJtY8e3u1klbrBfV+40w+D1v5z98bl/X4e\nRPkGanXsmfqjYKpqgtpAxa99OohXonTqqn775njm0dE40hUpRsh57xnv12xn\nlE2Q\r\n=/8iX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.6_1541109872883_0.11639169009965156","host":"s3://npm-registry-packages"}},"0.2.1-beta.0":{"name":"aws-amplify-vue","version":"0.2.1-beta.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1-beta.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"64cc1a37ba4ce194391855bdfd9075a3dbbda62e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1-beta.0.tgz","fileCount":71,"integrity":"sha512-PSgg3S59PYzJk8TtZd36BMyGzDw9Epg3433qbG+WTtpWviEFOqQLB2TgJwZsBFbZDGefqiwKvEcf+Mjl4aZoPw==","signatures":[{"sig":"MEUCIQCPVgRNBnV69+4/p4U4spLGEscBOHD0qchXl6zoabuvEAIgNSHHaoOJ4zUL2Dij6+8XSWKFZgtERkS1CZ6liaN0kiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1520069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb3LKLCRA9TVsSAnZWagAA+dMP/0DCJngO6o/ZcH7tRVCN\njnD7etvdFr2XUcj7Ap1+CBdBJzsNvapbhaPEFkh41NePBYYjrvTBt/ZcMiG+\n259ZAOfaah5V40BzaQDomu/orcJipzsS1eDK0vyfBZhE2oRVBk8z0nGpF+Q6\n6xHBfd9sjKRShSLBT7cj7KQ20buw0/SocUatTfkIgoDBf5cCfnrv4KqKQGdd\ntYa2dNb3zOFz1/SlSfGv+CQz4R0UkPchGOEOU5NS1qFJwlP7EK6Lw2M2wJe/\nqKcsMijhoOX/r0T4ZNtivqBfkOzyBlggaCiiidrHmUIOYval3lEM4SBU7bnV\n81bMZQ+5EdMQYFKOwJT8jfME3Q2Ph8370lkxONHIfChqVxlzwHpImJpErETu\nWMU0BHmSCblkcOTmwbR/tIhB1B5TfgVcxecAQS/UBuULQAsjfGtvdqEQbU/T\nLeEHpr+b3faUp9+Wx8lUWHBxeYa+zKfGY4Q0+3noCv7dk8bya+eTA4/p3Bpk\nNhwGCJXO7rF3hIsktG3I1YmS+O0j7MJ829cHw8PMc30ow+QKNcN4uBu0Yzb4\n6chKIT4pZtImI8UTgLTH0tLamOGexFB+zLFL0cLolEuHkjmY0DHFGjA4pbrS\nXUt3gXmQmjvLZNdPE+7eIW6t2mtbO5bemrO+4v3tuVbmNtoF6dvNC1yPmrIz\nMKbf\r\n=Mxgw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-beta.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1-beta.0_1541190282923_0.8956952276251655","host":"s3://npm-registry-packages"}},"0.1.7-unstable.0":{"name":"aws-amplify-vue","version":"0.1.7-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.7-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"180cd5d805f4d183bc711c467fd650283df789d5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.7-unstable.0.tgz","fileCount":71,"integrity":"sha512-Tvzydk0w+svYiE31HPYR7bsdlK921EWTF/8NWEBokyFKPOz9EMj5+bcE75RRpmEndCHmRQrWFhOe8ULWcw+kHA==","signatures":[{"sig":"MEUCIQDGqZJx1PkHXj0dCYe99qMv9ucRnVy6VmrJOPgC+I9hPgIgNz29SLlI8XVYfde/TDWvxzzIckO6rL9FuoAzRuaHRNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1534261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4z+ZCRA9TVsSAnZWagAAJaoP/jKzci0jd2z5cfu/JQQ+\nyp2EfETJboj8aCyUXak6Xojpyz6o6VE81+iX7M3qax5aLIDYcGp7DmUUoAY9\nUBKijUQqWleMXueolgfjA9USdyEGRhX7HmOpNM67+74YkjxvEBumLjlSuWYj\niVhxZHcoJIAc0ng+idYHCPwY3QvKlLqQP7eTMwR8OOOWmLtJe6kEDMGlpfZ6\nxYgIYSfV53tW40VG8XkcUZ1UhJIrAwOldpBRfVYdqqIHwsRutROk14++osc5\n4PuCwoVrxnaFlmk7Q5dyS+qSCFlY959B46D9bAyBBwF7hy01RIA/MOkNvv0g\nOHY6mj4fcFys6Wp2sFOvhDURIAYjolYgXFfCbsf7CfHnW3mc4uSfuxrlAUP3\nM0HcSP1/NZN1KJUIOqBejAXknsRnBojVP4QVYM9s/dkrM1RdxKBck7rQ8GJ6\nWXo3FbazwPuwmuXQK0JA1HwFT+4wkR6GWi6Qa3r/0ZQrshmxHf379c8BefbV\nqZysjRHHhK2WCVUOen25sQ753oeKlLj4oyAQdy1fPXO30B7ikI1fKor/JH1t\nbnhAhJfB4iiT0JcgZ/BjZdaOQSKaWfwAg2sB2jPURt0JQB/kTqQRyXrNq0UG\nGqi6GflwHESL5TGMlp94YhwxZOORCxMRPduKO8Cx5aYtl7PMPoTvg322iyiS\nD1Gl\r\n=H/tR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.7-unstable.0_1541619608770_0.021971016244618502","host":"s3://npm-registry-packages"}},"0.1.7-unstable.1":{"name":"aws-amplify-vue","version":"0.1.7-unstable.1","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.7-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"fc2cb906f993f08c774151249d1e03fa373c73f7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.7-unstable.1.tgz","fileCount":71,"integrity":"sha512-q5oJmknOtdqWVBMr2oD1WgIIgb9KvXdi2s3v6YuIJnPS/mC6OEhZcFTV3tS+VegYUSjJ5zUhZKmaXrDDDZXgXw==","signatures":[{"sig":"MEQCIGy4br6npZgj2aaBsHRnJqod0z2ejzPFN7L+ubiJZiX6AiBVb1PtKZQFO4YWjyr9eVLBjLHTuOZ84aeTR1ptjmxBhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1544319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5bdaCRA9TVsSAnZWagAA2rQQAIQVJy+RQKubwT29zpKg\nCbjnWtSLZWWInyN4kpz3O4/s4O8uWvvaabvqKlem/IUrVEzy2V9Ol0Zk4gLQ\nNEOjOrU3Y8/529sN78bF+AXpFvK0okCNWCdkD9PMK9z47QPRRKhBYxsJH2QU\nD+eLuUiuO6TFbb72h+hKxvO/IppTzktISmnkh3YkaIE4ZN1TrMWm9FO4uc5I\n4RReAadQv3nRizkjHNbaObwamaRwSDWvEYZd0s6GAKP+k1QllwN33XR8+gnT\nQLACu9R2vmZ029J+ga0mByTkrFdGib0AX37LnmaP3phsbnTK8CgMerX7ZhA2\nOgc7C55rrMLzdhE8/+rADB0Wi43eI1yeEsUYl1RvW4HHH5bc8JWZ/NLy+qUQ\nz5G7P6dDhrESTyPVzKUgv363dsERUEQxaHqExYSSapUd4qeu/ZxqRDm8QXYF\npmXMIUvgg7fM1viD80E+/drTXMKANxbmNRBUfqug4ZFDy4sNo45pShBhgdpl\nklvaQCEdn6h5xhCy2/0bsBG8NBE3QfR4LlpB3rbkTaPLXboV5ATPsZl+XHwg\n6tcab4LTXIIP/AYbnVfleteItSyUFh19EOKEL+nhmwpFK7oR5yN2/hvImhWo\nbLJ08kFFTyo/4mqnYOlJ+KarzMKM/lZwpFGpbiUQqzjSg7yed4FEUdF4hiPN\n2F8G\r\n=EuMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.7-unstable.1_1541781337228_0.7705568457093139","host":"s3://npm-registry-packages"}},"0.1.7":{"name":"aws-amplify-vue","version":"0.1.7","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.7","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"5b60fa92d4aec0db6073cb0555e7b83d80f1aef2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.7.tgz","fileCount":71,"integrity":"sha512-ybHgR9FYFSFnzEj6sgspqROZF9GYmhf1RVQLDvJJx3h1SJiJJiMlY2pFBV8f9dZ/TKHtBYZDYQ/gZdNvC6tG7A==","signatures":[{"sig":"MEYCIQC/kLo3Qjt3BmMn5ClOkQ2AvKXGJ+kismcTWpkSYfW27gIhAJ39LWETLpgcMgrUOSSULkfxY6HBtePP954JLaYenJHu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1544522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6fdPCRA9TVsSAnZWagAAVE8P/Ah4WIOh2r/1iYnENjkG\n0F5pMsV6TllVp0+PzTvoLOBuCVzsPZiDr+LrgplfkxqpQ9L8Rc4ae8Aozuog\nfEljKYO6YQZb5sV+khk0VFSJ6POLLX46jSqvAWUkbwfhw/+QkTldWrhqe2CS\nyx3pb7utp5PInSrXnGPrWRFoFFqhu2llD3n1Kw2AHbs/YkdLbdDpMLzTbEak\nMgcUm5st21eRePZjRcNbZ6BbiKYgfX8IbLHs1F+DCIH7eeFnUjcypww61RKF\n86tky2Cflr6lkR31YP+HkwcWiHVl6spwhrlTKu2waVXKPh1oodu8gAv4rVFb\nuHGRPzV5XsRbe0d8Y/WviVwpL0g7qRWhrybDirJDrSqu7xlKJXlLyQNsBjmC\nqNLZlAeHX6hJytBqrf6zqiAu2mwCVfaYHoct6D0Q8uLz8Twy2MocCWKaUbam\nFq8tjmDmxVAOo15kGYwMAU5CExNATsbbNtIbZlUoN4dIJQ9rbwL1XZr4/Ja9\nk+CbGDkFnQb9q1mv6TAoI0qaTpwsW7xA0KI9rN4bnWZzZtAGysHLSIuaLqSH\ne2spjcQcNDzDJ+ksl9AE+pK2Uiaii/2r/iSAZ53/g1AJWdUu/nO5rBMc1r/j\nvJKh2s6B0jgoN28RZvxD0xaZWv0IzQlzez60pjIbM6V2o2GGsT2c0BcZmJ4i\n9Jot\r\n=mBlj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.7_1542059855019_0.9594518063561461","host":"s3://npm-registry-packages"}},"0.2.1-beta.1":{"name":"aws-amplify-vue","version":"0.2.1-beta.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1-beta.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"f6b80430e15aa878e19cf9c5c50e0b9d8b56cd6a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1-beta.1.tgz","fileCount":71,"integrity":"sha512-U7cjNl4ftNWBquxFqOrb/VwVCQxT2/GfyfAMn0mEJLPhtSmdQD9BPWxWQnTEuH+sPmm7tyTZPyfl4pd38u2AVg==","signatures":[{"sig":"MEQCIEp9+kMLoPlPNoU1tmEcsJHjn0Rn0QQEgdZ7L97rD+EHAiAbzGDyhiyrbAUQ+vUePTcPEMaNnyAFtTPulzyKiqLXUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1546478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb623JCRA9TVsSAnZWagAA+FYP/2v0fccRIRFOiXXOkRjE\nBTapw4tf6JEIw3mHWv1ZkJ5l4GEUAVwOYdOHAD6hIyxbEB8pEbMjetSXX8Ci\ngN7d7cltts7fZVKrRcLpwpW7Ri+SBM3p1nbvGAk/5oEzoOEZ5Jq1IQZm2Ukz\n6ABP81YFnBx6zFbycbF0qz5Rml9W7ErQ2dQa/UTWwSX5U+SxzpcfH8UeH9S8\nz5wtsW6XikC+KYFKb9YYR24oxZ8K5AZgWvlSE1hYNzXJJKRXpQ9nzwo/7LJS\nXdxbJRR6u85F3iOkodtcv9Q8qfTUlVhQ19Na/eAtzC6VAMBJaUQh7OJc1VkW\nUe3VLRDp6U11AKHNQ8xK/lT72uK4ucVm4PYXZ2E5AnLllAgr1/GI63XLZ84Z\nIA6DBha1yVQWFVELtgkjdDEY8sDb0XKAxVHQxfYwMQSmzSuo952QJozBn5JM\nrPMAnfS5plNgqDaznga9FXJK/xSuk6QTxVMzVZ2hKb/1SutXyS3+LcVpPqfp\nyTG9Iljxz/SL4r74OzwuyjhKoj9H2HhMdU4W8O0es5MNbFgV0FvcJ4Ul8jXk\ntOYs7+kPgtWt3i70PRpAxPbtwGsY+xxHHcjWWt9RpRQXvCHy4CtRYKnhEGr6\nJljlmtKl3aLoJAZfdYF1JKN8wG6S1xxAUjqE0ml21M5roLkLccDZXLhlC0lK\nUpZ3\r\n=2byi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-beta.1","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1-beta.1_1542155721210_0.3133360913860541","host":"s3://npm-registry-packages"}},"0.2.1-beta.2":{"name":"aws-amplify-vue","version":"0.2.1-beta.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1-beta.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"5bcfa5e98150e043ba2a354ebd123706b6780d9c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1-beta.2.tgz","fileCount":71,"integrity":"sha512-awPQOlZbMYRla80etRlVg9oFAJNiTpxsRiK+UhRm0ujE0q8zSQ9/qrEip4zJ5prWQNhLnjD2ZFYwCRUGSmXyEA==","signatures":[{"sig":"MEUCIGQ/61Nie5k6CMm4A0iQSrXVYa8N9L5y9VJa8wVJpXRmAiEAob4VjgjS/Fdv4xCRPx4As46LJ7OgUSKMF8kbkjLrXwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1547369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7IfVCRA9TVsSAnZWagAANgAP/iw2iDAdgipRLiKcqlpZ\n63u+dWEhXuIqGT8zKHSunoFQieuueQ4d0lne0zYHuEU3gKdeWyXt3U+vksDP\nZAQWsfWJzhPB4qDFta5LMc+hZRXQf/KGlkaO1w6pROCeL3gYjJsK8++f3Y6h\nZ11+OlajeJr18DPs4lJqNvkWL5ox1CmJ7N1n/YNbNeWq7C826KujNA3UahLo\n4uY32w1Oo8EkrnZW81z6gQIIeCA08EPgbvqaXY/iFQ1i5BRPL0c17h/qY6tF\nAqYso0nxywKsqnbPeGl96gqsqVRkfSbYjzxRCgHQbuz8Ph5gZ7UIRaOh5vDK\neuXZfMue+onJk0FGF4Q606fn7QAGRVPPl/vfykqMskB5okpVx0yF+5O7+yZh\nRGsqilC/z7R0o462dOk2zSx9qB/sEH6/qqhpVwwOM8GttGDOCyHdWWJ4sj1Z\nXhLE6KRzpuui1phpz5v0VXD3mpDmpbP/ABR9EORiI3miN4iBXjLP/+jJY7SW\nLDRfCNywDG2RiKLQHfvftSY4nIZNKzoSZ47qWmMwqeCSCdfzOgAw3f9nVw1R\n+AKrts3808O9OYo8NwAtpUIfrsF9vxvoTm1ndvCh/7BuQBsxpLWoQEIduS59\nrgBpJyHuMnb7tkb4JXt2Wo/qpSG3UCxedk2IR7rhe8FeroiuYYyaSm75aiJG\n4Azn\r\n=RUm+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-beta.1","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1-beta.2_1542227925072_0.537793048923187","host":"s3://npm-registry-packages"}},"0.1.8-unstable.0":{"name":"aws-amplify-vue","version":"0.1.8-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.8-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"a4ff16a6fcb6968e096f77622c8c959c5146cfc2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.8-unstable.0.tgz","fileCount":73,"integrity":"sha512-sOWU+LxfMBiTNC8Fn7vCVTE1wToINoVraXdcZN5CkYTDXGjX1lhwD1tCisz4l3PZ3F50WVNXL5UL44ubfI2I+w==","signatures":[{"sig":"MEUCIB+1YxyiJgewL70+Hhd1Phk/ZjVjVmogio9D75yyNGYbAiEAzipd3grI8aAWznlv2+fjR1wOwHbwZilCDqQMGAwmXck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8xdvCRA9TVsSAnZWagAAdv4P/1RhpAA1heONGNl9/y/g\nWFCQcDPpfydUV9MHcxZKBJ23TPQkVp2297TsxQ6l9QDxMu42TMNYWH/uAM4v\nn2qiigpMV2SfNiTFoD5Ygovdn/pJmgArISf7jjJJksAu4E/7hi2EkWGfAEsC\n57LUfDvsvxfm8DYGBfoio/Ndvp/8Lu3t7BVkvS8HXn004d8dUj3pNssEqeu9\nOHtepMW/5VSgVCUBqIbyuco+PQBgkdlMEvPwqLtQZv7i+gzM5Q2tblQvdeSO\nlC8CnNzV7HLMQMD4Xir8GW1vAHQpkJE/O16ey02ZeTk/KAVKL8PethKIzYJ3\n/2jrWmUrlorEVG1dmFfCy6CqmPfbB83np97EZWfJQ/Fy4RR/9H1/RVhz9mj0\nGkvfzF3rs/cnGdCG+MolBK8y10s/lqrlO53l+G0GCHXjiaf+xfrqjZJwxlxt\nbQ+e9QR7bWL3L/MPTzf+JZe1qG7Q0+klsW/XwOJUuF28EkoeggXCgn/94i1x\nWUpj2rKzWixR0PVs/zWkogLJJEKQz++ifHXg/al1Afmd+r6g5qLIQbN1hcdF\nkxfBfTO2HUQz25Rs8QWcTAXskgOOZ0hA6gZm0ykiNfMv0LUAs/hGvMd3eGqi\npm4J8fBtDg7ElIu0YHPnnX31Lkf/uZ0Ba5MJbO/e3cEN/0IQ/du758ZkNgGt\nhZ1U\r\n=6LTY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.8-unstable.0_1542657902909_0.38214998442864667","host":"s3://npm-registry-packages"}},"0.2.1-beta.3":{"name":"aws-amplify-vue","version":"0.2.1-beta.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1-beta.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"607e3664ee7cee0a7ffde56d7f352dbf462a9b9a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1-beta.3.tgz","fileCount":71,"integrity":"sha512-01TQI0goLyh3N1J0HDvqdSmU79V7bA1uZVkhxLZRZdG0TrxLLfzDbrkZ0WuBXa5aQwmtSDhGlViaVG6jTFp8Lw==","signatures":[{"sig":"MEUCIF1tDH5CD2O/sBHynIoM+DaJxd1Ws7xgJMhbD0hJBIJ/AiEAoo/PvqPtmS/IG96xytCCjijO0zQMveoIpcy5t9CWCAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1547914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zC8CRA9TVsSAnZWagAAix4P/2CE5lb5nPnDxNNX+Rpt\n3wQNUFTeRJomh1a1gHomvk+NmlYPk6HSGP5uDYPQBtQlwtg+IJsjwhHg8eeT\n6yuZeSZXwni1X2Xl9f3Gp25y3GTHos4ZnDO+fT/AmhHg4sTrkbXvOryiiFHW\nq6JpW9TUKIFWK4dawC40+/zkKxwI3ElAazwsHaLzHkIBB31UZnI3kTf7+azV\nmvPciwAiT6Zpmr7i1A1EUqSXTDNQFEbxhbLl5nWGcT2gDZy7eX1KToldWsDG\n9NeraByjllKdQTB7hGFj5iAhNo55WjfusaRNWF/rPJQxL659FlqyYENpMvc9\nb4/57rCiTwM4O2PBGVV/9AoKL3N946JnCCEq3U/KxxQ4eZKEM4HdaoBJNibx\nIMzcVk6a9uyJvg5/1ewDQm+R4XTIGr2NPhkMBdL/4QH7MnnBnxSB7Ks0/2aZ\no0pxDyrqVvEOHc5T9AR8vmIM4TwQ1QfZtCFptg6ax9bSY8m05Udi7bAwiZr+\nUdXYDCqowuAe/cp4c1K3RFw7+UdgXCAz+V3WPdDz6fAxDvXC9xMLpRFjMM9f\nd4yDkPkAozUl4SxH5WukDz7/U5iV1yfW1AN+xVyFxM04yYxOZhEEXkIAzpzs\nB305A8VOxsTmh/hFWGP5fHx20vL9GMlPFCk/RFBmfrKi+QSb3eHyCbbqQNzQ\nrVsI\r\n=CJjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-beta.2","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1-beta.3_1542664379325_0.9852121173174875","host":"s3://npm-registry-packages"}},"0.1.8-unstable.1":{"name":"aws-amplify-vue","version":"0.1.8-unstable.1","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.8-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"0a97e5f00f52d701a91a210ba5abbcd16356f274","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.8-unstable.1.tgz","fileCount":73,"integrity":"sha512-jYTcVIRwWTMQtbVhjNzz3FkTDdioLI4AEN8tSjEQ5dKsoHXcfPNKJnK/hgjqcFILhJjZUj79FHXlD2NPXmhRnw==","signatures":[{"sig":"MEUCIQCYeIADOArGcJ7KUGB42N6hiZUuJ6FDM6vOtplZi5xxuQIgScR5HhJoOZEXJZ5UqoPK30ozSnrp9agWicxEYG6sdvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1604660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9cFNCRA9TVsSAnZWagAAGi8P/jEhOxPrt0/NRPNCP9JC\nGpQvI0hPmMYjwfrnS7pNvn4Lmr8As2HQsFWABrfFe+d2CzjlNJ8mWpaMqRPY\nG+MG+sHxZRnDjyovGpziZE9N+pfArImSAChPksdEZ+lLv5B/IFQKxuLPmFps\n9ZAp364pEkg+gKcpRiyN3Vd+JKvDp/ZkmZjoU3CbeNZQA/DeUicuo1YZdPWD\nywgO2hWZKuysidAwPURmQwjp6smVAx4OzLLE7Vt0jb0iZlf4T4MKbiFJXVf9\nI7wLHC0I7oBURvZsOuwrp6cW2MY41GzeuSezg785V+3fyBpGG0Ss6jsS7Di5\nzNengmMtOFqX3kdd6HecJagweV0eTBNt51N78UsF2M3qSCZlhi0RCIIa+lke\nX0/i6dMH1WYM5+uMubapUnMN84sTR58q/iK70s/p6TpkCnd+t8EX1h77E03A\nggApJlynt5ZHIitqGSCs08UcwEOCMTYJDs7rLCDRcGA8FEe3/MKiFQeIVEHV\n03gHgOApFemknE7EMF7NrRF5ojdoIUNMrec0SvmC2GwoS3g96v3/KGb4OI6p\ncrBCxb7HpBjulsVUnSgqwujxsQbcRS7MwP/HVZgqstgMA4gZISrtrn5J4ARV\nePcFxehcqPfNRRf2xDvmwFGqfYIVMm+2el5ykETE02pnRt+e3ma/1BAfIwra\nXjwD\r\n=InND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.9","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.8-unstable.1_1542832460314_0.4663573456197134","host":"s3://npm-registry-packages"}},"0.1.8-unstable.2":{"name":"aws-amplify-vue","version":"0.1.8-unstable.2","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.8-unstable.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"0d182ae90f1f75ebb15aa76e95d9a09bc1dd70e6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.8-unstable.2.tgz","fileCount":77,"integrity":"sha512-GNWqUQ+9Iu/Yf3ZJB8YFQkyrOxQTtjh0yJYygwZhg6BBp4tv265szEgdRsffqu7ylVgiQW1CqdQvJpl6d0S3Tw==","signatures":[{"sig":"MEQCICohrRSuSvxeQMWybE+DnUGnUAV7409skoizfx8ceWBIAiAgOUovwuJyOYr0ONZJfZAfHYBwyvV76Pu4GuYCUHCbEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2273959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/DbOCRA9TVsSAnZWagAAFIkP/0sFL8QgNitVW/b3g/rx\nvf4NLj8rXXZsmDQe7maqzlL1qZKtErfiuSgcbd3xG3LgyWU45+NEYq9mgbgv\nJrjnK1tn/g9dlr6KKtTUQy9GOlSUchTWcfC3BoEkVgxSAu75D+IUEMV+i9i/\nTy6Qg4i5BW+TshEKIFN6EMuJcyh+AkLEE/Cck3hTjIoWeQiddUiELrWpidQp\nLvga3QBeQKeu7yaYanD6XCfX32rwp3nkrIuY0eUY0s4LGOQffXtkq1BXIjrF\nGYiu4NdUIa8Uc9O/bf7x4OURXD05szf1lV5R2aIIMHhIBPGe3VPfR31g+ekG\npEXVdyKEms0VSNZyzwFBc3+ELJfNQFcPZaUksE17kcg4Idb/CBzPLbvr5QnB\nUqdPh5KzwFXKQkXUsWk7M/MJRRkhYp1wjHZjvPND6BNPA7Y1GAEKIyPUseXA\nAYVxet42zRUSb5wgoKuhwAdn1SfWYfABkoFRPWGzsGyjIMIPspGdvGEheW79\nNOUuitMrqbKp6WOpuOBryUzJ6quUROW+/t1qoLVS4NaPxwppvgxQjZ7lw/a6\nt2bVWPHNyhggWOVjvRqofswOtQmEf3z6lPpoCusoEFjFi9yRP2JGXuk8UNxD\naJBAZ3hO4lSVSzI/vlztA7Xk3mSa1qPMwb94oD9ExD85HM/43sOR280fe1sK\nm3Xm\r\n=OHZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.8-unstable.2_1543255757225_0.4056264183614846","host":"s3://npm-registry-packages"}},"0.1.8-unstable.3":{"name":"aws-amplify-vue","version":"0.1.8-unstable.3","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.8-unstable.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"7643ccc95b665d4675face1e7ede9b0fe45333c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.8-unstable.3.tgz","fileCount":77,"integrity":"sha512-iBTVr/eflPYstslqOkmMXsrlKvmkayg5U2daZIIp8twQHM92wdOSKHL+MF8d9cU7wftagegljG/7XRKllCPjrg==","signatures":[{"sig":"MEYCIQDOv4jH77gJOx1XMvRoilaQn2c3Nri3jbyUkO9PO7FcywIhAIT7Oty6zXLqkPc/EbmmlPSOoLyee02jvVvnyMxDqQ/J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2280493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAX3OCRA9TVsSAnZWagAAkW4P/jL3hJQnZBempFgKmuGI\nugl+DnB8AZy0u17ENSsKmXJ9YvCW9yIC6GzsYLTshvgzGuTW/x47ZX3nYqIN\nQ6M8yIfN29whHIBdBdxjKhusf786MzM3mGHuLuVBhOg8SoiRgWaOiq2zsSwM\npqNCXIm44iaKDANtxsDU9g3arP5qWwH7TJVMX16YgC6x8cWQtKmLVsZEfbyk\nv4z0jW83jivW2+UzJJfHls4B7zamMLGtnskm6k++SRe7eN1G3qH2UEAcRzOd\nTn7+9klppo6taI+0Lbexd49tUCiFWztQwKFenw8laYGlLHAFOySH1WD4if/i\nOqNDaVcIre1uHwImwoX0lfBWPMouI4OdfxQ1Wr5qeRNd89piWHjCQy+0SQPs\n7wWqNjkDs5fo0LXF7j6No40o1lBa3hQhwKkB5H8eh1LcM6m6N+1/0g4rzm88\nCyu49g5d9TzCN+kISpkthf2gVdFWenusRVQ09DJwdyNfA0r3R25epN60dJMH\nSUDbMpsoGDuWVbWAToY+DThif5I6MZzEPn+4l36Ld4P1IB90dwVxBFYbTqeb\n+Ve1M23jLPjIeLP0n6HrEsEexOU2oKWne4jqvYEsFlACUL9mQD3wEr317UOK\nvcIOXcwhQLFAoK4fNTS0Htg0NrxFXVjAqnMcxrzlCks5W/tN+wvtA74tOVd/\nuNV5\r\n=7yqt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.8-unstable.3_1543601613797_0.29000131431299936","host":"s3://npm-registry-packages"}},"0.1.8-unstable.4":{"name":"aws-amplify-vue","version":"0.1.8-unstable.4","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.8-unstable.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"58aab4417150dd141c5055f81f55cf9346d6a85c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.8-unstable.4.tgz","fileCount":77,"integrity":"sha512-doCRJDcqB28o0HbD3+QAjJHSrGbfnwwXmNV24uaBpyY+uPLgAkdugAAo25ZAgXfoKCZgk+rcZUaE09/7BbRAGA==","signatures":[{"sig":"MEUCIQCRjW78tKx45fYmo3NjUqZ9oZgritic5tOYCaAwnKWrEQIgLFTeSUDF7CsFBgAN/stcGTESeyADfD7Z6d3XGZ+eipc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2281430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAbVpCRA9TVsSAnZWagAArpcP/R/2tyTA98LdoUE0G4d6\nWRA6QPEN2E68oa6EswzFuH1x1H7p5QqqOcgHQ0rmExkIqgT+OKFF7DTyGk/V\nGYYlMGGPyCPTgUblVXA2BY+2p6vMblUv0ysRbLkz7IiOfoFju7wFX22ibUZj\nkV0Z1OloaXyniH9ZxSzInEWA538Fuhcct+iK6RWrC4UfQkWPU0Iz4382QRzf\nzXbpIZdR/2bXsryjQU0TGx2sCpMuqofIDI/5inPG4MsTPT3+JzC/xFdZgjVg\nDwSxFz6RmPhFKtUcCPsicNFjKuc+fQno2XYhsBRi7tFvyjbq+Iz0BdIzX3+X\nLsLCV7q09S8UIyUV20L7Vuv1n7lmHEU3+/plmqU6vZSxHcPKcnz6fsNocmm8\nz9jrizaKvMwzxnVqYpgf9X/IuvbKesULhmXzcMl3LXyQVhZemXeu8HBdG2Aa\nFjccPnB0yXzrHEr4qR5UY42Al+BHmgHgSlOIRrTWx+YEJ97Z/RzBgoF1JBUs\nWf/bNRVGP2wpkTjcVELn4z9q9PS9P29sdc4ylUlpprubmouj+DwfAfgvnUvE\nN26ChjxVuvp0oN/+GEreOflUtmIYnoMFF2XqJRlmtygAwyv33hT+dDsBbAf+\noVQjIbnb0hoqbzXfGpx3UG9nSeBgfXgCyhLVQCORlQhaCwfk9Q+svuG4lAPL\n0WyT\r\n=GKk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10-unstable.1","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.8-unstable.4_1543615848202_0.7018262133940731","host":"s3://npm-registry-packages"}},"0.1.8":{"name":"aws-amplify-vue","version":"0.1.8","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.8","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"9b2e444c10b269ffd8fc839f1399c2dca475a98e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.8.tgz","fileCount":77,"integrity":"sha512-vvaICyzcbQjPGZoVaZ5Oth3tPp1tUsBK4WDyO2GVXtjUoxeNZ6IvD00gfD+bwSi8tl1AilJMYOQj0R6rzuBCmg==","signatures":[{"sig":"MEUCIQDT5CKUxSHaIemFMFWG19oV3JmnVjBC1UHFV5cW18MxigIgfo/pXqQP+WpkZSU/jKCII48KX3kXDznOZDN9hm9CPnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2281622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBb7bCRA9TVsSAnZWagAAMcAQAILtu3JUOsh1+dwY7k+T\nUt4vMVAj6LnS94EKQXXrzrGS8wUjt/Rlfon2LPeuLaTqRfiz92AVkDTYKnEM\nCSxe3i/UMvvl6wHYs3zYSp4azzPnGXQ6R1FMQn9cLDWkp+u3TFW0f/TBbE5J\n31u/wbuxg+PvQqXuAlpocd+6YKfsN6btsgeIFLocXEzE6CQq0nzAXRMI0h/C\n3Vu+8LzZ/YtI9b5v9JII1NKzQPNTQo26qi4gXtwgkrUa0/eGmNitYGrqATQz\ndaH06Qux2fmGEdAzLBv3SVJBQgdIdJwecyzMJgUQl2QSN0XlNpOWvkxtKqoU\nCMdjeTiWBhSen4fMGRKAgnJ+2ecvcz55M8lAUuLO2iLXd8R+QMMQ0NrZByn7\nZ9XCqTAIvzstfR2/hFVWhrMFb0Edb1RXdtsaCYEEGV6C/J/+SJs/LFbCdOJY\n5IRYZHLQ+YOiv7a4dmt1q6dWcrNJ3/zGQuGT1xAKCBc1pB+BllMQAMbLU4zZ\nCD3E2y2pChjv0z0NyhEEOJL5QkUMKUNOB4L6XYcLvW3cpwTXneQLNWVJjmb5\nrwykIFQbhbQzQYoIE7cU6+JSL6GbC0LWLegs8S4ayp0DYHd6sqn7ZkIzOOgP\navM+PraYAE1nt1+f5Xt1jrxtsZBNBG5r7CZftYKDSj5MF3xc2qRbP7v567FJ\nY63V\r\n=kaO5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.8_1543880410032_0.6864980872990776","host":"s3://npm-registry-packages"}},"0.1.9-unstable.0":{"name":"aws-amplify-vue","version":"0.1.9-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.9-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"6f027882c22d0c23370394f09184f3edf7c9fc05","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.9-unstable.0.tgz","fileCount":77,"integrity":"sha512-/1itf+WaHSn2h7ZIxnaYKWLlRzZovuPPHdkz/m2Ah1f0BAOvdoi6Cn6tINoOP4ZZ8HhXP68sRXHGcn6/rZKq7g==","signatures":[{"sig":"MEUCIQDhvZzr/fAXoMblAH4CBo1gxGgigjH7RKtPv9sf7saelAIgDo58gfQmot9b04SmI91N+7+5st2sFPF9jDa9OPpfGr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2282031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCF9oCRA9TVsSAnZWagAAaHsP/ROCMiGsOepa6vTHn1sw\nOhca0LlaqV9ijy7+Hr2LWSW5DabEoTC32JWo3aVOyOuI6s3H1EKhsWcHdSIZ\nWVmdCLXWTDKSO4/5Ctyb9eTtIn6qqbJKZkm8KHk3/YlbEpodP92wkRTDUd6C\niT8Ne5cGLNbsjEbgYXpPeeVOE8nLi8c8TqoVdtmlA3liG6Ermgwe8JEXaAo7\nhSk1QkIPNXZHVYpIjo+dlKbqtIYCwFvvLUq4RO9byc5uP91qHL+0Zx5Ersb7\nTafUy8LyE6mtoVlhUyUyNiNS+9g77NSvtHelr2KP9OjuAiTJ7SFWEAA0Nyka\nnD+m+v0ZXD15rRPCU8AI1E7c73ZOTVnocMeDx1iQdDuoI7fKC7ud1SFFba9F\nG1E3exO7onQjxFvpPodWbFjlxSZ/LnQ6dT14mrHEiw354tkh7+jNsWOKvu3j\nSTYcpUm02nKWuvXDwIP5lHoj0tn9YiqyrxceS/xXXbDAhRs6pA/hn/khJIX7\nazsS6XnCxqOvL1QVZ72yTvI5sKJx5IcLHQARvHqfFWGHvrjHHJhVOqGDneNv\nRPCqvqazrs71aa8kKZ9F58PRrtEZtk+0lftaTjqWWaK5amm6O7ep/MEVm7Mc\niB6o6VZMBbflj8eLxldKZkxkXoX5Yo6fV6MZP6KReUSPUTECsrFApu4UJYg5\n8wEJ\r\n=5SMt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.9-unstable.0_1544052583818_0.08682630837104877","host":"s3://npm-registry-packages"}},"0.1.9":{"name":"aws-amplify-vue","version":"0.1.9","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.9","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"002871a468e3d043ce8719197d744facf1c5bc79","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.9.tgz","fileCount":77,"integrity":"sha512-jLQmczdIGpF3d3BtKeyRA2u4M5rIF7Vd7nK5KV250l8hOJWZsdeNIQwzMziTwMv8A5hfsb7UZpLHmyGrWIZBLA==","signatures":[{"sig":"MEQCIEU9bv5lq6ZsILqKIlud001So8XGOfbOGAnQ1qe5+n8aAiAYvX9iUJcuoZ1X4jfbNHrSkdyEnpyjbmFYocE8x+mJcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2282223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCHEWCRA9TVsSAnZWagAAayAQAJAh98XyjK9qGdK3Qtme\nY8zfoNkMh86Ty9s0tu2GZUpbp5t6rDgDqr8t0x7dy8lmb+CiWKz2DxlLeMEt\ncvvP3Enr6VwoyrskkFa75eurzg6pamgWWQVsZvB5yuRqNTenNI9vzfeYze7r\nf8jxS1E7E89pcZLlRkcps4ZmviARHOGy2pqLNTqu1piAcTtLyb7bU4yk585X\njL4J3gcfnmBR8A1KW57YPthw6eVnMZzBJCtt1Ll/yzCcMfzhr7lghy2ESHgJ\nS2x91o1ey8kEfi9xGUil8YwI5xFLOTneyDMhfIHCUFzYLqlMlsHoa8gC6nKX\naX4Vnqc5U10VS6VqDtQc4FFD1/oI5IE2QiLFOrjT5i5iyreVQiW/88f/Glyr\n2e8MX+iDmnVaY5B98nSin1/0ETGXDXNjB/8y2CTclkFIvdtfweSuFRSuIqbl\nPYLiQ4Rf48r/w5xd1fw2HqF+Eb58oan4PDUjQI9zhdQzXJTK+xkIyLFPVcjj\nukzSMwQO4N0gyNeN2tIUUGsyxF/xBm1mJJv3Lv7BaFfWqE+RsmuZXthED8En\nTIT4d59RoTr6Ji+XRmlkjqjV8cc6+RROxqpkTdxGjdDrUJysSKcAu/Do+Z/g\n+Do0Lfg8aswY6eXI/NAs9oEdDG5I4K0hJyB3lLfb6OCtEdPZRs3xXi/HjKS/\n6Hdl\r\n=J/8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.9_1544057109373_0.9062886617092156","host":"s3://npm-registry-packages"}},"0.1.10-unstable.0":{"name":"aws-amplify-vue","version":"0.1.10-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.10-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"c5f0d053385012d3b6504d7b1ca3a599da538dd3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.10-unstable.0.tgz","fileCount":77,"integrity":"sha512-+M7bZrpGbR/CdCLPD+WdZ+2dI0lyRoQNVFmqUW6dlPUO/aqCKaHzbrwt6v3sJzlrFzGN9HL0n9huk8dZgh6Wng==","signatures":[{"sig":"MEUCIQDh4ReFCqFTYcMYN62p5RDd1WVPhQ8ld2tXkogB+49cHgIgfb7s8czQ/FWPE1cM7UTUNxfhpgrAkOad5U9aI5uwoB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2282474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCHS+CRA9TVsSAnZWagAAYkUP/06qtLq5OFgDgV+4P5Ey\nXQobsByg3A69B2OdzL/F4J7MvLzf9wvh6VkEFoveqXLQW+e6ll3aeYErtT28\nMDubvrwQR+bKnUsWzZBRm05pIp/8uZ8Fe33odyWXM9BJF2jRkYV8FgE9uEah\n5kButr1kvB2rnRzwxzqcANGvhfhWWXAe6xlUjNSFUq1o67N/+7qB+GAxnfm1\npTWyyiZU31SfEvzVLVxXosRKpoDlNJyWwM1h455sVYJu0ddXJe6TwXjAp9L0\nKPnLW4DWBntwJLbspu/CQ0ha4XJuMKOLjNGV25HD2+fqpBOpwdoUkg1bJbLu\neQz7Qz41wxH7l+HXFG9CYN+qHlh0rcrZUs/1ws6S3zSR4ymtLk6nGsDevM1Q\nUBEuPfCRY2LtcmdX5v7y0I5ynxK4C63m1+Sfr/S5ogzOs+f+eCjlQ1RpV6EK\nPC0mveExJgwnbDI9TnHcHV9388v8iIjfusTLcO+YGy165h1fy9kXiRu5O0Pq\n5r/aoOkIfBo+lyAlxd5M7aN3bLbEU3vC5MjmqM7Csa2msmzF0AD2lGONIKO2\nYBAE2UUGO4X4UiLzPUukH4gQC4wv9zlqs61vTIxCNefPQUCoM10Wpq7u6Htz\nKup6kKogwoedrBw5xRdBQ5Scu+k/0YcZ/Pnq192DZv584QZeKBvx7g43NokC\n421Y\r\n=QC6r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"^1.0.10","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.10-unstable.0_1544058045757_0.5984738027042131","host":"s3://npm-registry-packages"}},"0.1.10-unstable.1":{"name":"aws-amplify-vue","version":"0.1.10-unstable.1","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.10-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"a2fd592417c0608efc40db75787b01103ab04bf3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.10-unstable.1.tgz","fileCount":77,"integrity":"sha512-6z0JCj3IvR4hX05DE68vqMvCGvTFF9jt2wGTvnYDP2EZ3yKYmp8IoLf+XyTdQAYLvr56+oxff42NUOhcQUVlrQ==","signatures":[{"sig":"MEYCIQCBbDDaMuGDYPOWtpH4I0zeUxS287koH9Fr9j09689KwQIhAMUMvj303qL8xq/xgyilu6HG8/E/tF/5MJiyf/QNThIy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2275134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCafQCRA9TVsSAnZWagAAbDkP/1g4XFgaIn6vucr0efLm\nXWWEyzTdNBzMrOU5bwS/s/wLX9epjV6ecjl5D/Ye2DaqDrMIaJxEbX/RBcig\n360spOYSFZ97CY/3Q3RX8/sgC5tjFts/lIbFSAJVTKsEFqxrjFf2oTkkyity\novxfBoTuu7gdcCFKv+JXGtqYi7zQd2kWO2ksxIcMYweon4FMmpaUARV3cdke\niPKoYbpYR13j1DtRPbrHdDe6EZP3XYAajn+WldyY0rePumdb717aH4YBuu6F\nd9besf8EjP0gJHMoyEMehSsRFfTwNi1KDjPBp1WkxHTNdlnPxBTD9YVdw8eO\n+kZvhsEdoJKkC4T5yVlFc3Q2gBDu4k2joeICogbK6VvMCrDenc3UTv52REze\n05yX3BPQGQjcKqkohVBdde3cY2E0I3RRW84Vhyd7Kk5O7C6lO9w/CNupElzZ\nG0BtQe+jYl4asT39PVo/aNAWE3/ogewEvgA87DFIHEqkMLDnFnNQTxFoTsNV\nJTYI6ieXOxwhqTS2uM9W9iPQ7FJ3I+5RSNXvuaAqNRuhKuDOqrB9qWaerEGJ\nFCJdWVsnJRhzU+rJE26zM95B45YiWyUOpFHn4gpj0KDQs0cSZj29TGbewvqY\ncuEJKaz0q3SDhBOGOsNXY0kEmG9dnajCrXglHDVNKeqSAm7oCrPoApYWaWWY\njGEC\r\n=aThp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.10-unstable.1_1544136655639_0.14465696152407004","host":"s3://npm-registry-packages"}},"0.1.10-unstable.2":{"name":"aws-amplify-vue","version":"0.1.10-unstable.2","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.10-unstable.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"62a5da1deec59f81b3b2ca8d2a56eb1137c121d7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.10-unstable.2.tgz","fileCount":77,"integrity":"sha512-E5qCC+1zTQU88pyNNjNct4toZXmGYcjeE14pZpA5fUmYWw8BVGPPwpGiUTcBd3tTb4+YMCMx6zmoi5dbYvnV5Q==","signatures":[{"sig":"MEYCIQD1nCyA5vjCEDNE1PWRusKlhHKGbXreK3Mm52XHxpBDpQIhAKTQT01HlENGBamYEMog2JUU3+hyWzUKlEv2jAoEQcme","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2285065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCbaECRA9TVsSAnZWagAAbT4P/07J2FsCkk1iTRFT+WYC\nXjq026MkixKXOUnMsl33emZh56ej1St56alj7tjkmYyDgr7fKpAbIwnE7N/n\n9qVNg1H1cF0wmWiZYlBD4KzInOG277e9Ay3R83wZ/+pFGvCwjZUROeGRJljv\nUXTCO+bbZ7uw7CYJYfMH3D5yow4V4XtDKxYfR6IvMkhLgIHPDwGw6ZkIi856\nw+FDTBaYdRqVB78eFPx+92liIa0l1f8XRC9fDZELMDiAkaKOXgYdIxx9/8UL\nVFLpRFEtT0qvewE8kbNbQ8tsk9VtQT2Y9tgWzs6ZJWtRMOaRrpp61gDE+vtz\nnbcH9hLe3OPsiVB1bi0EtbivLBWc4CtzoCMW+KYb2Y8MMvXJ+ANuNoRL1Pze\nIOn5djl+XK5vaGRIfi/Nkx0TqlfP+sCwBWcLHdSr/Fy3g8/6qflvVIdDX4yF\nnvfrETO7QEhcq4oA+Tck48oppL8kO+dt/iQf7utHlBPNqH73QqUzUApahhhU\nWSR5fVdzhBTDUSBxZ8/pMxiF+N1qbdt18wJVt+U9Tac6pLh3k5daQt5e1WgZ\nqdDNtNv32C/8mRdspH3lwVfdcgMNgwCs6VE7nu6hlhEnlGOjrWTDhvcYJ5Cs\n0u83GTPxMTPoE9+V7h875UL87E6VD7eL5mQyXOniVW2p6CoE6ikbh/9Zi2uz\n6NYJ\r\n=VL+t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.10-unstable.2_1544140419267_0.9154595197009161","host":"s3://npm-registry-packages"}},"0.1.10":{"name":"aws-amplify-vue","version":"0.1.10","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.10","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"4dd6f7deee7578e23215e32400bd5f7cbceb8d49","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.10.tgz","fileCount":77,"integrity":"sha512-lE6L+VA7+SNuVj91oHqjehHN1viHgH5T7fZQGZFdQ3fCbFwvtFbRwCzAHgqyHRKTZx7h8Et8/Y5nGYsNa0JaKg==","signatures":[{"sig":"MEYCIQD+I28PM8aHeG1iKKj18Nb65yMGJwnz4Adg0EqYQCdgtwIhAJYUvka+ENaZiisceZiddto8MWYmVDxaXl6kJHfbp8CT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2285260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvBwCRA9TVsSAnZWagAA9+8QAJ9QDHEI0qGqO5ulzkno\nqO0Z50Hjb1F/ZmRaDaDrOpeCRrlMHlW58ERYVE6vY/eBMfoG9lXjHlpLM0mR\nHa7Js+tsQyNACRPzxqAIoWtyNTKGOx1A7gQRkdrSunOTT/CCb+ev7RQvA0ce\nDJr7AqY4tzjwNPxUguxvavyt0TOKUvjSB7sQIJnYqy7MmLu0ZP8VViRkhW5I\nttfNe5OHtYI/UYtKmgcU7+/Hzts0259wyPJbBQ6Us2Zg3d8sWXjoJM0852D2\nSb3c8CIQUwMJnv64/6u0gYEtCX56XgNnrWfyoJ8ekVHWNYt4POpQ+Vsu7qL9\nRGMHCvNZWUl2ZfBFORQCepWitOKl66S869i/QDCXizaJuvGwRyhSalR5Qbu7\nqmfMxISoQrOFwT7reSFI6SHLMT364aLYmysJJE3du4CyAFIxcQyvxlLarngt\neyp20n5o8VrlrI0GRpVDaOH+sDhgxdhmBOLWgsmXz3EBdWQRC4YUQV1LlhB3\nst4Xfp9FRAU0pELIT9+rpJ+umEz63iwSoKAehEj5PEsPcEB4G7IFDBJI8N8d\n2AakLp6hFncbiufwS/hCGJ5o0ZJrYM6HBwN92oAVJxB/MPRQz+mHHDC8i8tO\nAY7NbjZq+yfICMX7NE2OpmyKiR0pR9xEnY57G32h++XwbjvnMiSTFq9/iSxM\nEDJY\r\n=V9VM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.10_1544220783841_0.1005324525538216","host":"s3://npm-registry-packages"}},"0.1.11-unstable.0":{"name":"aws-amplify-vue","version":"0.1.11-unstable.0","license":"Apache-2.0","_id":"aws-amplify-vue@0.1.11-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"ea9420370846e9a8c086cdd2673441c057be5e26","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.1.11-unstable.0.tgz","fileCount":77,"integrity":"sha512-Z0/57QXSV/GEJyAhJmbEf5pH/HYYg0acgxhux/72R1/goXxqdF0B4xotPE3XLxRbgNqwzQbD9gFDCGWvVosBrA==","signatures":[{"sig":"MEMCH2pnc2CicEMIFdOfm2vmAs14L9MoyHkvYvzCtYFGB8kCIFv2/Z6m+lLcr2GODOpa6VrkZJlyy14ozccKRa7Al8+B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2285511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvQBCRA9TVsSAnZWagAA4ZYQAJsi6X1LfKEtrvlfaork\nRPN+8ZCV7stCOQO4cu6pRwRpme8x8r/FmoTX1LrD5HVJ3iqxaErh3dliA0vF\nWGRqKluM8TkubfsSRfEbdGHrIx8tzZvhAJp268Nw3DTS8Ye5Aqg7BN+T03lb\nyBT3OaJmAhk/vFYtcPMzuxYpGv4v/gKrlVz+Ea6Zc0zsoHdIIyNT2FdJs7Fe\nvi1axCOeibffFGPNdKztizUOHt8hmczJyp5EVBnsoalvDewa3tA38UoaGkfw\nxI7OltnuKd9RMIzIzvVIH3tTws0H6FUdkIcKGNyOgpaeCW105fmeB2jyJnbh\ndDCtSZDfgwJhdyRZSLDpwaOI8lyFCuT2JmCKoYvxy0AYfPrhyHgtOv8vIUDW\nw7qgcnqifKT6BLmh6/3ZKph/Fims8eJ8dCyjNTwW/483nQq402rEP6lvdyZD\neFM6VwvPD4NhQIgZFOe8Ht415c/DyhIymMMbnMAdYTpAZzWMRZPHGpb/MdBj\nT+Mc7X7XmHjp1CJTaQA1ijt6SvHNSwHMuFih82OhQjSwD8HqTXHQcLcARftn\nJGBcLZe9MsRGlBH9MrwGRdEUMalr7SnmLsLRTUPDu/ReZzWm9PTcrW1Ozbpj\nhZB5Yv/RuoEGD7R0qBq+StV010L6IX0fMTgw5guVEnO86onRnfhKCDfhhUQD\na6Hr\r\n=B3Vg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.1.11-unstable.0_1544221696719_0.7752212711084401","host":"s3://npm-registry-packages"}},"0.2.1-unstable.0":{"name":"aws-amplify-vue","version":"0.2.1-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"4a368d62bd51d34ea06c051f9bff46f6ec113c1e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1-unstable.0.tgz","fileCount":77,"integrity":"sha512-Og+UFveBtnEvVhIU0/yOnEoN99QRT/YmYb/qgxLMj6RU93rxu7QzOcAlUF+2OgPpzJpLKB4fUtul4SGSslSDFg==","signatures":[{"sig":"MEUCIQCie1Bgnx5ytCdZ8L/mZ4OLlGJbZ+v0EJ0Gturg4/pQwgIgHQwadpxPqFM+c7oKe6dLPKwZLwyc/dbWSylr4a1+fQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2289971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcDtsGCRA9TVsSAnZWagAANNIP/2p1yY2wZd/6T0ZXnZFC\n/BEQ681jk0zTWTd/q+cNw5ewZQa/gA9hPJIxhjY6964wD7a+lEjYmA5mi/c2\nflF39Hp220yN6IsoWfaFMRaNY8ddfs1soJdc5fFYJkuGDjkmjndxOhtJVnPx\nu+C9PIGxzSymPf9gRf7arw0AAuq8jBX+gdoT3N7M+czcJR6WM6G22aqOxn//\niQ9p2PPXBVZH7/ggzUbu4BwrP3HlXah+xkoMosCmwKUcuvRhYqZdV9tfSE5Y\nj7IDsw6XDKwryJI/5MOQpAvuNZSIHpXxFZ7JL/V/WvhcinTdy5mQnwI+Z2xK\nIFmzl+OAkDOJNkehXmmMFmc+jmld6y/Mm3jtLwwbdN3pEF1sEjjYAKc+sr1x\nOIG8xj3+zsVYsSKwvxh0+SpvqkrzmDink4ZcWToNiIeEGVk8N0fS5OkBkExO\nsFbW0/H5b/h9qhlRPt4/6Z41x2cMlu5ai8Lo9mYxM87SVsq1i5z1dIkdWaiW\nbBtbYhnca89oIYnIrtDi17SMGENifXtqEkSiDZUYY9S0ezubTkD2TCFoucXk\nha7MffmohyjA/KTHrHr7WB58maV91WgVS0wVhcMdb0LIOsUTUkAh7ewLGdZL\nNSchJLuwkDVgWdvi5UFPOwBWy2zJ0gHXtCJHqF+ZXmVEPnHWbCeh7rcKfnpB\nxRwR\r\n=lL/M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1-unstable.0_1544477445306_0.9699181395511436","host":"s3://npm-registry-packages"}},"0.2.1-unstable.1":{"name":"aws-amplify-vue","version":"0.2.1-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"7880682829fd4766cbfe4d4297993886bc74f222","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1-unstable.1.tgz","fileCount":77,"integrity":"sha512-aJ/gEsRQlLBSGa+WvoMNJLbNYdfEl95ruWC4jBB1QAW35VfoMSYKtZtI1JeXW6XOcBQLk6KRuMDjzHQMWI4O9A==","signatures":[{"sig":"MEYCIQCpxH4qm1pXNBKGS0y7vZrBd2IlYghZjTuoVvL2S/E9NgIhAK8Yfr42ZqQ39YBRQF3fWtHMQASq4JBxLa6Hg/amz5ug","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2291153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEAgjCRA9TVsSAnZWagAA3RkP/1Zls7RkLgZt+jlG344i\nXrfFTo1YOBgmXq7nRt385W2cGK7H5xpylnDJCiM1795p18gUPZSVE4wxxFSC\noyY5MlBm61dDIxjqbTqVFw77ILceyRy62Y7l3Z+nuuFjc8a88HIHv9avbUrs\nsgF220rBBSqsCyjV9imYpeobOuBo2Jh1KQuaM41st/vw9qHL5AXKgioZZg4x\nmdZFuDn8AaklnEXlAylXCY0jNepGj5VuWXRB2PKafmqLTiLz/4/p37jQX19n\nESJTzH8fcUNevzbH6KTd6xflS0/VzuZCUkIpnLzSCL+qBPvTmpUOwUtxBh5P\nB7DRGjAcg9usUZIACfwEZtF2SncyqVacZyHnqVMBTNtUR/wbej3McOJErype\n2Oz5xoc/XV0Su15Mk3qKqoqCX+iCj1rknZXfhRTPn1eFSzE3/KnFO5S3c8Ba\nQjdTcPI2pU0E2M6Wt8iJdPqek8afFnIJvi1tWLKVcqGHHARhx90xBLgvP0T6\nxQgqnGkuqiYg0FadRGK4thrTcUuS4hd/0rao8DuaW/C6FHPR/2Iwg8Qnd29t\nKSfoTcI0JLrsRQwd4fpuS5G5KpxTr+3OwreI7XflcoMldXFY/US+raFuuLA4\ntds6qND8j7sB/i3CrYARlnh/wh6dsgNwolm4q2juznmNvkBnOYImysxAJ3O/\nFdL2\r\n=Mems\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1-unstable.1_1544554530746_0.3900637366635933","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"aws-amplify-vue","version":"0.2.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"d46bbe83d7cb52804d2548f72583c212ae7104c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.1.tgz","fileCount":77,"integrity":"sha512-OUSQ586L8S2bSb8h7dyvhlO05WhzylUyR2YxeVJubKNX+RFqGnVXCbQG+IN9vWgJ8LQqq36axZO0WrkPP5thLQ==","signatures":[{"sig":"MEQCIBvWm1ybSj3J8tw/T3aJ41GErCPgwVBq4PbTsXs6KMqKAiBMIsLyb82tUvn5G9YK9aImiOsLLdSGEon3x9Jhl2xTYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2291356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEtwgCRA9TVsSAnZWagAAEc4P/3ARolJXv6MbGoedQBHc\nG+jNOQC4ZLs+F6+pPW8IXdWFLXfc+kKTtNp2rQduG1Q6eHWx66c+/ultGryy\nfdjWPe15OCk/yovxEHXmamCDnWp6UcrFpPR3QPLPsd36AS5w942ZXP19dhou\nb2XSYn5xzVGTV0YGzkOUK2PxzlnxuuPbfjNm5PWO+KBYItQSZ2ocWaKifRQ3\nPFviB6ZPkzxtciX9t9O55PafjRFvySJUTwucmv68B1I8zV3Bj5oWX+qN0TpC\n/Sl6araGPsb7rCLUf7Kfa02WZ+vq6dW3ls8CEpB3CONL1P5ERrK+s6cHI5YI\nDqnR3E2UmxAcszSNhycnN2Bvx4lfgD6/Ndu+R/saBtXWEwHBieaF+zax0D/T\n+Gc73P0JQCk5nmh9fGA7DbaqqyMhhjplE3eVilWpaHPZzeis0nApDkJIk3aM\nofVWrBqhUZS2PFnKZejLxb371ZZ5DvMr48389LACxnl/2SYFQy8plct7Makd\nVQlH4sQiTmlGTcWCt1UNgpll5jNFLALRdCLwKWIppSX9uZBN5y7LeDNul8Tz\n0k1kVEJq5AbgEEsqnWbNh3Bq8P9hoBJGL+ltNtDEBGPK+rFhKkxYyP+AzImU\n6DQxz3mEOHEX6P+JJnxYPmPwE7XEwCkr6jyaxCUualeGuMHADz6B9IC4ILC2\n+IPo\r\n=5+Tw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.1_1544739871583_0.7484918316065221","host":"s3://npm-registry-packages"}},"0.2.2-unstable.0":{"name":"aws-amplify-vue","version":"0.2.2-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.2-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"fa9e58b95567a6316d05e612ff2540efdb28d247","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.2-unstable.0.tgz","fileCount":78,"integrity":"sha512-/i6FR1KuVtpWl6H+jvg1RK8tZR3EtxOCCSDNbet8BI7crUwUaBZ+UuDhmk5i5ySz2b2sCVVnPndhk8rwvntvGA==","signatures":[{"sig":"MEUCIH1DtSJObrwEqF1osm1B6+tMRSJu5GnO+//rIVX77GvcAiEAmUS2cmwb3W9k4CWCUqqhR3g4TEa6TAYEtbVSifx8poA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2850884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEuHVCRA9TVsSAnZWagAA5lwP/RHGfE1TtM29WfXzEw9n\nOHu9X5WOL4qUzZq7lnJTd5iU673bOrx7B1FAEwME+gqo8wELExr2qydqytZW\nUQ3qComPVluiIwzfP4AZ6wI/KFzCJ6tHZ6jRBMTrzBMuAJ310DEIeZwLvVEJ\nWFeCuGgNvzoPneyNfz7PtGg7UCIWmnxK3kpzUzAIX9JgPyEKgFZkbwqpUWO/\nW4Ad/QpeLOzkoIzIB4IbPEEwvmyL9dXvNcUnDvH3/bpOcG1zHkreXiQ4vzl1\ne2ydkhebmLyrknwzhDtubUFJLXbxnTXMEK+LEOva8SXSU3donHvEcw9+I7VJ\nKz+gGQ3nEvqK8TxWzFWCzmX6WUIzpYXtuzq6ptKYJI3QRdX3A72Knhr2F/L4\nUtH/tU6ry4G+EXufrH/VBZAgwydwZ6VF08XUuw0XIiI6/eD+u7xiOPqxCPHv\nJnur8yMPLSzDDTN+jlyIROah2KKWQNVH1h+jH1ITbBr5Soc9tubN22CeV9EN\neG2X3sZcqBmzg4eU5s6fJinh7GtnX9sgzsO6xyE4f4WqzbUXH+IrHHdUUfKu\nSGgTcQb0hzM3gPLS3ZOLUrMFRDLQQLHFV5Qxzo38Z6U3w1lumR9x1m2zukOE\n8dg/cFyXAQqSD1RJG+TsqZMftW6CPYf9Kvnlignbmj/plX8ifAlKVeEDBGwj\nWlmG\r\n=Jixz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.2-unstable.0_1544741332510_0.09791802298806918","host":"s3://npm-registry-packages"}},"0.2.2":{"name":"aws-amplify-vue","version":"0.2.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"12cf9c1d027ab843192250049286d7d55d242d72","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.2.tgz","fileCount":78,"integrity":"sha512-zcI8mihXjU1rSLi3K2KWFYnFr0M31brE4RpCtsxkUmsq0HRSWQvN9/2/12R4hSz8pyPYkAXneuA6nWIB9Pk/qQ==","signatures":[{"sig":"MEUCIQDn4AJj+Win4NLbflSqi2oYdo2X2RxvaepKyfKB1JriuQIgWfc40gajDGXuMK9yFRmIVf4zToXRipuITO3RxRPh5sU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2851087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcExqLCRA9TVsSAnZWagAA/kUP/1OmGEmEkoo56sBw2jWz\n8jC31LXjk1HU/t57SIvMuI0ExuIup7rFKraFj2azkKmdASp/jPVZohJ6u+kN\n9YMYYiNcZCGYUIpFxIVpPfSFMQRq9v0Hz2peBdVnv9wSQq0dnolVmJ3QR0BZ\nQ71j77OfB5REaeHc91H2iB2BeRfWBROerv5ZsZt4vpk1I6L9KG4SBPM0DvrG\nNQqMN2OgC7LQi2oIU1y8JFw7Z76MV464EkQmdekiuv0Ng+LL5k+J5QiOTYJZ\ny3zJagEQ2Xn6vF35mCtERc/n1KVSv0cndUXJd+rIO29cmX6N0IIsAQRRWyGl\n/bYv+9rfJL0Oe4WJ7fgynH8MhAjheYyBBkUbTznB+gePhCj/5ShyHTT4/kgA\nvf/r4Aar3Di1Bf61kB2etCu1o9lvnqCQJRgHGGEaZgAYCRf3RxJb/KVhS6x9\n9FnREVCeBCiUY6/JuSSF4gMcF7uqNpjtotyDu+UBtg/cjks4F359u4bkYZb8\nwj4GHqIaho1jIEmXEX9KacAtis9NebrTxPb1kBTxpxuyUBNell7D3WkzKC7N\ng5G/O6DIkKUn8hm/NF9MmThVNwDtPS7/csUx2CGhNLmq/XObYZYBFt2ZcG5M\nipFPknlgCclPGHmQAh8Ao0VmWGE1S9deSymPEVC9kcUS+G6bfqB2bWNLGRQi\n0c6I\r\n=J+pd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.2_1544755850496_0.7089614992096327","host":"s3://npm-registry-packages"}},"0.2.3":{"name":"aws-amplify-vue","version":"0.2.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"a796b58f8819f54db0d8403ea36d5982aa044f7f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.3.tgz","fileCount":78,"integrity":"sha512-wih1Im4FNYV9i315/VvKwMF9+/Pd0wfAjcihT4Y2DltWCVsT1PNmMp9/qpfOI5hUtRYCcT7exNXtu0zCjwDsTg==","signatures":[{"sig":"MEUCIBsAry1QR29ttbHFSRDTRA1w+swS1NdFJiQioruHXQYcAiEA8LpaMaeYz/rsawou58h/T2UuTnOZt3K77p63qtJBreY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2851290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE0CaCRA9TVsSAnZWagAAR48P/RPwRsSnDABFXae19o5p\neOjlI1wayemr3gkA4gUSqVp7OmrAOlH4Ntto6dTxwms43ADW7crODdLx7fwZ\nY2UHiouHDrOPG9l9t9xOk9IbfyQIvuNXx0fVPmRZNpQflLYlX70WpiUd8AF0\n1j+PFy3tpSE+qFI9Ko6Z+V6xGsPGlbfeSTN1acllX/GHxYovQtd1qCVsJy7V\nuHm+CkQt/uh4xfHe40I3gZmb1i03ZeyZKtXtp4hietNdV+6dpDqJELQXjcRU\n6r6HICDJDvvAcmXMezrM14/lGtQqRTsABAANX4pgeXf5xkOSCBQiFGVeRdz9\nQsJildZhZRhSRiE/4n+lyybNRayG+wTgMWirXZZezwQV6crSCH1rWP2LLOZu\nUj8mc1ccA925dPIXyVxW8N14aybAT+IO3iB2eMe/s2XdwNdWO7gzLKT5QdKW\nw6Q6aG8ov2bD9hfM3BAbGBcCSsd2sC78+m6giOaSG38Si+Wk+V6+x8Vt6i2a\nylmrxkJeeTALpykgDYccWYWxN3/SXTR3Dxq9a8T5FRMvpr4tSVrRQi8BHK6L\nRD5Mc6EYfsHeV6Ki4QtWmXfProZMZcydAV4kvn//+gnofKirDFuyGQ9C0InR\nNqLfeH2RX2qULrULXWvjVv20XnN+3P0uYYkUJmywhYDr3smD6b//yvhEDDcM\npWf1\r\n=hZBV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.3_1544765593314_0.2852636063734997","host":"s3://npm-registry-packages"}},"0.2.3-unstable.0":{"name":"aws-amplify-vue","version":"0.2.3-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.3-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"be0b8e6df2b983b526d896fb41eea9a032cc3f43","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.3-unstable.0.tgz","fileCount":78,"integrity":"sha512-YpXySQJenSFiv337RK0R2hX0NBy5vha+eyRw3jgky6fDbyYtAQOqaIMR3BMKAZJ6nXOjId/AYedFLT0XORmdfg==","signatures":[{"sig":"MEUCIH1DOPtAql11PopyosPLDVEzJO+1jGqgTHSJkyCz8MwfAiEAijMetmyHUp2XSvK19qZN3g/h/bj1Dm3x6wAOF84H8uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2851334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFCKxCRA9TVsSAnZWagAAoE0QAIBIsziLJ4I3lKeb/znz\nA0BMCgz4Sa//8gT9JWkdGKdp7l9uJDyl6v6L8njLTIxxrShRqesQ1552/Fzu\nBs8HW1+zz01oToBCEMCDjmiZUNCUF2ofF5+kp/0ctw+ZgikJt00ifhWm5tD5\nWnDL6YiI4388Xkf+nSzedFt9aKU5ZFQ/x8YwTp7Xd2WG1Xo1BSa2ZN3eqXDz\n71IZCca7OeRaETbhN2gt30E3PC86dEUxplp3nkeN5v5N9mwaHQfnBKbDIrnh\nbHYfT9r/6ZBdJ/RrWXJ10r6+9vrgEa0Ivv7vRiDQPDbfEu9xuYPsT3c6K4q2\niqQXjDuy7+uWYnvjO/Vo7pnfYoSLV3BmrXBGoD3ahoc5XgKixhmaMs7r67sp\nxmrujktKw7tpEOvorNk6PWouudXF6PSGDfj0uMtTtf6B3HzHO9or4/4YHZvc\n88CGWxJjX7ZmyHwwIGLJbC5LqFbJJkNNpBCvez2BXT84/nv0yAKqYu4FEya/\nYQdNNVQ6jN/TocVS2m10doJAT2/mMnK9bi+lkaxSu6q2wxdK309wLu6HFp3E\nAYnET2GsJ6OlyXXUOq5+JpIfaHRgN4gEF6hEqO66Twg1Sz7meVS8nuiOSm8u\nG2PvxgVO3Gj2s19WRse6c3IfGfS+rhKlfDzy1V5RmXUGWsQi0WJK/dhkG7ZW\ntZGh\r\n=4x8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.3-unstable.0_1544823473187_0.618086752778376","host":"s3://npm-registry-packages"}},"0.2.3-unstable.1":{"name":"aws-amplify-vue","version":"0.2.3-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.3-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"3da4db6e87ab53c41dd03485fc0e6f5fdf65b1a0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.3-unstable.1.tgz","fileCount":78,"integrity":"sha512-gj8NepstIF7irFARzaPxHGgHtzY/YMsMaXk7GmLThIMdbPBzAGq5S3z3QHPOLEFy+mk+CGs7PQN+bxjeg+L/oA==","signatures":[{"sig":"MEQCIDz4dmLkzK0r30ZNP078ZN6DrLEkhRuHeAzUrpPtdSP2AiAYiCG5FBEBuoprGhoA5Ac3WFdZlke4E4e6NPa7U4Lxfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2856408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFCdFCRA9TVsSAnZWagAAH70P/jVK3l2K+JmbphFUw7fh\n1FYs8AFvkDKhU/1xV2OdU+BOiGpCcOJAOoUpNUHQF8Ov4PuE12BZXrqcxwxs\n6AIbWtGpuD/dFRJ0hNM7mP8TPJ9aAUdnc5goYsETFDYqnQxfUWK/oz74/+aw\nOQBi4NeiqJBHQ6JN6CzYpE83mVtSw+MqCLrs6LvV42gm6dXqBH9ibH6657ML\nF7hkoB8MdZv0h8pBlvq7VYoupDCLHlOjRl+oWJET72hTePcBw3VnFbDaa4pE\nmeapsueKeaydcE3Z2B9wTcOb/iWL1zYxomweXpuX3Uq28gxPMnIw+pGxbmTS\negdUV2eYcJ0/RApSdPcFlIaI1jFG5kyMfTTRr1P1VQLV9Gl0Fwtc8+gm2zyd\nIpyWXDR24DZWpKZJT6LVWVHAWNnUEizs20TXSFKPS57nEJtOsYN/FFf3hhjp\n3dngzLVn9Jnix5acJuF63xe8PR8MWid7itRMaoa3ofU+nLGK0rD9geIEGBVw\nOBPiO2rmqIdP3SPMb8n03/fe10BJdYXKXVsqGc6dVYM5hNLBM5jsVtakjd8d\nJyjZ+/FZd5Azp+upM80LURZ6GyQJljpFHff8ddNVyKO5qksArMe3Ej+lI1nJ\nze68TVVcPsvDg6FaPG4DzVl15M4Um0azzwsmbjW3nDSNaoN5MI89iu7pKbz0\n1Ak6\r\n=pvXN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.3-unstable.1_1544824645040_0.9149743934364074","host":"s3://npm-registry-packages"}},"0.2.3-unstable.2":{"name":"aws-amplify-vue","version":"0.2.3-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.3-unstable.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"cb8dc140813d54a2587acb6ad4fd7bcce8d8c234","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.3-unstable.2.tgz","fileCount":78,"integrity":"sha512-sIjuLlVcwPSI4nauirjl7b6nYF9sTi1SSlz1WsEr+5Cjdxndy7ZmIx/0hKNCq3l/XQ816qaPSJiuL7L0zPePCQ==","signatures":[{"sig":"MEYCIQCKU/KyJNNpKb5D8+v87FFDfnBHw/CyqG2++FPKfx7xJgIhAOdgaxyvVTWykzAXViuZ6wKH0M0zGibjnPzfLn+V8epT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2857239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFDsyCRA9TVsSAnZWagAAF3oP/0+p88J2+QErz+ibCQG/\nfP/vkJ6l2EkYxCrd6jF7kiIjexp3u5lCEFf7FOKqreV3YkKYqLeZg0yOwRmT\nTSs9wlD70zpyOxcLa1RAgj58L+QiTGILNepGmNgnfZPn9s6v8luDuf6jwnhD\nAZ/yQ56di8ZipkHEIWNxKeahLn8W+daHfWwBAOG8CkEPJybtATnDI2H1HRTu\nwrxueqPRe9ZuF/ND74bXEZGjQP3C+MqAckJIoi5g/cc9304M5Klzkj+w2yze\n/8XxZRgVlKV/EckX0nN8CcLIlo0IqzY8I6GXdM0gGz6iPAoO2S9JBeNr6Spf\nRipmWt2y0dWv3V71aW9IQXF2fNTXGIUEs5pQv0rprlpZXYgLd0m7OquWogc5\neHxko8KwXL/b3LVBlf6TQ8oVmpiz7bC4kHBi6i3NNqbyCskGwtYaL49EoowC\nGz9F3ZnzXIVlV3HCX4yQybNkynklIOaTYu/jTLeXKy4zCg6zckCrLqHAnpX3\nX/vGi0oxWWyOI58Yszlm15n0xEp7FzND9PZOV8/1+5F48Ef0L/wBUwQnkw9G\nzEyIADR+lvgG9Dd2CsVibGDHgOeGAaq5oRqWbTDMvoZZDLvTpZBZlk0QTUOr\n0oWasuEje7ta1Ggpy0x8THD95oipWAlCh63wJQH+Wc19ut2+wn4FMLdPeWgA\nd/KZ\r\n=/eAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.3-unstable.2_1544829745537_0.19821709504272977","host":"s3://npm-registry-packages"}},"0.2.4":{"name":"aws-amplify-vue","version":"0.2.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"9d59accc9b14d4b0b354f29b29ad6255a9b4f338","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.4.tgz","fileCount":78,"integrity":"sha512-XfJXp1p5ST1j+TPf+ZfvRzxQ5pH6wK1JuM7j9l5pOZd7MkPG3ETSLirbtSp4jPhokPMHapvdteOL+wRRkaKgzg==","signatures":[{"sig":"MEYCIQDQQ01WIq7jpsTZEtIgE0JiMj5zlxSfeOtxQdV1/r1EXgIhANGf2P69ra5VzzyAFEpEW8pLklCcu6gJV35koIX0zaB/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2857586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFEf9CRA9TVsSAnZWagAADYcP/3Wnx0ohvw/kdcXO8iin\nCGEg2lPkr/wrop3hSbBRASRzXQ1AwTAvpioYbpSUskhiHtti5jiDTSvz6Ign\n8QUIChovSeOLRSPN8t4oRWPbE1txj1OwsQ17E8RxkDTMCLNlhwhPnKSRBl5+\nb4e0XDIfBPuzCiiQBBsPm01EMKzEIfCeYW7cB2QOnvkWDnMGF3Bte9qCWdJF\nguydEe7awf5TR5EYu4k3xFAgM/KOAFe8Emdfm9Wv038AEQR5U2S6Uyhki6XS\nOFno4FE9A4r6JtM5vOW9suxMmnJAM3VezhvlILjOSKjz3ro3AFkmqLxsno+n\nzu2kYvgQbmFfpYZO/dpEAsL8Cp+WjCcYKfnOd/dL+qHxtEnVWk5dTIslx2ik\neGcsHNIwl20uNY4xWETow2RQsvCZuuShzVnNuK+6JqbGCyKTamhhVp8nYNBc\nqph5OUbV9eFOzsQZiFMlFWeLXUv7wDIAfxPQK+eVtUNwbKWbpM8lK2wbtu/b\ncLT0JA/A4lZ0Qe5ACre3KfNAwrywEo2WpKJfPzIUm7v3MI9WVI1oUFSNwM6a\nfNofZJDCMLW1hTYMrnwKdGCES8mZtDeg+gmaw9U9stucTj8vG7IxdO6G4tWw\n+x9IKax1IcB+7WdfBHcxUYH4JC3wY1qPckyJcG6pgOEBC024h0Uo29LMDZ8u\n8N8N\r\n=acqG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.4_1544833020577_0.24306279047318546","host":"s3://npm-registry-packages"}},"0.2.5-unstable.0":{"name":"aws-amplify-vue","version":"0.2.5-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.5-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"7b87be3014fc9e4eecc4c3748c9103d4196367be","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.5-unstable.0.tgz","fileCount":78,"integrity":"sha512-OtFNBKF7Ua/gCwN3D+qSpKA82ZK4ts4p5MKmp+f0dip0lPm63iq/F6e7GEOd2JxEH91sa2/X5hHnWJy578yQNw==","signatures":[{"sig":"MEUCIF/9sI7PnVw3dyeLsTKydSgva0oFCKuOhY4ZnoFWDNLNAiEA33rpr6NdwKkqvVS36D2jomaFbp0PTOgdPCIJH/hO3xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2859148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcF91vCRA9TVsSAnZWagAAlwUP/i3TQBDxJhSrAAoRrW/x\n2q6fo0ZrIZRxvizkVXGQ7rqce3yQeg4Ww9OeBSCv7D0mCY1/+5PZ25chU387\nP1OIK4Ao4CP1/xBLCW8cS95AVO8aROH6q29yO45xydU0NITBBn8Ep9p9To4B\n/T9dBjdga9b3voYq6EFD5R66sJJ3nYtrcLBl2/CnYEkLZRupDEwhrFQAxliA\n5X306XxWQ/UTXjFhO/G9DHlXMWOHR752OSc7BkJw5ON9GvnsGaGrFZHuVRwQ\nMSAWazxElZXgrrZq1jaopdT9qUlLEmblHqSmFGdZTmvnahheOFXk1TH7RDAr\njgD+/os7PWtdKAwXx/O79ranfQy65aCW6qJP4gRbFSD2oGyDPuqqzOTfAIf5\nqe3UZ7XtIWpYUGANZj6B7+JXr2Vm79UV20KVk1QWAok2gV2Y60QriLpioV5e\nphAf9rIXNt7N/j2FAGDjDhgiGXl6DzUs6ZnPF6Wy6gN1TN5hnaJVtaRWLXDZ\n/tGj/E2iiB1e8qIiKMjo7QPCi0LeDjM934g2137NU2qFgRbwPXAa3l1nAX2d\nEWZs/1eeHYiVV9qNQQRyZGbGuFws8ZsUCuqfx21nQD1ExEI7t4ryVPyHO+uj\n4fKHVbMA6mH3+rgYwdO4XhMPsWDHYDRFDmVS4Ew6xws/XlRuTyF8/wfw9wY/\nWkMh\r\n=Zsbh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.5-unstable.0_1545067887010_0.30806622097236414","host":"s3://npm-registry-packages"}},"0.2.5":{"name":"aws-amplify-vue","version":"0.2.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"758c54cb7490d00f808477d21a303c83562505cf","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.5.tgz","fileCount":78,"integrity":"sha512-fyGFWveMvSSWmTWaR3o3xpXhJvJEA41jf86RQQsDi979w/1/LxvVCb9yQb/62lUABLqTef3SH1yV6prEWxzZAw==","signatures":[{"sig":"MEQCIFun4r43IqcmydA21aF3pt9k95PBlH6waDc7O1nqjxDzAiA15hB68U5eMot7YXHRDYyEI+rJzvmWylnUGRvITp7ghw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2859351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcI87vCRA9TVsSAnZWagAA0F0QAJfUT3YeUsQOqov1C8QP\nT8XHrXqSzYwX7pQMGX4Ao4B1/L9K85u/J22YAChavlsk9Ettq4SI3gwWvhOc\nlMw0MKMhfZJm5A8WKJdN9uX4pCBKEb3bCK1JfhN98cM9n7V40NxHgHiWm5EQ\neAJS1ZSy3fzoz6LNiCA018XZI2+xrzN+fhGzyK+ew2mlwufouBohjlBCnVGG\nDupa/7/9f6018kKxq/5HJxZrSESw/owixXIeW/RgrlSeYh+S1PO1A2teyqKE\nou2Hn9dzRJxqUoBTBTvsbKwOD73nocCgxZ2gaRWj6vjoiAlG9wTXQOltq+lS\nYnJwOIXBlEE6AtYDu5fb36UUcDjUYfL2jSUCbpj5b0i70z5dh0fDgT0rVSal\nC2muFqJF0K0ujnE169yapSvxqbYPUWpbzle+pfrmhjA5EhruVp63zInAChQ/\nskL4OGui5iEXL4y9dIYBlDkTaQKT1m0y6u4XecpSBTolaW9l3b3rUO8YT2ie\npyfyISy68y3rGjWMS1rkqC39AWndLeAtD64jI4H4bk855MOI5OKadX2fFWvX\nxD84xtW0w4E9WxTCCjz6cgUVsMvYrw4yWCB5RE88UYIHwPKrZb4V4CfAe81j\nwvcCQJHbIlv7WRi7+4hlcqpgiJDt3aDyWSTzUM7OzJvwXAzoZA7+PiNJjocW\nJyuv\r\n=Px3s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.5_1545850606176_0.4979863976421808","host":"s3://npm-registry-packages"}},"0.2.6-unstable.0":{"name":"aws-amplify-vue","version":"0.2.6-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-unstable.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"92de293b9fe8b6be6bf6d0afb58a22471d92abc2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-unstable.0.tgz","fileCount":78,"integrity":"sha512-8WgNJOBiqObMNYD72CLZvxEHOE/pkeWoUw0SGY+I1UPKs93NMoj737ZKAjEW2m+5YBulO1+V6cpeWfN09WWZFQ==","signatures":[{"sig":"MEQCICfH+DJq0macIRb3BVQ3t1SsXHCVdP80KePY5w2U2mMKAiB0R5hO3BY73vRRWDB3IV1D/zEHay2GzWlH9RgNOjRMNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2858810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP3exCRA9TVsSAnZWagAAaUEP/2auytndIP4gZgzJMLEg\n2PWrVpWE88avvLp5tCWZ5fSyPK8bHFSUf03+yIKei0/Mq4XpgYbSou4se0yb\nxtbkqY1HBwsklQdwkwDskwDFQTi/P3Tn8UzXzec34mE7ZIxuSi9QToFCttNj\n7cEcrBnd/ow9KyWmm36f4qlhnJYB/u4OeZJlMlFF1jFXlUu3SkTe46xDhuHB\nfgYDWQo3OK9gKllPOYg4D+LgSEQLxZsUrRSwAO1od+47xDTtMvUXubeb698Z\nEyYDUdjriB0QJNxIihlPFregMUtpTppHgIG4tiKwaiLKaKwHkbr03VaxgAly\nKFnlhhgjkN8v50pmbj1LvA3j+CWLv5K0oH7WbVrkj/YFdRvp1do17n8JVYn2\ngwakgO/jVRlvlox+2wSTmYAtlm/WB759EvGi3nXXxMcyb4WZQviLy77ZHKhf\nbcZkEuakerx8RCJRo66yPdWSPpKcYUW6tnl687p9+X3lt4yJ6Lx+OlPqwoMG\nMnjlxO0gg2/pv5wZBsLZDGIyd5/Xo/0wbjRI1OB/Ve2NLYI1Pcy5qDK22FNz\n0sO77/L8Q+7x2JR2PL8bqL15iro8W2UK9DosSZWKVxd7XQmnb13AMJeHE1R1\nqPDWOgFO0lRDQR/jKv162r4MGq0qnqX8tu+BtNPwGUBoTaQxTS/0onDhtEgA\nS/HU\r\n=W/Zu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-unstable.0_1547663279940_0.8170196133051622","host":"s3://npm-registry-packages"}},"0.2.6-beta.0":{"name":"aws-amplify-vue","version":"0.2.6-beta.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-beta.0","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"f5900b6b4432fc0f355fe212d5f2a92ef342e8f3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-beta.0.tgz","fileCount":80,"integrity":"sha512-xJDhWxUBKYpT7C1Cn971mZHt8xPmbGfYitp5hixCqbRQTsvPthoWj04PQn4d+L2sSQ4O17zFq7B0M5ewvn9rOQ==","signatures":[{"sig":"MEQCIHrg5KfIxDSocvx2FW4y34Iabq2BFNNQNLljkeOTbxV1AiA0ZXCPpukvgJoeAB6NMcQZrdHRZ8i1QlHry//w80DjnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2927670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP7JaCRA9TVsSAnZWagAASuQQAJndY1vTwDBrv7I5D0Gf\nXOREYp/0hS/S1+MGe4Vy2aXUxQGwHWHZaKnV8FEXSGtPNS+AkGFVW8wUF9t7\nL5mSMndEb6CcBX9PHzwWddtFJJpNALAn79OavFWy16lBl59RnZcJdHr3RlWn\nEJQxOuCbEtxPzrOi4myeWSkFZLzv5ccZNXQN6XJ7APr2hvb3ED2cpqALq9Bm\ny3lc3fkQZWwXEH+dHBbneW2QWxdovrMbxNuLsayza586+bX2DC+73K6IqJkr\nhyzucQ7bmDgKft2MMwplZfM0yG9vdP0B+1P7Fywto1wneHnrplu1gqWGLiPY\nMwBijeNSvcrQqYNBwgZVM5dxPMEDSHOk0Cme61auotGBI8lOEp8Ml21x9zWl\nnnW/lRdk+JnlWTg0qR0DdCwV/ovvUlDSTLaXWB4ICH52i7t70rorovAc+BOa\nuXDi8p7Ga6iplY8+c/NR0KyZSd1SZP7omtVvq+wGSlUku2aFa4bCDAhoGYZK\np9P8apfCcmu6tl2choy/9GyZMuk7KxwPaBBHzCb+iGDueOPz2HB3+m9A7kNv\nRnExs5G6VFprr72Yq6lhxr2HrRQut/lfAKQpGQbnglMUVOGgFs/vCIOYwvbF\n93d0FzBYpxRFmiMaAZMbdp2OTlKluun6PzGKdO+vGh9NNZsLLB/J3iUJJ1vv\nsuXs\r\n=a+jy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-beta.0_1547678298113_0.5424133237141415","host":"s3://npm-registry-packages"}},"0.2.6-unstable.1":{"name":"aws-amplify-vue","version":"0.2.6-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"993c205b607f4a2860f3a35457a93a8311d13452","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-unstable.1.tgz","fileCount":78,"integrity":"sha512-jx97Z6eZx2+wFBF4uuQ1TtEiSJz6US6QXWHdr1Mp/9JrJEQ4yyugidjs8dr7fDbflLVVBhDbKv76UijcfoMlSg==","signatures":[{"sig":"MEUCIASLGwPL1/UqGpoGWt4PmHZg2+0d9/kzZhjSGLmUYPrTAiEA7E6p3aQ9Qk467qTJjUCL/Zn1AzOTk3LMYzC2JlruKVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2861054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQk9aCRA9TVsSAnZWagAAvREQAJBUDogM0onNggoXt7dh\nxbBKdLG/lYMarJsFZplfQodIP6plL7fsi9svdS833z1egwRpeAygv+ta3t/p\nfHUjnsKC8yKwl7b0UAKuoNyJoyOX3gDaeTkGHHDvm78aEefPoxvyYNRT2Oc+\n+CIGFhGmUkuBSr+1uOlE182YMi4AUdTCpAoA/A01tfg8J/XU9mv2fiCQBia7\nxCyt2kgFj+7s+gkxO/B4jqErXLwMwOggVWjDmvbVg7tvaQsI5qYvtTc1Tv5m\nMofEEKlIsc1d8LCP4k9SaYh/qCZESRmnvpQz5kQqVhpvfdM8ryv+4tugqO6S\nMJSXuzMhvaaChVb9qd6Ka8ynSjj+feM5W3VocmpM81y82y5k1WYdUh1LoKBK\ngSPhP5514SZy0JAfdEJLV6xAl5oaq7d4CK4KxxnaDTBCxpfNuWb2AoCNERpi\n84AxX5sIH+Uw467501eziTLfoR3LUNNSkMxd8J4Y5GBrFOGHjtltilMIH+3T\nSkM9YvcemSDRlVQ8qB5mSb0eLCoBqWJp6+GxK2+aqolhJuA6rI5EIkMASWOx\nF4sMIinntdx3sAfHrk5SHWON/i3L1AklbjTJ8GiaFqGgtC2dPvmLKwHky5LJ\nO1jlpCpPklDumgEB0uJc1k60nG+cr3OT1kJSVnZwaPCaJsoMP/HHwBcgPkl0\n/l4c\r\n=rmej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-unstable.1_1547849561538_0.8169749150287318","host":"s3://npm-registry-packages"}},"0.2.6-beta.1":{"name":"aws-amplify-vue","version":"0.2.6-beta.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-beta.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"842d79695926d9242d6fe44f91ce61d0a76ac418","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-beta.1.tgz","fileCount":80,"integrity":"sha512-X1mx9shXVJz3FJkGAJ/KlI3YF6jvfkLjo0C2o+uRW5iF3KBgKkSbRsfzoTFZYzR+udGn4p52rWS3qri2Jzcx0A==","signatures":[{"sig":"MEUCIQCgT6MhuO5zFzTVa/PErPfuOO/znCRxlSzT+JydcFhiUAIgVdIPHuSdRaa04ODI3Xs/6SDbYRhZme9CqF27C/5ufN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3022888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR4zcCRA9TVsSAnZWagAAv2UP/R71T6FLCxo+zdjimeMM\nm6V5O2aGGy57Fpv6hqTj89gU8iZnwCe1mHoy2A1QYdWQ8+jh7TLdxHNUNm0V\nMXOn3JFDrZ4zDcPwYXw5ERzPCrOWxYjpcs2Lp4jGayxADNMRoY7Inz7YxpXA\n0cVWFd2jCfqPEeFN2cV8V14L0GRshsv1qYC+492IIz7eNUXER52QUtn5AlEP\nUOl+bCgh2pfYbi7OPkiwoYVWNSwb5DP0qgSUZVMK/oykhWz/kH/zbzi/7tu6\nSsLyslqqYR8bgnl1rHAoYixCvZPuRslj/haYnflChJffDXPJ/Cjno71K+dK1\nycF5HR1AWCpXUqG6po54pyTVEp9Ol/EiJHnmcm4cC+jU1W4rM58DVpq9SUqg\nozEaGh2Z7vkiLAlQu3OIaUHOp50BpfIcZNS6oZmVEyaSZjmCBEK28Zq5E8kA\nohGlA3La6JT9u5Nwyc7jjQyo4Ikhr6JsIE3N+zrpRoPeF5+7C4AmF4OLK8Yb\n+bAZKl8g0nXzlz/V/DLxn4k2Gb8Sl9JKp6GEkazFITFaNuROsurEANads4Qi\nGYq+e0YGz7RMC+9Jr8RF7Un52CMElSWR1cNLcNFounLmOXjAi8rkzqV8d9vk\nq7pHzjERTC/2NM74nzsavu2WoqX/s2jLk0CdgAYfYz2nNK/hskk2wvhY8G/e\nPjEC\r\n=P17f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-beta.1_1548192987943_0.09982519939739087","host":"s3://npm-registry-packages"}},"0.2.6-unstable.2":{"name":"aws-amplify-vue","version":"0.2.6-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-unstable.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"f86c726e69c82b0d1ac1492b8c0ed60217fcefa2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-unstable.2.tgz","fileCount":78,"integrity":"sha512-vNWqkuJJkmVaBwACE0jRasnuXbRViIqxXpb5dqgQsR/cmceVmALqF7GPxRIBRN9uxyRwmUb3kPP3jfY4GoTRWQ==","signatures":[{"sig":"MEQCIHHtXJp/kFqbvYW9jkyMBEsW1HYe6AAhsk2mhu7oZo8HAiBteoM5P9JrD1s4eRV/vdTqjMniTjomqo6PtB1yXQUcIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2862316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSNOKCRA9TVsSAnZWagAA2eUP/j4Pie2qyGFqoJiwANPH\nej7+BaQ3EYF4g33jFizo099PAlVG4SP5rpG9MTzW25lSGHYBIvJSaH0tMZnb\nEemyrKUv4Th37IOxHpWQJV6b8FFq9tFpSKHO7JeSubKqPuBpm/DAV20SC9em\nRMLXpN3l3V+uiOL3Zf9PIHfbTIesfgzrXo+6bLZ1UeVKLgCHgGMD38XBjCIA\nV9kTO1lncmBu/y3fn4p/Sx7spmxuwRqYQB4YEkaw/udfxO4SMn++Y+AnNwzR\nDXqCcr1otcrgT7h4tclV6Not6/ENLKcPSMW78g1R7vvkFgIn0rrCYpj69n7r\nRrdLp/LyN7zQqHVdnsBNL8FN5riQHmMq/tjQpc7milt4ptiDSxKza6qUBgwN\nH8JGcJXTHUSVh/Y0XZInU3a+75EVrXNDtvTqhB+uMeyIiDK7udIJXmh+O7Nw\nJ3CezS39tqCYGyL3K7dWpQ4OijziSIhnVe/KWWPSVnEwoZUBtxU6eBloQ3WC\nplGCWHH2wSswif9OHzFE1j6Bf2R5yZwZomuiFPfneuHQFGjO8zgbX3v8kOCf\nthyl90F9rB5vruAkPrhCvzcPMIVzMw+tjk+ZjU9mAgk/rit47+BaPesn5JeS\n3kxxqi+ilWLaWyjlGxn7LH6OhRJ5qzY/6ACs46T/Luf2S6c4aKWthLOyYLDX\nd00Y\r\n=Tg6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-unstable.2_1548276617288_0.1402951082781645","host":"s3://npm-registry-packages"}},"0.2.6-unstable.3":{"name":"aws-amplify-vue","version":"0.2.6-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-unstable.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"ddaf7c586772fb9bee7f9a90ebe4d027728cbfa4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-unstable.3.tgz","fileCount":78,"integrity":"sha512-P7ic31yyJm356ILvdjoPkRhSVM8pUFvGR6kVb+QXoiWPeJKw7l5H2pMQ3EK06SFPloxyMBIDB+T4cBXCZ52aCQ==","signatures":[{"sig":"MEUCIQD4LqGCTZ4O07BKMkLAO9bqOYeXZY7U9J8d4iCf9egVhAIgQd/eFoKTrVkmjJxWGWpQH9sKnG0Fp80SdOBFxWQsjRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2881906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYf6VCRA9TVsSAnZWagAAxpUP/3iiYElo0fkh3BGr9Ghy\nxYAV5Rc/cYaIzxeTnQv7U7ulrFt/5GZmPSNGbpSlMAOgfobIcyzGZJsaFR99\nS6j9b6jH37y83kqxMSKqwRJ86YzxlFIip5rb0ZQzGATil3yruXiaOYWcoD4E\nAAdYmaiIfFVJYNSkwj0Q29lUPRW/BM6u07uyPoEqfn7xUqmiFjSmC/84aCvA\nRSPAAOD5JBTxz8U5SqyrCEuehYY6yeL5thGMzBJWwImkVi9sptxSyDBTPt/Q\ns1aaVT7hyiVY9QwOh1wf8KyAiZcY+JcskXLV/4w0YQtyaSD7biNXa2dj8kNc\nNsS+Wlet/bc3r5jlwp4Z6xd889k+bs+Yx/5PAw33N/3WK+Ra6JIy2pryKOI3\nZ35hpbC83O+N03yU27vXh8ulVcju4cDyOWv5DcB3lIxR/nREpiepunJIpYJs\nxMnrbE4BYLK3pt0FNBA8hzrpaapKOvTP8lUi9UT2CZG8N40Slsftwmh4y3ew\nsjKFEPRSQI+ixp8t8XV9/T1JJFLHPWQ+OdCQxFJ3HB8AQoxKm8dZ+E7Rdldp\nfgL45z6JuSoWPESH4BXJtFIVY6DQyYnipzaPVI2Q7avUrpodL/+c+PIcQ2DD\n1LRLlNq8sEP/twSvR7caBPGs5AZglmh3ClTQQ7a5HWHXRAlnNdPyQpjGwV10\nPWU0\r\n=KUYp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-unstable.3_1549926036888_0.7566363226866539","host":"s3://npm-registry-packages"}},"0.2.6-unstable.4":{"name":"aws-amplify-vue","version":"0.2.6-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-unstable.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"edf00f9c83d39ee2d61ed636cdcdd16b07f6ca94","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-unstable.4.tgz","fileCount":78,"integrity":"sha512-schNaxqSyK0f7gb1RGKY0kK7YIFz3caRPT6k5B9rYmqknoX25eyXNvXDIdlwUNp8F2B4UOmegroJi9jWpdhOCg==","signatures":[{"sig":"MEUCIBcN3FgZmKoHa8ZaB0HE4+9TbSil7kXzSz4Sc2wWXI+KAiEAx1MwIidIvjfrxWJDGPKBicMLVsv3jfnCRsPb5FSasdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2882338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcax8tCRA9TVsSAnZWagAAi2UP/3tBtZjdxZ/DJKgfLBsk\nobygMEZciN+QJy33T3jwLpIla33P92z2ZmeL9A6RwO+kpTZRpXEy/61JGmw4\n7UcijoBr4G+kt041XjFRTd95WR473o1/xMchd33AgET2nydWrOf93mjQvddn\n2lGNeIUTbZt3HL0os3gJ1eTioeOZexFT0G+mDAZdYkFMVHKS5igQYl7Sdobv\nOM/O31X751K8jWeEf/Y8FJYGNEdK4cIUwWmnExLpNrwtfWCZNcliXr0wKef/\n/5yjj78V1uIQkxC9Uuh8ebp5BHShoDomEVSKLuXz1pG9itxCDN9GOGtquHLs\nOwoUm3nADZ5BZQ18WWB8hMuB3X/+L2w0mzDArt1AZTXhhL5BbBrM+22AeB9a\nUvDQcP5678I4mTIYCJ/tn0M2eSk/ZO+lDrtn9mrqmT7BsElq2Pbnr8aYN8M/\nfz++oGkX4AwzTCa7sBniEA0TwNCkdMLYoQSykAACRtPFJIimkZ12yMHp6Crm\nE8r8/5Dxf67NK118Ti7m50GuDw31lQmMP+jKY74pnH06Eu1iyZu1m3UAPqBB\nPcQ6GaMoGnp8Nm/n1sXKXUS+uzmsVR2kjIoL5MG2ofM3ZSQZ3KAt9uQft4RM\nG8/YmIypLoLFnt0PXYT2PYVoHUXIqD2Nks9tvH4kP+w+f9M7dg0C3YypdMTw\ndF32\r\n=6Bf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-unstable.4_1550524204781_0.27199965742307497","host":"s3://npm-registry-packages"}},"0.2.6-unstable.5":{"name":"aws-amplify-vue","version":"0.2.6-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-unstable.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"}],"dist":{"shasum":"0809e4fd04ff9b84bc6a772c1ea2f446dc0483fa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-unstable.5.tgz","fileCount":78,"integrity":"sha512-ftdp0nbWopPuo6//swsw06D4X5g8wzfzmCEDdnKQLpS2ZeBXTT2BoVLC4NiWOE4eYKHoFAZ3HgAEj9Az4kDMiQ==","signatures":[{"sig":"MEQCIFNhJNQyjQSn4pWNhPi1fNC/ud9n4ZBJVgRT5SJ9W6I8AiB5WjV6zmCDVKKN/4RdfIn5LiuX4Xt/ZoiPzxjMPzTqoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2882585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbb3UCRA9TVsSAnZWagAANqIP/joOkwXjtHIB4TaLaT5u\nFR0Xa4pjHr2iKP04M5SYQUxy7S+4ef5W3RcETM8/CJQxXV9+KI4POMviIlDM\nkPO9ri/iUB6rJ6aLEak3IEARLThfbIezRgyTDIBeRZ/XLbpei8VueoaEMlLd\nCW89A1cAfV1rLPESzhK+Anz5zz4KSSyd7qf+1nXYdJRDZmSHwUwC32NMa1K+\nhEXkV/TiVUd8rVK249/0JasShGWktBjOmEF/1c30+Qzs+M9rMsx3A4TtDVPC\np6pPL+439vqsnZgRMFEdzS3CV/CY35vXwl6dZtVY6l8WlLxnUSLxQNt8TRGC\nyxSZPXW9aIA5dLHauvUL7hGC4b+B9e9dvjzMu7fZCWKIdM0RGClo8FknpxYn\nBdSruzGwxJ1ZepnSvFrwkewcd7ISvC5GShV5jzkHkCi96PAVv4dF1HZRXTPg\ndwBDvneyVKThisq1vZRBgSggftzYOTSIojReqPoPwYJX0QqvAqEW6RP5ljxt\nj7vca6Vt7ZHY6iH+KjMgPKJpg8cVibNhANs700sPibzKwfJ7s1aei6qJ3vsi\nS4K4EjhRbCpSYsbZ+zLf4/qqh6Tfznv8jUMvY7fwMbWQTS2l/wIHL1dzed4W\n46BHJHwmg8A6zqwOuJGiUc093bNW6aex6gzR+CY/KO8hEgEluw5isKWypFo8\nCkqH\r\n=Ay0E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-unstable.5_1550695892016_0.48842223279366004","host":"s3://npm-registry-packages"}},"0.2.6-ops-test.1":{"name":"aws-amplify-vue","version":"0.2.6-ops-test.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-ops-test.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1c260394a309baa5288e394671969eacc55aab79","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-ops-test.1.tgz","fileCount":78,"integrity":"sha512-gaWXmKUyG9yG9bvYhx+aVuQeot6QEZqtR+GSxXPsZ9oZUNFymcXwJbpW8VJ1SiGsgzz5BoYGA4BbMU/APn4W3g==","signatures":[{"sig":"MEYCIQC4NwxPkLkX2YmHw3RssnvDCGAdHTih/Wq+l+XjpTgoXwIhAJBCP9hPP/Ym2CGTdgEemnUealQsE6xQqgRboH2ibmLH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2902000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccETYCRA9TVsSAnZWagAAZfgP/iRHCA3gtDCs7UDL1Mgh\nmQeTICEIRd+xo5IV8SpC4KhTLKUOIzwjVprAPROwPIEhfReuv8nvhVcBIA65\ndWd3qpeTBTe6vTyWctwE+XSY5XxNHluAvjQsk1V0dM6Aw5xLZiQT4AOX+rf1\nFA9mxlyslx3B7Sh9kBbK/Tu5xt9dL53X5N29M//VigU67NHGJNvap+j7+dWr\nQY+I8xCnDQsjkS6nyZSs+fzZkukzjpTpCKtfplI83AiMPoQwu/WVnSvJpfs8\nGfMcxhDM9oSH7zfA2u6spv0fs4NkVkrxbfaHhdTqnCPeUoLZI8PxI7K3gMpv\nOy8Bg064BAOoWsy8klenZ5M53EGzo197Uvhau5MEhirDFA7Rr7SMt7GgUWS9\n+GQOgmhRmW7ru5kyjQ15HttFtLy0x+4MR6hPYv5Gq/kyFfXJU8Jfm1oio967\nDG0qL5cCPxeLGUnbEak/QeSvXF8qjh1+j92SUOLni/O5hbBJhov6dr6zN2N0\nvKGKip1xyTQmftMF7f2R/AkSYNGkz8vON5TvMyUnzp44KmwujAV24wOq0BSf\nI2PvukxKYvl2lr5uCY2Gq2sSSlLrlgP7c+9XGHvnk/zukKgALV19n8D9qCZD\nklzCLMfLqQUmEdUKj5QaXNalt/mTFqY8UpH9I2m14WLmd6185ED89hxdOM85\n78yn\r\n=LcJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-ops-test.1_1550861527784_0.4559698309036302","host":"s3://npm-registry-packages"}},"0.2.6-rn-hosted-ui2.1":{"name":"aws-amplify-vue","version":"0.2.6-rn-hosted-ui2.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-rn-hosted-ui2.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"677c0d53b56a258162eb68b32cd21fdddb1db1cb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-rn-hosted-ui2.1.tgz","fileCount":78,"integrity":"sha512-xrynYrTpuFGXc+lrZYZ7xIC8FGA1vdOjQvjCDNmyoo94qvMl0GN2Is4VcLg1lHfGoDGIPiGHKcAAGh6rq0Qs3A==","signatures":[{"sig":"MEYCIQD2FDoNFzUveQtMJekmVoFGHUDlzEsK75zyDFNe4pdZVgIhAPZhGuFqBZku/gOmGpLMDCv4fulrfrOZs0eFaQxV50NJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2902714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfB75CRA9TVsSAnZWagAAekkP/2xWlexnDIFcxBat12Vi\nmi+eP4UxA6K8wVWyxFqRUuQYe1l2B28Mb/SHD4HhDd/PDuHKCV7S+61LPQJh\n0fSfcL5qnUrpBebi1/a5pw0FlLWJ8wLU66V+9K4vpSedSmpQS4Y2UJLD6bhT\nduznE+vMqJyKoOcfCYdlirz3/Yp5LlBvS58qnrUts4boitVIb9IhhjarXjrn\npPgIDEk2ed9QsoEm9uVWYSwaRm1rZvcMv5voXL/l7dEKYEFj5HmG0MdXi5+L\nZtjkpw3aYxATm+XVWoNUjiAhuJ/M9PN8/PFHEwGIJ0bF6evRbxrv9bU3bzOi\nxp98uZewjGVwlUWuWC1Endc4oinEqlz5tyH9HJI1mNTCuo3IDyK5GG6hHak+\n1vTLAtFXV/l0ihRrhluZ+NAEiYqDk7XoAxTgvS+ImVCiyACeoKWQDYbh2XL4\nNNP/PQ7hQhL85zAjCjGetux56/b3veRayowfA6o7F76EWCqBBhWRGvkDmaif\nwy6b835jBOwYn4ZYgHNNpn2mqsh2qAkHZgH31TIF/TyaMY7jDew37izlEWzV\nznrXX5Uufnw7TPBTk8ieeVmN7+IX6RRo+y9+kAVV0WDT1Kg/JlIDIh4/kDMc\nUQ8IDTVG1ve8E0/DBUGkOnkN0F0l6toXaWbByNRQcBaSI90CJB5LWCP6of8y\nWVKg\r\n=ZEnb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-rn-hosted-ui2.1_1551638264762_0.17976081266953825","host":"s3://npm-registry-packages"}},"0.2.6-rn-hosted-ui2.2":{"name":"aws-amplify-vue","version":"0.2.6-rn-hosted-ui2.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-rn-hosted-ui2.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ba1b39522c84c31e2d67f3d1c5860e1ccad0e776","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-rn-hosted-ui2.2.tgz","fileCount":78,"integrity":"sha512-l75eWdRi+n++Mj4WvJMq1wFcLb8kp3HG7AlmM5pDnJpyVpZOT9sLO4++v9v/9P/fEHV45P0mUwPulVT3zWvXRw==","signatures":[{"sig":"MEUCIFWMWTBUa0zPOZ01cRODfhwV1PHThAPDgUNhCOUqj297AiEAySCktLoAgvmChe/Y6HlPYCmxLZRAJ2WjLlZSQ8HA6bA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2902980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfCBQCRA9TVsSAnZWagAAWcwP/jgMZOCuh+o5/GXtjNFG\nWT270WX4fFYTTG5uGYwk7HqK5PmaitRR/vOH7zk/vqCJP3ufHoTEZPCQJg+K\nC9mcfVFjZYlFjv35Y+2JLLoj+9SPbY2iCKG6N6QYpop1QElIyWDcAzFJy62j\n+1NNlQNArubScY/syfyI+293cHbeI412iFhuphYf/Ma1dutw3P6F+WxnWxRT\nHMbTZJI7oQJyBoFWFhK0qNUgxmtDwoQskeEqmBL4uEa+jj2N8KtDF7WtU/Qn\np5k/kzSXab/8bWndiqXevqXq3SStNYX5xJyV1r6ziAgVOE8p27vPSITaO5Ca\nr3CqHEMlt3oGxsZq2yoa42Wt0za7YUR6zS6Ry/IZDDNVLwuUkn5yRxWGMhZL\nLV8YGYpvfD43SvHCL61/Xg/FwwZUB4hLIjlHR3e0YrrWJnxCRpw0wd7GhNAH\n8PMG+lTMrlF2QucvAgs3NrYQ9kfKFjsFXYx52iXg1zhvuwS6rimnDFWtGbb8\n5Zj7nNB9gh6HdMqtQC9ynn7hmVVD8VfVHfcLO9BP6+RqElIsD4FLLerNB3/f\n4aB4IpHKLhfwigogsBCLZNWzSGeyt8ARdPgjvHWDBeArPyf+/2eXlFKI36yJ\n+5pUQh4FsCtzA1xtjwe8tWNPP602Fpm7ySy3Td4phz8VLbuVidwbiTxEhx+q\nLDLf\r\n=kDm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-rn-hosted-ui2.2_1551638608015_0.9364682468764367","host":"s3://npm-registry-packages"}},"0.2.6-rn-hosted-ui2.3":{"name":"aws-amplify-vue","version":"0.2.6-rn-hosted-ui2.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6-rn-hosted-ui2.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4054ff99820f29ab6880a972637d13a430f4ec83","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6-rn-hosted-ui2.3.tgz","fileCount":78,"integrity":"sha512-RXNvZF2Sk/gqg8iFcNKRDWydfgp+SW/gvixkLXRtaUOGDJZfj7tQEHLaVaJ9CnlHFuTgZDr1aoJlXA3iH+M8xQ==","signatures":[{"sig":"MEQCIG4gVcs1iqwUEWZmjeHrd58rJNKYoq7VpD9ZuwRd03i7AiBZzCmEtVwHU6C8vHg81/mVHYRYn4WyPuFNTXPRtKiP4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2903246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfCDyCRA9TVsSAnZWagAAXwYP/RP4zKuUlts96JEguYyi\nS1gvy25c5ouTzPQIAa+XDPgvH9QgSdRhlQpiMASdJ8O9xFA07VS5i506vo1N\nGoZZotaFR+j8pLlkHcdAKl67l4K5JswNqvm+21ZnlTAbhqswCN1eQlekbrnO\nMC09xMgkmw0E3RLs+yN51aKTpj70kycU4ecUZtakV71vBi4lc4P2XRdEQ6nW\nrDeJmwLY3/zmeXzc1b7JnWFCQG4ghPL8pbOtXzF7m/ZZEeHZBdFPig3ES2q8\nzB8Lio9Z8/QrX3GOhWiv9SwoAxV0mHB/etjSX84EJfMdZ6R0S98dj3XXUJEE\naJYN5UjIZjG6VNUMUSyxXujaveJcCJcM8zoMzKRzZVVeQGmzzNn5ISM7albT\nGwz2c7i/oZmqRlJFWGwhmdv9SIoye7CnvB0vLkXhRSs5QgOg0xWT5/ebBQk2\nhI4lzOj51qmz3OqUpQP94vOrTjytLjVYaeSZYo1YIa75ZrnnTY4e+6BdT/re\nSn2unNep1HQtJHULXk5kSsv6CrhCjJgV6o2+GEcVWhpMOVIhJzZQwLFiOOJE\nZufCNM0mMjbMyg+tRmeqi0WM7aBkThzTiowXWA6oQf2gdS958GYkZCTOfXSW\nDysRZFICyBvIt+rcdwWZOwAZL97dZGE+Owor0ZUMQ9M5LkWlzGUb2YkQx2Hn\nBIHU\r\n=4Jpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6-rn-hosted-ui2.3_1551638770253_0.1464295814997698","host":"s3://npm-registry-packages"}},"0.2.6":{"name":"aws-amplify-vue","version":"0.2.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"39b2a9aeed33f506f494f6f215570d6763b35239","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.6.tgz","fileCount":78,"integrity":"sha512-xfq/9nXGvZxG6R+7e3poAIxnFuKWjAsFgnmfHfPRgBVXcJU9udOZfKxvTLDw/eeouhVqBAh4TFwMXgJJCqk6pQ==","signatures":[{"sig":"MEYCIQD6DiBntQo3PABQ/+xs5zf2z2Tmcvsy7DZbEMKj+68dwwIhAJEWLjkg58eZgPgG7QpdStWfxBtoxx4KSRl98gIhh2+i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2882788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfaPCCRA9TVsSAnZWagAAYnwQAIfom37YJpJX1wEC6AQn\nJdunOq2eGb46GjmrnpizwyEZs4f2a0ET3K7XV7Z9AcoHeKsFgesozC8eTEL/\necQJ/j2+a1iGRp4sqGo0f8D+JPh3FcRRbiuYFXEm3W4VY/DJlBcHOBv7TZtB\nZcYKTobQjRdGE1d5FyACkqijYbEOJS7BAPLA2qTBCvoeS278VIkOi0OSOZUi\n29kZZCzbEGWuD7kLjOtLmVzSeTTAspalGgeZ25CfzYCPALR4n9R2wJ6jTUdd\nhypCQssugYLViKprc19Wka+aDwcX/gfWusboh0CDoKWvBsIV119YdM15qkZz\nHPqrR4hVT/VNkO9TgSUrvC/yNBna01qXdnHb6CKuSL+vJwmTkeL5dXWQYcvL\ngVgzt/f+lSv7raKOpEzfRUL4OiNdgiNnD5YXUTpUJ80lWDkfrlbRKg0LkmVr\n6UEM8JEHhKfPXewxJ41VGuqnJwwNmePq6d+C4cQ4Rnfaj5SiCWC4CWZcVpas\nGMeC56PrTRmkM4Mer8lOuglxV0e4dtgLmtZ4DEDkAxSK8fWlQa9FsJTxcPSQ\nl5blcx1LkcCSeusQgFwmr/7GE+gjewrQaU5W78xdrxwTPWc5b1N2SENPdbJG\n9jgGFgwWcaZHTW6oAViqhALjUa9LVCS7G9s+Kv+Cs3R34YtQhII2oSfdrIFJ\n5gM9\r\n=y8Ul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.6_1551737793329_0.9142544840568068","host":"s3://npm-registry-packages"}},"0.2.7-unstable.0":{"name":"aws-amplify-vue","version":"0.2.7-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.7-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1a96a764a1c850d99858b9c415fa06e5e3d3b051","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.7-unstable.0.tgz","fileCount":78,"integrity":"sha512-9oSgUG/+oXAh9HIZ8yFOgPlY0/KfvVwUqs2RzMNysfkKYRlb6z3ypg7jwsuGp91VB82hriBA4E+4CFm0s5X+Yw==","signatures":[{"sig":"MEUCIC1sVheMHLw4s+UUbJ6BSrX8ODMuOJqvmGrYC8w24zdnAiEA91+hq3KKkS/P2nLgcQH0ts8QcximgDZfVGJq+yt+ops=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2883606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfrTnCRA9TVsSAnZWagAATkIP/RV0Tns+yBiAHYLfxnSD\nwnaCp3Qwwa9Avd4JN62t4gRHia/P+Tpdlyzt6AMT9CfSQQStHolgEaqxWAsi\n+UjWNjofTGCEdDy/qyHtJpmZGX8M0VfzhxAF3Y+n/xfZrnsCqaAPFhdJB77k\niA1VOPdfDQhZ5oqo4yIRYY873D5Nf1ozcRwyw21jEpWacQdn+uYe7XBAo4qe\n3awaRDOWZLCtdyEzM2ZmsR2OKJJMj94IcSEBzdReEWtl4hhmmNyeh9rcSVO4\n7BBbspM4WX2GV6reVEmjPH3kyoN4UvhNMBrHv1s0JUpqQKEKpdEQYMHTTZp9\nQZ5NCmYkueK14ab5E7NT2TY7Obrom1R8rtvJ8US9CnCqjeWlGT/0eQmo3Cd6\nzfoIwygUnbMLuaLcsHJyon++tywYGVNlLM3lPK9WYfJmTEVPToGZQSS7LOSY\nqrIcxic5kX3hEOe8wP9kaBghMsz3H2buqIw9zPARwxeN6+he+kLJ+rupO+w4\nnD0F1gv6bfxCKJ4B7I/PTF4s/7zcaQrSnfqSab3RmaqWAbGzFQS4YxubW/uX\ne1T/ER+JRhGoheKmIOXxkvvS3+YYH10WeuupIWBS/WkGchjFEEJRVgIJ4Gg7\nr/kuwWqmAX9sXBYzpxtLAG1Ng1mdJwJll0o3DXmw/+GUkugq0im5lveRRs0X\nxm/6\r\n=sJwV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.7-unstable.0_1551807718577_0.6095919024694216","host":"s3://npm-registry-packages"}},"0.2.7":{"name":"aws-amplify-vue","version":"0.2.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7b737fa8289b46b41b519ffef55f9788089b4fab","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.7.tgz","fileCount":78,"integrity":"sha512-Egxw2yDOUbZvMctQXzSRvvRcpvIeublQHbJc8E1RwYDxb+UTeuN5qz7r9XaugMRtfx8dFewHixs2XhrIRlMqHg==","signatures":[{"sig":"MEUCIH2u/cWH2+hBx5B54CZrYTxxAv2MiiBa+19nuAPJdgI7AiEAh8JnRrcOEPlppGV56HXKMO+Z4ELHOXENd3ds1qQAtlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2883809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfxtFCRA9TVsSAnZWagAAmB8P/0SGMFXX9dC7wLa+xmzG\nbd3nc7x+Lm3WrZVDmpwgddNEeBWZXT2eojBxUUfUtq80E9raMyxrim9VrmlO\nswgfT2JgG2amv/445/qhla2MAhGg+Ln+6zPFGR/krfdodsaHJqiYd6N0gkWg\nPcYTwj8WdM6xB/GT2dJLN6EMgY3nQU/sa7wxij0mbSiDEAZNOjpYDiH9bsW3\n9O69OYZ23geuBjI/434yoBa3ttP8A1bkbXhwT7m8yXS/N67x46w93L2+jFzH\nGOg6pq79zNLBCm+8/W3P0LZxwBF+stgwh2Fb33IBE3lcN7TOF8jR4+QOuI5J\nc7qp8a5K3B7TKYHUwZ1peSS6dqa1P40f0hsf2I7xOp7LkFzvdVHfV/PyLwJM\n7FqnPHmNCwPf19CMZp3RNwf0YiRrLrN6WRCLYAKnKlhmzMe3q8zmtxb2s5Kb\nZlGKWO7zAYF6daC5fRjtrTBk8hE4TtyXzsu0AjT9iMeoDBz/LvmTdS34KoaB\nbl/a9IQkx+PAPOBc9RT/I7V1OBjTnHd8RH6Fo5jR1w9f3LcTur1uHYeEatz1\nV71m/gnuWUfVcqCRToS6T1/HIFCNLuLAcFfTvhO6ERDYUSjKu9P9+2byoBcw\nkhr+W66BI7qQg4u9htgqnPlyTddHjTWWKcqTVIKsKeLPusrI8ivRO/HBh0m5\noeBQ\r\n=adWV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.7_1551833924096_0.6693821021435591","host":"s3://npm-registry-packages"}},"0.2.8-unstable.0":{"name":"aws-amplify-vue","version":"0.2.8-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.8-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1c8a7d0cb6ecc7e81de179b37310658ba0b58b16","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.8-unstable.0.tgz","fileCount":78,"integrity":"sha512-9LtCsdonFf28Pv3h8KSWa51yF1ZFEJE+F7Xi2eytrjMKPsOk6mrPIhtq0PmtEfeWo/Hv6QzozcZPd+QHG0cuOw==","signatures":[{"sig":"MEQCHwZQfcVwnoNW1WuqvY82VgGm/e80a1P7wkNywJyEpM8CIQDJ0rXw3pxUfKa0DZ2s8sDmt0hKQsKPE7IjFTvSmq5JsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2884208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtCfCRA9TVsSAnZWagAACq0P+QG6kFUF5SUvrjcxFfs2\nYQhSJpFtlj+whEh+V14iSfqjFj9rdeIYm9LcV4FeE1odsNTRQQdIrB82YzoG\nLxGL76CBjnlNtIjNm63lAQX4fM1cY5BHN9BA5ugugoiA1qchO+lIUaEWO/ub\nWYCckUrUrKAb3G09jwwcNg9las2BFEPfGrUvij24IXcoS07uW9Ny6SuWR5s7\nRqPzg3R/5mHVvSClxLsAyTKYwA7gEg5v/n6ASp9+OJFfKMQjQ2GxibqJuXqz\nk1gvVhd8Y20TqZyOS7jrQ9PCE45Y0eOiKXg44sZC1uIOXh/o0KPBqvVbkBgU\nXaWteloRfJQFsD3aOe14DPxx7RNIw6nf8m3c6invmNWRGfNNJ1HfQS8G7aJ/\nYGD8FC66AHj+IvNbHT1GNDsPgV1uJvfBHMXlF3JgaWOSMn4gfN7n42VauwnW\nvJAQoPpCPMiJfVneg0w2M6npOj6dEi2wf3wN+zBNg7AX8ebS7VDK4YyPAquP\ndxO2U4f1/lbSI4mQxjQM4piFguWcnt1tE6+98GYOypvj4iR8VhV4NyDUN9+B\nvpExXKeamTaqRbzVC5diP9bAd5+Ssj6TuutavcuwMrjLLJJgcq1xGb4/CLqu\nRgGLiGPFAnEWzlAAnyMpS7VtP4/afYdQ0WGY5dnqVq9p/oYnxR+0GmvCKstR\nmkmI\r\n=/NaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signedOut');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.8-unstable.0_1552339102334_0.9751821925429036","host":"s3://npm-registry-packages"}},"0.2.8":{"name":"aws-amplify-vue","version":"0.2.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ccf62a57b157a022c8ff0518c40afb4a69fcd980","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.8.tgz","fileCount":78,"integrity":"sha512-OcSRwd59iwydgyi9SxucwcGgyiUvbUfcQrNxZJWupXZt+lJGXnJQEmM+AHljLRnZ4xsVYZMPj6pj/1XsAUY9Xg==","signatures":[{"sig":"MEQCICwkb3wIzY5O6A1nwzz/AQbuD7KSPryt9yI9HlI+XCHGAiA+t2A50mGxv/S8pVjVAVlOhcONv/rSTI/97N3DQ/qdSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2884411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnPVACRA9TVsSAnZWagAANRsP/0PDUE2nnLdqoXR9QOl0\no2Z2Njx/TdyWzmbZsdUrG0FwdyJEoqEgJL1euntoAP1z2CYucZXdCQ3MzUQH\nFI/JJiM/bKCK9B+HQNAUcab3HZ0UPUS9PgZznjmfMhLSbcquY0wMMcFBDbRK\n2SB+puR8gbYClTgioaxMe7jhwpfcuSprSYMzUmFY89SxHoW8C37LEdSqbZwV\ngVSNYfHPs9wCS7aNGTQmrFK0t1VecTxSN+/h0ntgA4J3ER77tTsPouKkVHgc\ngdwy6luunpZVocvfL3am53sNFBCLZY7LemgEf/fE0D9XhmirbkHEbKquFINj\n86B7muXkD/9iTdvPavXbMhIViX78rlwIZEYjeCPnwVxk3urdP8vVTZNaX2m2\nELlsSvSsXzMQcyv8NO+ExhayRo8zVl85Zd/OqDFInJAIbrdT2NtUQP3wTa9l\nT8z1nzByYuvubquzPWzc1mDzRmKBFK7yWHb22oFjXFERr9eKR7rFgpogkn/N\nCH45IianMdxBicEZyiSpIB7HiMVTyWmfvVjAnDEo3CDTlZdG/AFRBZx2/FKi\nmkol1imlvfDhNM+SY1cXQan1xgZg4nLtdPlfpRAU5k2cvWzpRFsCoGrtKnxP\n8oojw0k7tS3lzGkMq8TEBQycpq0QNx6YCtWPLz53ZxQ18Tp2EmrseU/+P9AE\nBYzu\r\n=yzm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.8_1553790271943_0.8999638400080019","host":"s3://npm-registry-packages"}},"0.2.9-unstable.0":{"name":"aws-amplify-vue","version":"0.2.9-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2ce4f7c7ea170e315d56139ac99ab54b6e2b778a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-unstable.0.tgz","fileCount":78,"integrity":"sha512-MTWZ+eqG5STN4f8nHjq1XDrVVwRlROj6Qmu3ip29qOzu/gC13I0VpkZwZCIlYkVzksCI4imdI44x4oTJqWTnHA==","signatures":[{"sig":"MEQCIC7uJ/+8K92qv7TO3SU9LgDiz8KKM36ZlBvdup8ykOWsAiBxg+s3AS9zpHuqBX9liZ4xNO99gixMWAFhM6Sbsm1UrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2884714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco9cvCRA9TVsSAnZWagAAzHkP/3zuzENqUKTart4I3oJB\n1U89S3jb2ZdTR4V0cs8042dypoL9fahSBPQWhAumiHjy7aG8N6OFM/FR85eA\nMEW23LacAu/XMESNpul1rg2WeslmigJSEB/ifSAFyOSSxDEzFR0otJ57yjSr\nIr3m3jNLPDS7XkRHQ/EFVZdtCWbZZJpYU9AQwssJ7qfIS+s5Dx+6jXec2i96\npUCuIj9lpZs9PFhQJEz6baQoS0ydJ/BFbMIcK/7HoypxAnI4pYXDEqMkwR85\nycQIOUvscBmdvb+vtygb4/ufT78NrqvJQB9UcK5jQolhRmjkYoyH8hsfV8sr\nJ9fQTVQKXzcKn0O88B7IwCaF9aYDNSrB8HsXeloU70iZs1XUq1XqDqykwaZu\nuFoaoeLxXG6kAaN681MUlwsiboAh5dODCfVsCte6jXJpOXvVKCo0OtnVs7q/\ndvbPNIsJDgh/RngdphAByKORwI1uAHVVLxulGU8LF/3HwcxWIFzJNFPFlN0j\nZ/sW2iUIXUpKM0kd11tOwRFunOXKadMnlPgvrmq7rSgDrKdxuEFdbT59MvRd\nwQEBFJjLcgZjmtdhkGhCpF3qBzFWCP/ew0ae0osDwhl3V1uevceCkTSC9WwS\ndxcbnXswDtQSlBnhThpRpE8b01vteeC7sSo1wNLPSlZN6yobRKPRfsEVu44/\nXYAX\r\n=y6Ow\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-unstable.0_1554241326660_0.09057131783283845","host":"s3://npm-registry-packages"}},"0.2.9":{"name":"aws-amplify-vue","version":"0.2.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"67c01ef7beed4e7a63a58756b8a9d337cdd740b8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9.tgz","fileCount":78,"integrity":"sha512-m5ncz0lBdCCtI7nexcLT+Y9/g3RNpJ1miEcGLuHzx4mOHnhW4VyrHn/PO1lMSnYASnxtRGDHKID1MnWswKgI9g==","signatures":[{"sig":"MEUCIAgwLrcinjWeSj+SiYfH64fULHGTchSGFV8+i5wAVM06AiEA/QcIVcKfFkpBhWITv3fnSr55sxTyrBtwEk11GsiIcnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2884917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpW2OCRA9TVsSAnZWagAABo8P/iknq1DMDjE4PFq4gjIJ\nZdWr9M1YOUAKPhaDgEMF+PTuQ8fTaLtMRneSGIPx3jwtnIG4P/aMYXW1Q3S9\n+hB1eiBFDW5Ex09feZGUIL208LhqfAOds5dqn+j8bTw/RHbJjCeXG8ftok5s\np0/8IR0eVtv55No4OjbJxtT4+yTj2E1JTrqhNgshG8q6C+sz0oYWDT/aEnMr\nSsHaF/RjhG6axjbgJmd6AaahVMQll2TXc6K2J3dBpXSYbXMLMv3rRj8RNKqh\nZFVmMiW3YGHG6jKTXk2uO5XWgjiIW/zYuGyGdxX/fC9yXtwMLxdvKqKSbeW1\nF6M0KQUKtkAl35QnGrK4sR1T0JgucfhlbL+c1bIzlkaDutHZwQ0RkF/EraJg\nBUfXAD7pk6sgSeMjs3raAdxnf3sZidVOGXYnBdqnhzS3eH90UAUAPaZPecYC\n53GA8c6Bwb/92GAyTsTb75pMxY+PE0OY7S4Z7oNskwsOkkY+Jv6r7G1S/Alr\n0lqI9SqDZF4tuRTmhV38cV/iOH8gHAWnYNDOjh2pJpykxN65GMgJ7sXzsaId\nnvBV/fYcL/MfoBXy7KuTxSqsFegi0vbME3SUFRTcXm0h1Azm86qIUdjEzUMF\n5pFpf+vXjW/20LtfYwdK5xJKhyc/9Xn1HpsD69LCzFAvEg0v7urXGdVFO/XB\n37OW\r\n=T3jJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9_1554345357454_0.8070660526459172","host":"s3://npm-registry-packages"}},"0.2.9-beta.0":{"name":"aws-amplify-vue","version":"0.2.9-beta.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"122ffb370678bbde3f48c9651c9361d774e86ca3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.0.tgz","fileCount":78,"integrity":"sha512-0B19PxKZxTrGFARdHXpAds/bhIme43hJTc3Xhkz0HnnEevBYGTbKaQYLpxBJr14qFJpmQcinitbf6u+7lt/fOg==","signatures":[{"sig":"MEYCIQCg6ASlHLAUmrlYDpf5D0nwfFmxWMoX9Lea86g7k3rmIgIhAMly1WGLTFmmavSBMc9zCcoHu7zwewi5W/wK7HFJq3xc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2907062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpXZSCRA9TVsSAnZWagAARIkP/2CTIQG0voCjM7v0Cqqx\nwehUULntbomPSQTDlwYQTkR8PWKBRlN6YZ96WkqhFahbsB66f/V5i8LQkJQp\n012DhNqUpjj+lPuUdMP+3drVEbSMdMNmYIshrZH9JnWc04aaCGKNCBO+r+Tg\nZiNLo9JkxrmQwbBotDb7wY6zhLmfIq/W+RKhIb7rmc0nZbfd0SdhfcQ7pPHV\nES3sE65LrMStqEKL0heU9MeEr7VgM2KnC4XlGdGxRCDzUDw7EFbohBI7fGm2\nWlisq/NodYQ5IomHCfvX3GfXo+Zuajdndqx8erdaT/bfEe0Cbkg4WimGZ1vn\nOcKuMqD7hc57JCz+lBcUarJ5OLeuGqtMRKFy6mrpicWeI009fH1eN5cymdkh\nX1kHWTvoM9LflDHBNwL10ITGXNpaRBtq9+rquZC+ufJNA/wPGx4LEtBGJ1UC\nSi27ifePU4IJXXRimWBuWFDYX1F6dqzPfssLKsPWEoy4I+lOLHTNsEc1yFLE\nBisPYW4k8gdtPn3lIZtDEeEhrJycZT70ZiTNw1IhgEq12R7KEfa6WKdxl98z\nQW+KskDzIuMD1i/wzQI9ir7vwtpCZ82Bm64cq9v+djjMKbv5u4lAhSPsMx+Q\nTRHehrKFKgnh3DwNq4uEQioCwRuyrapl1J9d4X9aU/MKxhLScP2k6zrI48fa\n+drx\r\n=pDEc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.0_1554347598841_0.5016334145469219","host":"s3://npm-registry-packages"}},"0.2.9-beta.1":{"name":"aws-amplify-vue","version":"0.2.9-beta.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cf03948f719f2a9a4dd43a240130c5763ea1aad1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.1.tgz","fileCount":78,"integrity":"sha512-yUwofacoaCR8zWf4/jv4uDlL2EHVUgNnMgHozJ/nhAz+nLVtQewKr0JSkli0e0aK5PmGqFoUt1zcipKo+FIAgg==","signatures":[{"sig":"MEUCIQD8Xru6g0JzudrwHwIKtfGtSj2QaixJGxljSlrRPwN+0wIgRVjoDfyG6MSYoCKTqP3b97KkAzoJHcv9jXU+aEBoVcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpolICRA9TVsSAnZWagAA7bwQAJK7RznLeAQB/XOYjJTy\nQyCVHfoU4wSnCvPoizwTDtmk0S41nX60ddbKkVbvMvjDUZu0brk25yAi+TgP\nDVDuq2eDKhApw69pceRjKZBo0dqq+zrCZpaM7dxAoN0EnPDRUGd98kyXmj6e\nEHh2QSc+P0If8hw2gYj/3zG+UuaWBHL3sc1KVWS+tYkCzcFOSxmXRa7Ur+fQ\nvG7lhi5iGki6MPk5y87s5YwGNrviSmSdIK9OMwYi+SVcBWJGNWJ6IOUlxVqE\nTs9x4u5qE4hUvZDRNMmKFyPICTSneYYlaDLsLIzMS5282dG6M9P/ON6yoNIq\ncIX8KhF2+/GxFRLLeH8npZxtKbgfWhb3xzXSbuf+vIyBe0EduBYbk4TM6pnZ\nB5FYFkvuStjyrdq/BS5Y1z75d5M5btm7s1oDPccev2oDEYnJDjWIO7S6d48s\nWwY/75b/SCqcN8nND8CurT3jAGihAxVMEpgD5pg2KaSmDFtm8baB3oTQOD8u\nqOavBpyPqmqylYljy1ozds8pCIA7YiI/5QkMd88CDcGZMqQvHNQayRr3adZ0\nxmF2mZqQjJtBTlKCzozoSmfy9fu4YWQtvwWmkucjRtCXi8A9efmz2/cvoiDd\nH3Yl3JiftphpRSYMuM/N2q/KidbKuiAHPhDCE7TgptrKPjPdJjxfNQohMfux\nDtJQ\r\n=l7pg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.1_1554417991973_0.7957487272071515","host":"s3://npm-registry-packages"}},"0.2.9-beta.2":{"name":"aws-amplify-vue","version":"0.2.9-beta.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"29b27f0112632c67f27c843497191a7a326b0e01","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.2.tgz","fileCount":78,"integrity":"sha512-AIPvuLHKgEwLQKR33NBznJWp7fdubub//t6m4+V2q0IMrPJov3StJyRQ3t6soWiETtXWfyPsLNlq7yaQR7V80Q==","signatures":[{"sig":"MEQCIFr5AqCh9eILkNpcZhWrY94nsh4g9NoGOeGvBNqw7WMAAiA2gOdOgZWm2xwhW3wnTeWEFJeMr1MRjDCJZQF5UBn7HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2907526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcp6tGCRA9TVsSAnZWagAAcyUP/3LuLIFy6ikGWGwYjxtp\nou/t9feg32afX6mvBA6cH+JAc8UntOHTM3Xzd3IKJG+seDuqWuJBh53hwHlA\nWuRauMWDP1lHGyptKiGspPeC5q+EnxQgeXu45wALLtoulXhNSOtGX4iROzLB\nighjNeDs126a8lOEpihzWr5po6rAril5IolviZeDNbAczTHS1xJBZjPYNec+\nkxyYjVbxr2fKhlxdJW0eWznvfVb8DEHb9wi4XRSkNGf0AkIMv6aLOqZSIF1j\nRZAFo8wzBv5tjenA3HDH2TSKUcchOJRA0P3YtBFhxfKqGvAu9qEgieyKNeQI\nGMbkALnDcFvW0stiKyWX0kZ/l/NvAOefDhs9cPTrLGyxBdH/z7EEaCXmfK2x\nT7aOLDGS4SM2sUe765Zl7SnbQg+QWdWF/RKB8nLIxdeaTBamKgOl2GZYIJAj\nksbwmMZGgcM+RIgX+5mmkXqIKyeKB13oo9zuzgy62aex6NHvXpAy2rV5fBG2\n0iuP9cz8V7xaJc9OQhamYkYkVqvuTecNcbCN0hLgxc1Vd4VZwBQ6lm1wiPuv\nH6lOtdIcng1PmjTzi+vdUYyD6NncmcBCIfbCxHEc7nGQnuOD3jf8W7W/lxlF\nM4YbLboey4BQYSDXZFws5NWRV53Y13dz9tr35IOHFeI/Rmq0o+IGswSa8a4H\n6Iit\r\n=zDgK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.2_1554492229982_0.08829610691442613","host":"s3://npm-registry-packages"}},"0.2.9-beta.3":{"name":"aws-amplify-vue","version":"0.2.9-beta.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5c849687181b869fc86f536e1188ef5d729bde8a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.3.tgz","fileCount":78,"integrity":"sha512-nUsu7bM+bzxByqn3PUi0OCP0yOuYbvIAbNjT5JS7cbWo1PO0pEP5flEyv3go/M3v4SyAbYvoBaiZoBSgRYudHw==","signatures":[{"sig":"MEQCIFB2dXfHy7US39nrhAFFaDPhCWht9tjS3YUDolu/t2ISAiBjWuolprLw1YqVadc1FEQ7OBIwJI2i3b/kFIaTpAuY7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2907758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcp93uCRA9TVsSAnZWagAA2KMP/iVcmyuIb2eZ02rK3Em2\nrn7NrC1ZxcYZM/MiFN24LNgZgDqVtddDlu1QbEZ3VEmzjNQIf3r486NBMxs9\nZEhdp9Fp8R2kpywO8sw6kUsvgEd4OOu7B0bvb0/Xvha27hVM/5quGRIh0fE7\nurPIDoqBzEwtyLYMvoosDlcFRUe8+OO+PWc1UR6xB/+lkR++E4VvDXW0IXOg\nwFV5X63Z+4z0AFcDjh4BVDRXcR8F62EczuonG/5QwWbMkaXG7V7Tb5zJjqiK\n6HgCCsTSGjwH8aBA28IpC6ZNp7+rFtUJV3bRrJik6SJ+wuUU3ay/WjSjAWUr\nhZI7qm7L/3PIo0iMtQ9He4LWeqSPGbdxVa++sJf9nNdYu/Ty1DefxC/rKpOw\n0hEm7qG7BwSqbrpLXx3ilytwQleoylrBdWjFcvDSoh7VieA4OX1iylv0CpgV\nEhpzLWRV7oN6lw9ShSGKNSGIqNdlFDs0JmVzwYfBk2dNjAMlqiNiBR4IDfCh\nRXi3T2cZecXapkzFwkRbvuaduqw4i6Kr0liXaD72mhs4EOvDErxHIt3K2C1r\neGo3xJVhVdH76gTR6DIlPZLX2lMeQiJrgWSrGzF1peYM3oUrKtuW+BcdiTES\ncKY4tKKWAZlbzhuPxAwMT0V8C7Y9WHSgtcb2tKXmQqqDz5jTrD898ZVY/gsL\nFG4E\r\n=dj53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.3_1554505197230_0.5048811599893435","host":"s3://npm-registry-packages"}},"0.2.9-beta.4":{"name":"aws-amplify-vue","version":"0.2.9-beta.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"27acff2e27b902dcfb0ac0ff5d96b92dd9afe201","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.4.tgz","fileCount":78,"integrity":"sha512-5W9LEOQdp5hN1BeaP3J06GDCX1KUEYngUrrUvjePDzkZXMQkFQvYuDVMVyro4IidK0j6ucsKlAXAJdQQDs7j8w==","signatures":[{"sig":"MEUCIQCh5FEghc0pxpd03sgWENnriESSIZyTTdJ6AxvCUwxA5AIgTVBNwiodxUAinpUrhcZBWW9RhA82jK+7qtb1ZQFKoX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2907990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcp+e4CRA9TVsSAnZWagAA6EoP/RTE7hp3VnlE/B2MUl1U\n6CF2NjfVYuK/JaoOP932UtEeMekdvw+mMPMmv874cMIEcuIIukfQbbdKztni\nQQA64FgA3M5sdHvRSyt0moAgGmQDlGKSV2uoS3OMU7NpxEJnEMz+CC++m+H1\nz+5EY3c3QX0vMBNH/Vd6HDOkBHzKuhkidfFiT6ukM8i8dp52D919Stbex7On\nQykmKly1r02CpIQr/+9fXCsrjthB20XFtNmWkrH0j1a/2rKjjv3ij5S/6QAy\n77skyBMvZJD5C5LfbJYzitT8RfOE3MFv0XL3EGnMBTFKGVIzqPy3uTnNJkyN\nSp/WR14qHjdCV9XujhTrhW0WWFqGhTP04ELQpp9s7KEy1ALsOYxMF7sfXn8s\n6x+QMxiEy3zZpDP20aMs2xsHNJA7LvN8bXjHQARayA644xkva/j75Xmzo8hf\nr3GoY7dBpKdm3g0X+sA8WxhQgeAudbXe8t4icmeTLesDFnyepOWMxPIU4ozq\nc8X7Kk2Q33hM5v5BQpPm1HlOBImOOtVCTA+dBJSTE61yhQKgYiJ9iJvB84+k\nqFbYTnL5DOYqOP5V0AXaxoY1Mk8KH604MDKT28XQ3g+QQjJiGvzGNokGB/P0\neor9Vh8uQRPieYjQVfuyou3fmdGviy8py0njdgwRpPh1cXTuxMxsGWwFCqln\nAQwB\r\n=0e0F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.4_1554507704185_0.5027055662902096","host":"s3://npm-registry-packages"}},"0.2.9-beta.5":{"name":"aws-amplify-vue","version":"0.2.9-beta.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b0969ae2e306a8e31214dc131840ad314d2cea56","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.5.tgz","fileCount":78,"integrity":"sha512-4saw57KegeBkAk/eWjsg97otRlHpv2lue/nODsdmFof1H6rjkUp2iSfQqX5KdKDRxoq3I1UJIMsV70glQ5tl8g==","signatures":[{"sig":"MEQCIAXbZ8l1LcnWyXYSD8LbSulqjgf7Q0h2qX25d8jQUYwqAiB+FExj305Esp0d771vbRktsztLC5GBq9kgvEUGMjeJ7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2908222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqOV1CRA9TVsSAnZWagAAgioP/26MbRjovxSK2yMn0BmF\ngZuhZWUpO5CRwREcxZRoKSRrfZAgFG7lIxghMaA1g6Lh38YnhpXbs75QdPlE\n9xmLJfnYXwHh3aLcUind1veSTKKKiQV1WwdSBUR6YU65GyMe9yLF76TKT/DE\niwLFWkQwkt6LW6/wgb/jt7AxQiq6uK+t0t77/1j+Ezp8uuB6yoDmYCv0a9u6\noybhf8dkG6vdtNPFMszGLEmcWebgeJgLRv5i0KIxQ9r8KNGYgVIt8x7KUBSp\niKiehQv2xQQEMMeMqKAfW/L28o2XNwAmDpHw2L58uxmHKHOkNPPaavAHC0AA\ndfhCpvwBG3woCcWylmf+OSwcF7j6w33QpSe45tmHHLgAZfBgTkZKYwQ5iP+A\n6L/a0RuXsobdgeB+xXHBb/N0nC95YlqI7/EH5depQsQZRFfkT0rYXdSOHQWn\ngxRmBl7kwcDULZSc11usbqMWwwFImfLcL43XCymMw/MKtZxRMMcdXQ/5SSEf\neBySmRVPEVFFDojoWgMI+6U5kDQD5RQ/b9HtFB3ah0S7vLYR40QmJH1PfU+e\nAnk8vUeHMsjHf4K6SEWoJLnnlaiW+5p4pVMzyTNYrWbJvjYgBPR8efNY0gKI\n9Mfop683PXQDs+iuKOfzifY2z6ZHabRU/8MQFCpKL/r2+6b4NtiHEAz1zInM\noivO\r\n=UJVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.5_1554572660422_0.40944197338415833","host":"s3://npm-registry-packages"}},"0.2.9-beta.6":{"name":"aws-amplify-vue","version":"0.2.9-beta.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2cac7c985ad7565d1cbcb9aea4c79436721300f6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.6.tgz","fileCount":78,"integrity":"sha512-iS8RlGPf7ot6ogtdSjvYu7h00fs3IpjgLVHaaZ/JHuGyrf4MLjN5C/xtjNdpDtzBH4CHbXNh9/HWNUqYnQLvDw==","signatures":[{"sig":"MEUCIQD6+HfHKFh+G94D7UZbfIc5sHu4uUkzWJUYRzF5VRAYfgIgeGW0qHX/lBUjDNiCv4+2JVtdVE50Pf7EuAtkNep77Qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2908454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqO6pCRA9TVsSAnZWagAAJkIP/24RhdGZ0aGM7Cg03qGI\nW9tQuPMsf+8cEZ9pwjcJ7hJAD8A8ho5btXEiAhQII/wEtgYDFl+fYuIRbnpV\nyuWAvN38nPLAUNupmVzblF/1cUzqa8uCL2bypDh+r90GvYQe1op7f7ep5DFL\neNj+WQcTG2oHOz1GZlLOq+rtfjBJv9Jx5CLzmqNTU4cu6wON0Yn/98pkLDnK\nLmH3eSqgQqoGq5Yv514WtYakVPNhpKLoxbZ2jdsWWx2yhUV3tA6ID4dDUWHF\ncEyg6OEjt5TYs+a4XJHG/vsBEQ8SZnWMS9TWHfz5/7fjll8XagScL60ak90F\nB2inu3ya6kecS2r4/9yRAeghAG1gPhk1nyuMK4tC+PE2usXvoZX0BmBxZg75\nXN4DL4fnku6GUFyN4nVaJDBBlosn4joiK1kpGrZP12F5duX7D6LCKVQvkopp\nD10X4+4qVVh/TsNsEYyFVUu76uqiRfAv4UC14WYHCva++9s5bgVq7VuxQAFC\nUDYrQaSTukLoOyqcBKq9/tabS0f2MKFLMEsHVfMkU4Q0Hzu7YIpTd8xels4w\nfUjV8i4GO46rxtyl3Z+CPmIcmssqoilwnKZtsb/B266zg5PvPNCflcbdu+AC\neATQ7y0pTiSWA7oqYrc+bgH1JSUp7NX0f+mxwOyJUXsl4lzQNRNHzNhGcbWE\nISfz\r\n=H7Oj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.6_1554575017304_0.47901086275157745","host":"s3://npm-registry-packages"}},"0.2.9-beta.7":{"name":"aws-amplify-vue","version":"0.2.9-beta.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0dff9716696e0e62f0ca66dc5cdfc7ed48bbfe27","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.7.tgz","fileCount":78,"integrity":"sha512-4vPidgs2Lh/S8MG8sD94JJQVjEhduY63owknjKbyjMtKqXHXLkpdRKRMDd8WDsFlBI9qq3uO9OHu+HAyNjxM3g==","signatures":[{"sig":"MEQCIDHHP8ZrDFTkxNsp9u6oqC7xmCNmT2n/k1N+mp/7ijh4AiAHGDi5GJ5mRmiWMTp/zQsjtI2xyMSmqFfTROiRk7WWsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2908686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqPORCRA9TVsSAnZWagAAEqAP/A5rXqoC5WD07pvrRz8s\ntLLqDARh3/deCo+CM0ZBa+lfLapYSGva9o3amTkLA2Co1aY/Zczi8JCf8qcm\nF0LYjToWt3LkkRTuEISckUD9Qxqp/MRrPI6z1FTkVuMT2lyTQPxr6U/QwHpY\nYaPMtIpmfE4+tOlxbdDQhtKmVfYnt9dfdl327dzQoZFeI8UQFZlYDR+dl0CX\nmDEpz0TIi58yZbIYJrR3Uas/tEjpHoph8fw5hfgb2FwUuKhb13mAuewAhNQY\n4RYQGDC966ybtFyXy+U/oSSOC8V/xm766lf5NoC5shbOnJA0MKJLsf1JYb9g\ncZJ5aIa7QkVf02IldU5fDcGjqbLkjL0L454AH6toM41W8TgxN9J2I2ZJlbQE\n8OpQRbMRtQTrEpbwuWWPnSlpBmEgyqUDar4zmEeWjMsW9wNxDStupbPM/dKH\nVKZfrhNDnmLJeLFNf77tBamWLvwiSaYSxiNvoeXSKgBiSsA7a/3U15BerxpG\nz9jrDy7ccbuHn+VzNjlJKXhbZyoP4IXu5LVdluU/ZgWHiUBQHghO3xzStqXR\noFVqZ2EQvbGZwlj87uLJ+E/7lH3tPbmx9S3eJp3IyF8Flo0QuJLSAMxKVJ7P\nOHNfdicytwB0UtNREdrzYvm+ISo5ucz25Qt184VdaiEa5zq6OADEXH9s8qlv\niJow\r\n=IjGh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.7_1554576272937_0.9907084460560607","host":"s3://npm-registry-packages"}},"0.2.9-beta.8":{"name":"aws-amplify-vue","version":"0.2.9-beta.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.9-beta.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"419e5613e387c0cb373930e0e2db6d1b4cee45f1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.9-beta.8.tgz","fileCount":78,"integrity":"sha512-Hu9gg2IO8B/8ZB3X34m/w7ur5stHbBt9t6BJ/rzj2HzeN3TV6ccfcd8ek8TsobSbg4mTMMPGTaDWv8DNv/P5UA==","signatures":[{"sig":"MEUCIQDOt4gUc+p4S2o84yNntLf79Bs3CPmfntQXh5Gt0BLxkQIgfp4IVGI/V6bZgiH6mXT96WHigRSsnZlF0PLtW29NuxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2908918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqQBrCRA9TVsSAnZWagAAkSQP/AyCDVevJBelAIwrFw7+\nWGnwRNyg1ptJs646AMC9+/UrALgJQ/yslBJz8vH5IhWX9J4uy67CSeceq2qR\nT+oSDxdsYFcYbN1U6hxkzPob//MY8k1fXcz3PJZTdeUJBFeGBU+ltniSiThh\nZS3eyjq5ohJ8aWQvKW3TK2GxGHdk7dfCZQMP50+uUcyj4lWenNM3GZbrPWjx\nMTZ+BF4f/vVOWizw2SGFVkVY+rskeM1pC+Tk9HHa0Lbd/6eNtY+Fz2pf62+v\nDkTmQdpfTDgRRLC5wAEUDrBTn8JKwhuTiRhA3TR2rW3ikkGedZJFwqW4Gcvb\nGVcTexv+CZAPxk4CnI0CBUcr5egLj75JAv+547m68TTfVHBh+lsWPwsWR8Nb\n8aAm6iUWm2PyJg9EpzN2HGAXgrBQACNonJVgxUYd4ivf28+G/1I4IL1KS0UA\n0rFs8l7ibMTi51EYwMql+gTU1fhQ7fhTbaRkRATYQw5KZpW71YjRFmXdsJXW\n/A0sGkKQE5ZJEmoN/JyM733hW0JDtUis8W16IbhUD9PyNsGj00b3Oo0Zte26\nRQ7inBClDhV5RGI3S4voTae8ehkZ7tsPcBfqXuFg8E0P6wpyLCb6DocwkTMv\n6CPew8oPKbiQaKQ/FZ0dHIKuweozmJ5ksu55WELyvK/mcsOnFwXMDQjqXXr3\nvTZ9\r\n=rFaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.9-beta.8_1554579562766_0.48684706306217995","host":"s3://npm-registry-packages"}},"0.2.10-unstable.0":{"name":"aws-amplify-vue","version":"0.2.10-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.10-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b37091eabfbf4fafe388366a8eecdab2b752cf41","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.10-unstable.0.tgz","fileCount":78,"integrity":"sha512-bfakw/UpirlM3kq1Blk89NL6FLpWlx6gMK+mP1hohnlgQJR1nvSXZFXmPnnzUCYfrfIjsVXXdAa8y8FpkB0nGw==","signatures":[{"sig":"MEUCIQDN0lXQ+CTMKV+Uc+Qo8H42D9c9oN+GTEM6/3EZfe7uDQIgTPR/+7B6IhzYhB/qc1C+h0oT3b5u62sCSaBISZNxtTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2885597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwzoyCRA9TVsSAnZWagAA2+UP/R3AxEjVCTvvVcphpaUy\nHnz9ZLiPgLYHzgzXgtokN/GhboGCwqwW2i8QzXPtmBcG8BpMRgjurI+WBhRR\nsQDrJnfroCTdVvYc2OTGXZY3KicpFrYdNkF49Db5DnjkfNaehZmC5HZYhr6m\nQABXQL8jwvlYF8YZGgtLq2dxePY1BIPIMjDRfFkJacRdqGy0Sr08ayn9pEE9\ng0C3b5932GjZZNNB+to2e7SxEi9bNx8Y99KPAqIlg+FGmz88pw+pHI5KV6kt\nwl2LuvND8ZCsFFoZihTtnYXR8MHm24K9Mp7gZ8r0X+ykGCtEF47wy01HOfNS\ngiUsLjgAKcsuTa1dBMANgjCBROTRwjM88X7ECFnhzkoZSsgZRkhiiCdbRH5O\nwONo8swZVBu6psn3Mku/do5xhX7Jk/qm2MbgqI+ybsw+WDVLxmpjnryqLG6Q\n9le1OmTcMizlgsmQklyZmSIqc8S7kZiQb2EaMkb7gcSs//5TAHxxNYtN87fm\nwDXyOSjvojYfk8pOKzFDNykT4DF3KwR/+L9dLg6QDnHK/i1JbyEE+mWeVt2M\n5rQkbBcNQesxVljtaBeB85nObK+JUYDx/0pstE9EHSjtwY10CThlCrqtQWN1\nj8hfzYz5g8t5zCc4c1kTI+5iq3pm+L/pskcFqFGUMxN2miPHqZqiqITXRc/o\nI//f\r\n=8v5K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.10-unstable.0_1556298290023_0.21410046858062337","host":"s3://npm-registry-packages"}},"0.2.10-unstable.1":{"name":"aws-amplify-vue","version":"0.2.10-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.10-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"393f16bdc8a6cc935231b49a4a63acf6b0d9c358","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.10-unstable.1.tgz","fileCount":78,"integrity":"sha512-zkXtb9kaYLMmUFEOzjRz1+4592B+oGDdzu3bbaHCXb18eAE9VBDhc6JOgBBf8DrSjXyAcRLb9qfTO6puOX3xSg==","signatures":[{"sig":"MEUCIH/LiXLqZLMTfeIk8az8gNtltT36Cx5NsEir2jHvSKvSAiEApwTmvlKgM0QuE/y8F35l/5OBE1LEhZ5WBLYY5yq0QZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3306433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcw3W8CRA9TVsSAnZWagAAyLcP/AzCJ3q6obA2d5gMKBfT\nZU3dcDepSmZBpXKL5cmys2plQ9l14E1fi/teEi1GtzEJL4a/0MrGu1Qiw2ad\nRgebGZVr4kuzfk7o/w9Ugc5cU8oDk8IpNgqSrJ4e4q4+LBt4fXLXf+qnTSSO\nVdChEvoD5Cd8erQCKApw0C12IifsNetvfxOBaUVewOvnJydSl7RNfhKLDPmG\n+7n5RniwM8Ic3mPtHWe4VRFDD2i2/as2u4umCggjwFwn5ZO7fsTavKN+CcFi\nR1o/jiyzxOVXcc4Mv5/Izov9MB9pfO4EEPkbJNQy2Vx3w4C9bNwbsZo5lBaK\ni7Nbar/LdPviA7VViawc72vf0x7nQeemoTk0ARdrVrfSbXtWmxbicT/gKf0c\nI4HjJyLgG9w1vSNoEr8C9uxTvVGzbE33yznzYr/gkxjFffqwMhAv6QFzlw+l\nZB9vy3KMneyut/HthrTRJxnpk1u9u+2Z0bmcOFZRfKsmcLZmsvo3HbZ/Cm/o\nMHBNMm1OzgYcBCnLsfHj4TRvf4/GRVMO2ieMed07rhEmPgqL8yyVGOKGw3fm\nW/7c3XWMwgYDXextkEK26z3ZHclhLf9L4q6PNPee63/pOjs4SXCOIuIJwc4v\n7Kqy/gO83HNCXWdX8dswQRI/RjmMb7s91lxe+UMWVS2Q2r9Gq12vQ+kP2iri\n2da+\r\n=h6YM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.10-unstable.1_1556313531297_0.530804347460383","host":"s3://npm-registry-packages"}},"0.2.10":{"name":"aws-amplify-vue","version":"0.2.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2e7a5c6cb643eaf45220dadf6af432d93ab69a74","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.10.tgz","fileCount":78,"integrity":"sha512-0kDNlfPiPqhY/iyRC3erVfwSY/VO5IXbLVPyakCBuKB4pfje3cCGjPfPJAim/bhOpcEkiYWMfpV73xH9EG3obg==","signatures":[{"sig":"MEUCIQDgwTmr943NzkROi0A/mSFp3NfLE2/U5SJqeFf99sDligIgdCJHz/DcuDQy6D5aFFozNJqnB5jnyjBWZPY3PsUEAL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3306640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0INvCRA9TVsSAnZWagAAQjkP/AudgyP+7LNy5qK4s7d2\nuGllJVNDAjyNE5V1F+IoLuX+SI/ZRpsJQHFsjknSKPYPvdtqrIPx8GcJ23rt\n6EOfpAWfRrhwUptYp3BpThSa1oyK9+tGaO/mrYckju/fuTjBJEq/FMuYurWp\nmUlfGuNwaqvyiqS0EIcwPihlLxELDNwz5Vp+9bsfz66pllkmC+Y50WP66IBS\n8shJIBXa35ZGY2u7+7sXIBWb5iKbLBvuyMGHGn3obP+JFJpIEUTKT5hPIaRn\nDFyo6BIChw0qjsz7NPbkDnCYUlr2dm0XBtIE5FTderTLonF8dfTMDuGx56Am\npLgOQAOnfd9vYRm4DIeRMfBPNABk6yVzpiFogXDaWvk1Ifs1dCmQyXJ3Gnto\nh24jFnJjQB3FibvwhkUKzy2aVl5G69fXYkSTPFMYjRBwYA8Mjdj/75zvsSek\nK8SIVxo3i9BBr989yj8TlpBvVLS/K1RVVUdoRApaASoxUCa/QU5sdE5JMnuX\nwF4H5MIQpwUCeBN4/OPYZQpH3Mh+SiTZetwu7CYw9/BknEO2f1sCJD2AlDQX\nSu5tlR63G0StWHVuztZNFx4AUo7jrTeN3g3Fknhud+QZUfVh7J0s45laq8tD\ncvLFgS23EcEJBULorMc0Tj13eDEj8l+C0Wefz0TnFqGLxKkIUBykFzQDjPIr\n173v\r\n=lrYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.10_1557169006144_0.12933309027278495","host":"s3://npm-registry-packages"}},"0.2.11-unstable.0":{"name":"aws-amplify-vue","version":"0.2.11-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.11-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8b9b8f3ffe62faef339a6f946fb2fff305f675b8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.11-unstable.0.tgz","fileCount":78,"integrity":"sha512-D1KK/nJ4RulpaYO/ZS0pG//zqU7V3yE9gzYyntMmY7fOhmZFedxI5oJdeDPxbm8myIAw1lMy65VVJd4jte2oEg==","signatures":[{"sig":"MEUCIATdIOStdqBLdAZbeQl9Qfxc+LdPat0RMpv36i5AezpoAiEAk3XdKyqQ6ipI2SpYiLhoWBdQCAL5l/h/7VrNMgKdj5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3307171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1Ll1CRA9TVsSAnZWagAAEaoP/0lFF0IjmRvHqNKeH3SJ\nhAa2rBY0luBTSFkJl8CEgxxOPnNvbn2/ICd/CvrwoI8PlKj4SZNS3mOGXSST\n1308UtypATBxyCqzIFhRhMZD6u9zx4I8eQeo2pH3xq/F/l7drzUL0e9U6JYv\nchEjC2/vnWw8AEXbmDZFqGhp524s+WmMDjSLRBfNp85uSLYkAQWE8IqRhuQ+\nyTP3R5lV0U4HgAdjgaIIvRlxNL2+A4VDwd1cXh3UiTjn444+m1+QW0nwAZdK\nMq3kpCEW2bTchabdEwO1Ks/eaJ7K4JbbO0O5nL5EUHIRCk6Afk8aQJVTcdvb\nq3z9NHof2mbgbDLoiSl8+DHbx4pfyGY5BKzztczy3S56E102N6KCZqxtamZE\nIWUQUe3g2LEDoaeBQ1miSIqd2Kv8fWHQF4W91M+SGH+8RNZNY16BNp+3yssN\nJvUc3/ZwTCc69x4E34oT1DCod4rbhRYahF0tmd2BrfXu8Fe/NDgXiQIKIaIb\nsRM3ip4QVlmfpGMd0DKzPT7PSK+t6pPRgvkHS54jc4MNBXi4LHy6SPqZUrYu\nrH10CZfNWJZNc9h1A10TCAZEMAXi57vBWCkehGXLKTGThiivv84eBWwEuC8G\nNn2/HmCuSOvS/Z2XyYLvZRABrWw+eh22WDxf41kBwAXKUaxtzlUJLKNNlH/1\n2OSh\r\n=O9Uv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.11-unstable.0_1557444980290_0.666616749385337","host":"s3://npm-registry-packages"}},"0.2.11-unstable.1":{"name":"aws-amplify-vue","version":"0.2.11-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.11-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9d7ef821cae6a8d367fcf5803ada31a12b12870c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.11-unstable.1.tgz","fileCount":79,"integrity":"sha512-rkzIUobIQ0PyWc+BmF5iqrdcd7u25IMqJFCLsbEJf0MyInLColMkiTDjt4QZZAcWVjlPrGfjb0ofuXujSxJlvQ==","signatures":[{"sig":"MEUCIQCu2UKmgA797I7oLMn6pW8sZW1rMKke7BSs2hSyvX/PzwIge/rCUE0R2ZF/U4f7kR7CN/d2O1yLTo3/9kmkCHOFn+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3393787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2fqoCRA9TVsSAnZWagAAb9EP/Aqz/vHt0L5TGZKRj87S\nOIiuGGOft3xk+2INiTmMABuJLQ46PpRa+aimL2qTnbxdhyuWEZYp9HwXCqyJ\nE3IHK1zpaaT0XuY3Ioru1zC9nybmDR2zN0EKeuYoCqwF5SY4X6ptLjp21dOL\ng8NPYMQRicpe9JJFKhdQv+ygJBiVj9K4vx8em+ntF5zCC3WyUtfkAuu6MTQv\nkoTMeafT4lcfBGR69sTZQ2NsdifqMbR1nP5t1Z8uyH7DkpGyvHMZUg93LrXu\nCgc5RU9VJ9SeOerByrN0xpCxBjZq9v+pb4fKTKMehMljI2vfkmjY9jekemNa\n/rMAoqQwlTAvsse5Fx+ig0SkIB/BlC2GM5yBAKbYMi9IudOAtLghy/9moE4w\nsRDZahMusfDfEuVC9XHj8A/zVNGm+KER3Wblvkbu8b7B3pjPyNRKAYvaIu5D\ntbdkXpG16yTFxBS6JfdLhTcwhOFxwOckt+tDVIJ8bMS6/EZRDoupWBXxGVyg\nCJ+XaPmDBXQIx7xTIq68ptrqJ60MKBe5eX+Uf+roOBI0Gby9p/OW1W7UkB4u\nV1ByjQ0AIKlIcrQY/Pwhnf857b3MBIg7V1g+orTRa5jP0PmOckcLUSxZGpec\nSbBsZUCTKoRK6OJq1qO1NImf4oHjyWGSJ0AK0U0WBzc5CIqtJuNf9euyCsau\nDL5v\r\n=ix9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.11-unstable.1_1557789351402_0.09890848385163875","host":"s3://npm-registry-packages"}},"0.2.11":{"name":"aws-amplify-vue","version":"0.2.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"31e2e430a47dba639e6763480a9f494e638f13db","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.11.tgz","fileCount":79,"integrity":"sha512-V777dHjwbZ/dB+wZ/MbU13aUZ9KuGfuZ7mRDUtwZK7nSN+kaO5kx/N72k96U3G5ozrZE8E1Hx26gWbaMqn/IqQ==","signatures":[{"sig":"MEYCIQD3yMCKqUx5K9SiKXNC0ajBtuMYcUpfnykpCpStwFBRPAIhAMJMmN8fNe3qU4/HHz8SbVArIqZGODhGsWtl3K6302Zl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3393994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2xc0CRA9TVsSAnZWagAAc94P/0CUPPXD5jiJAV8MBDkc\ntF2A2043CC4/+XNP9MBA03tl78tP6FRo5Jvfwa8UCVOQTMr5YSHdDjgjBLnS\nLm8gbkMSSPfu248wlH/gMfaMp6DF3cuQ3LF4X9cxOe09qvajb4eXnCmoPJfj\nlwdUIhHJcuSMhbLjm9rH+jH985DhW1owJ8hKQQ6DafgSxl8/+wS9ZcTn9Xuc\nUj6tdgbEGOnU60q1VHl9fPzksgpKKA15Qu2zM7r7OgZlGyYk2p7hiRswosBB\n9eRjwYa6BMCYZeVhSAIlYu5g4CGLRbJzfnmx9dZdM5A1gE7B5khBUYdX9TO1\nxYl3eSVKmE6ApD9GcgM51N3Ukc/su4F0i972aSTCC8OebIY4/zsYiryDG4l+\n8HZ6aTJqyU0yQzGEUOXo7vOClvcx6JCSb+i/P83FiPccjwgB2/wrof7DH+4V\no7tsnwyZJFy5dmPdJPUix/DYof1QycQRMelLvyokABBAVYIbnyRu0aYizL4Y\nRu+cbTLfF4glw467+uwJc5XvxGHvdeYjGFGeABoLBUKd+HIRwwrhLVoVJQr9\nwCvfwVaHP3jRAAMr0jpT/Z1rldYhhl3eN4AEX6km/zLbpCuEkOndHZwLJGFh\nksE1+HnwXnX/r8cHL0KqwgoTyvs1Obwr7fYnSWHTvnzOYpdgJgPMe62VG3n/\nm4lT\r\n=3CaE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.11_1557862195539_0.22678366885969803","host":"s3://npm-registry-packages"}},"0.2.12-beta.0":{"name":"aws-amplify-vue","version":"0.2.12-beta.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.12-beta.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4e22888b1e26aba7021d67c7cda58320d400da77","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.12-beta.0.tgz","fileCount":89,"integrity":"sha512-5hyFR9K6UHmTZ2mrw0mdaaUCoF+PWflf4HVlfHdj6fwT7CRZ60VdfyiW+OGx+MOL7vTosX0yNAfixhrhoVzhKg==","signatures":[{"sig":"MEYCIQDBssc9yKEzA/cOrtkD5GHkJDJEt+EsgaZ4pCxJnG+UfQIhALByws/7TfhJFLGxC8kjIedmFx3wJCbBm9n9NcHwSCU2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3557689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3aAdCRA9TVsSAnZWagAA8YkP/1AhNxmrMXRiYZoFYD3w\nakBkdmjuxC0DR6h//eKbNt/JyRapuC9iL+spSbjBefZb5D/rjPOzTyo4ZihV\n8sQs3DPmJFpnULkstbfZQpGBJ2cirpTBN8X2AzwKWHpbnf+bmI3syVN9EEH3\nZg+30/2XCSmhqYItCjJ8x/t94oyxEAQkTSbJMSakgzSQLZSXrMt6LDjFU1hB\nX+FVYrYVFDDsdi2ddfO6gLSoeaZ3wiXjWxDojC9skhgAcm4NPeqcYHhi3WEj\nN8kZZRX0oAhpFCDIXqRKs9hh/WJJjuN+3nYyhlYqJuvH211s2VDTC5IS4bF0\njJbskYyDL0DFOn4M8K7nJXqPrx05a1kuOvw0z6kjifnZ8Za8er3n2qV+L5xK\n6SfBA723xBzBm42w66SpTd8K5Ew8It04hpfmnn/B1qXa2RDCwKhQhvmtTVAj\n2Mjn3rqYBrXXz52m7l8RA9kMAJCCue/VWK7+lk7cLufZmjjP34aIm2mAF4jd\nBbPff452fCT/ljetRBs14bPUCmHpekjyc2O6htN4M6KBsaoaHAZKylUVni8k\n7J4pX95VC8yu4v9CYiRMVqRfgtKJn/OP3i2V7QwLrrfKAeW67nxgvrZRb1j6\nmFQaGkgAXv0fekOaV7no0NMQkbx/qZ4c2wV6jyV710TDig1HTOVlh6RlA4R6\nj9XP\r\n=7jF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"powerful23","email":"wenzhuo235@gmail.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.12-beta.0_1558028316391_0.6192360813224982","host":"s3://npm-registry-packages"}},"0.2.12-unstable.0":{"name":"aws-amplify-vue","version":"0.2.12-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.12-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1aaea0e89f401f7a673d23f08b9f876c582f1608","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.12-unstable.0.tgz","fileCount":85,"integrity":"sha512-l1HMktl/71yKzjI7pWtIW+FxvCvm5qc2nR4rjeOJiXymBoBDLlMt5+i2LpHsLXbGo2FoOTR8S75Xqn6+4GJP0Q==","signatures":[{"sig":"MEQCIDFb8w8sfZMNdZO+Cg8WPEn0y391RyiAXOsv+sg5JDKRAiBhvOUFFsHMUKlK9109IDwpv4NQyOGL/yv4tK9HmC5Nbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3516096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6ClACRA9TVsSAnZWagAAyfMP/R3950TaekzuDXm2Y3hU\nsohh3+5r6fenXCHyt9muprGgY6IjoiWmaOOMmU5P4FzlvGYSwL+MIzG/kekK\nosf6dgkEhG5Vi2MrbeW2mqQUx9u53SuGDUIEVbU8CCX7aA4KsYbkyjfNCSHm\nDdqVJa8jF9WqJbuomnTerW8LH9VDZeNOTCbbd+FxE1MKt5ZtC5pkGZ9a6Xpk\ngA/DFjspe2hfzGMoB/WTnS2UjyXex5xWxzQRxw6Z8DPPPcAgHLK+mHUNxH/q\nz2gpkQ5swDQ+eYAholVKpGTc3/cVYUSnORrcY5pl1hf/omow4Wy9gSIOVqNb\niN7x6jlQeKARchh6FrOnM58v4y8XtCG5I7d+4Q7FMGaB5yL86dgiA5yZdLEK\nsKo1JeV3LzWKXwde+5jrw/cz4Bn+udbP8itsE975A5VIiN/cX90XH8tZUE5T\nzFEa0kZPLuWiSgkPAbIwmwVrSaYdl/bLwKi81PED0uFioJfIZfyJzNA6rX/4\nLQXAi9y/1nRJEKltljl+dLKZpcCfwBlAUhqrUyh86MVoENMx3P4UAdXoV8wv\nMhanJ/B6CG3NHfkYFdDesu+GBY1KcRYsRnKBtt3yG5wBR2hJkDhs10mZ/hV6\nAGErDwzjMG9LILiRrOD1LYrKY1omLMbHdMqH0X1+u39t1novBQ80yfSKHgrC\n6H/i\r\n=plkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.12-unstable.0_1558718784138_0.8678858081909127","host":"s3://npm-registry-packages"}},"0.2.12-unstable.1":{"name":"aws-amplify-vue","version":"0.2.12-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.12-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3f4e815112907009457f044fa82d17855d02b2b5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.12-unstable.1.tgz","fileCount":85,"integrity":"sha512-PwlzVF8+fsAyXJc+KKX2Ox1MmzNeMIQw1iwFsi/yCNgnPdjH8cTWx3c/0vel1ABNnt2eJexaXH2FiBPO42iDpQ==","signatures":[{"sig":"MEQCIDFVHAwaAiijV5Jtz0b6+KfBFg6JbJ7m1UMHXx/wz4LMAiBcAF0VgYi4M02lqjfmTSVFSRrpEotbiYQu9f/9WhW7Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3516510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6FuyCRA9TVsSAnZWagAAWRgQAJSefgS0uuZ5LAAaydMA\nJDo15Ri72yQdelcKZX8PWC5C78Dnx1kFxl/hUjibwUCtqxQVni+uMAgVWM1e\nAUVLopqlM3rJ+r8nE7YVJwPb+eRqZf6KfdROp3TkJUAaoYVMCpjesuC+utCM\nKjlg9L4/i1vC+1/jNeAspKVIf5h5/2+e/qnlAWCMefqAyuv6zFAiLzaEMiFm\nTXC2RR04R6JE8RmiGr+v5jTlWw/4hJTZ6yjU00Sb5kTOCeY2RLyDDFjvpAGm\n3fd9ifC41XZluSlLqqdzW9lcdDTwX3jJC1vOjT8E+Xlu1OZfDxquJyJIcobq\nD+pcUZ3TjI8yk4YRPUl/XmkNMpm7ImJuNIrdbPkeMvwQ2HM+BX48OnM5eEbW\nzAvbH9FpLcquJMXF36MURpjlF7FjpUjVeOCGP7+0v7QrcWRatKw7D8Nl8YGU\nQhluszu/Sghp/sQn2gIzoIYI9GciFJjUx7+T28YFN1g/aFdhiKuj4ge/zGUH\n4T0/WVxp34LrzeMrUPeyLyZ4HrI5ewiwqDPuT/4m7pOGoBGlOZTBu4nzh8PB\nUAcVmIosbbxycNWl8T/QnLjA+ZRKHOHbQGQCWzNSqDsc/g/oreYo5EdMXcvO\nFjnSBRxCiriHPLKfxAJH+ymeZc/uAfNZh3U+QzkiUwDcySziwR40wxdtyeKr\nT122\r\n=7yoS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.12-unstable.1_1558731697783_0.7652991538338181","host":"s3://npm-registry-packages"}},"0.2.12-unstable.2":{"name":"aws-amplify-vue","version":"0.2.12-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.12-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"95915c1bd33954aeb8baefb7a97a23782ea469e5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.12-unstable.2.tgz","fileCount":85,"integrity":"sha512-XHx02e/aQ1eq8tvgpyzvyzJlXckUgDz8Xrzu6pHXDYb1/YNrgIzde7j32f2cCtkb7vRo+5CV56nVx7F9TPasBQ==","signatures":[{"sig":"MEUCIEIzs7/2KIaButAoAhjIDDqirjqC9jztq9MJ+T1GTT8nAiEApCQvPFGn1QWlTXI4uIsPMKvGLXbWruhuzpWIdbKJcWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3516478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8anICRA9TVsSAnZWagAASd4P/jQA47AX69VKIpLOLKzM\nfkZl8g6ZOG7xxMPyjrNtLgpoVXH2BZXt8T9jMQjqI6hlGM+BBrk4DTZlVqC0\nhwhPN8EI9aL5GY3Gq/HGKft4231Eban8Vg9WNlZdCbZSsMiTEhcBMryeTS0O\nZX0/O0Pe8ZZ1yJPZqwVUWD4236bNpQzXANYgq3Hw7KRp5zM39FRLWcHii9mk\n974if6QzBdd5Fd9d33cmwsnV5vUF/fyl0uT8M5EikJxW7N709+sLlhVmJ7W9\nKRcNFMkfyCfypW+/pUWGeLWyyuqmq7JogsuzIVsl8QD4WFhJIixcceURUgjK\niUMmdbdpbnj8XMNkc6AFAzkYk25i9SWPVukW0ZWtP50wbLgpvEjDHxflJDMP\nQzg6WZFjb4sr7A+HRuSVUi65kD1O+gZ42FeBKRVu3YiANFlvAU7qJu7rswhs\npCH1UNtuDIIhOhcQzMK11/XyPCwA2Ac4eWVi4b77DriOP/ooEfJe57GEvhgm\nYE4HR9WFmjuAt2xzYZifazGGsPrFkDSKPxE876h/ajvFV18sBjT3uzyCeNQ+\nTntmqylL+Us0q/qpjam0c+PF6AwVGmj2wtIXrxoNBuUHprlWiy/EaMu8C9ok\nxkniqYhgVUEgjqTc9KF+T4CCsGTJX22meO2+pNjtHqAFRBS3iRS6VjEP+fF/\nl8W3\r\n=IAXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.12-unstable.2_1559341512206_0.6734866671718189","host":"s3://npm-registry-packages"}},"0.2.12-unstable.3":{"name":"aws-amplify-vue","version":"0.2.12-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.12-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a0715bf71c615e89daee2a2dcfd5ae36f411284f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.12-unstable.3.tgz","fileCount":85,"integrity":"sha512-k1lAC+dsu7XsYJUfH666XEQALja4P+z2r8LHZnZ/LCs+jecE4GISnt95M0NaFWX9NW0tzfgf/ycWnJ227mH2+g==","signatures":[{"sig":"MEUCIQCHwu5sD1pvZLCnbVOGT6RZQRSgRLI5gHkoqPYlriPsJgIgfGUmDnI9Aqo1v4PGp2Ln54HgJ9VoddUmWyljOK1CxyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3521328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+adaCRA9TVsSAnZWagAAMMoP/RoBrfkLw5fiPAAYcuPW\nygwrVpKXCI+6JknNiTQiUhqw1U1YHV0ElI1j0z/XtYfk7ICyEInNLud3FVUJ\nRcVnFsNQjalce8Wd53CzbrMViRGGxIdD9VYEIMX9kKZtWXC+Xmosu6kibGY5\ni7lmPPZWUh9kn9OmkIPSUSgtXfyA/oeZPJgUl10dEZcm+z/tHyN+GSwSe+nl\nedVJVVlhoYI+PE8JBSRZnBUbPQscaA7EhpGM5YBcjGUUyyNC5uNpHRlofVjj\nmmvS25xx6XYzJM6kqtBwXzI3kL5dvazIsgBfQ2S0YXEoPHguYP+xBGwu18qw\nEbzDSJww+SjC1R7+ZmJ67svA5S0y8Q7cebczfOFNAyEzfoHeacs7p5fqfUzL\nZ5FhzBCVyA9mSVRuA1u+nxkm9pi+Dqphre8mISm/zEHEq1GrbDIpop5Ezulb\nxaxOQ8Dq4uTTFxx557W8lomQ9fovaAwLjith4gvkGB/hJRs78BbaQYPvoAWZ\nMnuJsHRtB8aUDTrfLC/HPVcXnCpMIIryIvJGHwz86v5An9CoESTCeNBCFsCz\nXz1q5U6YKBJ941HfsTOoxiDIAH8ZbpoKkgHhMeLeHuun6UZxA/blg8/ZtWIC\n0WSakuwEBOLpsnCHUYu+mkjRlC2rkT4JOMxYcAOwJfXQK81LrUASZ36POsFT\nbaW5\r\n=bTto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.12-unstable.3_1559865177471_0.38835030057559905","host":"s3://npm-registry-packages"}},"0.2.12":{"name":"aws-amplify-vue","version":"0.2.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.12","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0bed12eab7b91f579352907c4f53f33502cb22c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.12.tgz","fileCount":85,"integrity":"sha512-UIxtJZ8EhJzoDS7+Z4vrsc20MQJO8KixoZWMAVUr3ae1atS7S+qXbU2nygWn0L3xv3k3AYD1C1+YpkEy4tyITg==","signatures":[{"sig":"MEQCIASzJ2nxB3jaz93UF/grBnupKDHr5Ai8wbDvuG6Esiz6AiA5uXQpXJITw/7x114PfROVSYla7NYznWwOeW2VE/H41A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3521535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdB/TBCRA9TVsSAnZWagAAvIAP+gJLUdFUjE4wTUyhBS5g\nQplbPveLR6glHp+lvJ16Fk55NvMbY3DcfazxTfgc4VTZ996Ed7OqjMPe0a5O\nbTHEnr4Cm14s/fXB21fGxX6sM8nlOpGEABT+EVjZPM96Q0SjMDsbBRsoa9Kn\nB7OL6Yem7ocLuHC9r88rwRrW7WyfJlhsycoOHdG/8VpuuMJvVSY1B8i2QEhw\nRrCleJEZNhNcTLIoTg42N/V5Q3FMZGJ5icjj3AcQas4yWkPto4axhtLUrKxO\nZYcIu4fQuhusbraDvLLBvHSD7KCs0SnuwTSCxVSnexRkFNCpiZPP7IboCyOp\n36wdeqlybfwUa5VmNyft9s3vcfJHtCogbfkqTR8RwbPETReTWzCmLN0Ovepu\niFC+f+unCeSVtWw81DdQcBFsK9qKm0ZpbWPbnigJbzzzU80N4rw+j2Ir5hHQ\nl1oZPHwE/SCt4vAgOw3WS4MR1U1P/7tlYOd0I+Pv86MXOhrNBVHbvrChH5vO\nqvK0YbHzLCa07eJgsHFs4/6moNSrICO8jqsaCNzdkwNe+LiwkAC58OwTXcY8\n9UhVrxSM4/dnv2822IzPhrc69ip4Ic5TKl29yDBwm/vDryVMawHAa+tBf6oz\nJ+9MQ8bqWbsxQEYxjovSivc9slACKIbKanJ/r8KKrSuBCLZlE1Svv8Vy31tf\nOzGs\r\n=mZuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.12_1560802496885_0.44768397264441817","host":"s3://npm-registry-packages"}},"0.2.13-unstable.0":{"name":"aws-amplify-vue","version":"0.2.13-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.13-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3e6e83f0250ca7ce90d1c4dcc6457ea368c59ab1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.13-unstable.0.tgz","fileCount":85,"integrity":"sha512-ZBT+75GQ0moEcMYhITlPk808H/StJLvxZCH2eZbw6+tSP8xPv0vua/DYABSHlYM5WAh9/87YQinxnx+foz4Uxg==","signatures":[{"sig":"MEYCIQDQ43ftUSS2b0b6cg/SWKe5DcMEJxHrqJlDhOUOh2GkWAIhAP+Id1uni8pgMx1Hm7nwlSW0B4Hbu/2+Mx/KDsuYIzyl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3531230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJN/qCRA9TVsSAnZWagAA/EoP/06GLEo0qsk0DmTTSWiX\nFknOVIO8LPHCUPjfvIGIGbJxg3jYRWKVqPEWk0OVVCcvU1F9zX0fCSp+UFrz\n8vWETjoxPgaHs/DnpNtsoQZZAFimHo/CsecbBrGQy6Ksm0mIvd//g/HayQH8\neqIg/mXU8ViW0AUpYF4H8+04Q+K4oRP1YrRP0N9ClMMxRW74tfiyQ3k73I4y\nU8fo+kuvbSkRaKmnCsW4RV67Zfo+klY2Xq3lcaUpoYPoSEIlJ+qzZuPvqzYo\nZRIfhN3RHfFBS/PrscrKvov3lHGMCYaDqMy5TppEWXarHIJUTqJSeLjlGZ0z\nztov3htRtqisWBJNZ4AA1GHK1sKMn490LCY2ExQuXOnwJEgz86h/67C/eLND\n1RrAb8z0bUIPBRD2JZ90BmFYnDVISc/osRmUxxRZI/ZUUFMULJqB2RfCXZTh\nzCT/bY5/zEp3WeYKzO3pKcbn0856oSyfHWIcBLv4WTeZii98YSXiUDgBZcWI\nBX/Nd2I3pbA3BP/1bAJiZGzsAAA6oqdoipUnZYSdMRqGfrMsdBtVhkmhZ9zN\nWzzRqW8DbJfxzeTIo0m58hwug0QMZYacoAkNbLp5qKuJOKgeenCagneNjh/G\nTefs6mRqEcYScJqAtOgmTrsqayHoHs24ZSjH8M3fxgF/PpLKiPU7PGHUVuHV\nWlRk\r\n=6PQr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"./node_modules/.bin/vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"licenseText":"                                 Apache License\n                           Version 2.0, January 2004\n                        http://www.apache.org/licenses/\n\n   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n   1. Definitions.\n\n      \"License\" shall mean the terms and conditions for use, reproduction,\n      and distribution as defined by Sections 1 through 9 of this document.\n\n      \"Licensor\" shall mean the copyright owner or entity authorized by\n      the copyright owner that is granting the License.\n\n      \"Legal Entity\" shall mean the union of the acting entity and all\n      other entities that control, are controlled by, or are under common\n      control with that entity. For the purposes of this definition,\n      \"control\" means (i) the power, direct or indirect, to cause the\n      direction or management of such entity, whether by contract or\n      otherwise, or (ii) ownership of fifty percent (50%) or more of the\n      outstanding shares, or (iii) beneficial ownership of such entity.\n\n      \"You\" (or \"Your\") shall mean an individual or Legal Entity\n      exercising permissions granted by this License.\n\n      \"Source\" form shall mean the preferred form for making modifications,\n      including but not limited to software source code, documentation\n      source, and configuration files.\n\n      \"Object\" form shall mean any form resulting from mechanical\n      transformation or translation of a Source form, including but\n      not limited to compiled object code, generated documentation,\n      and conversions to other media types.\n\n      \"Work\" shall mean the work of authorship, whether in Source or\n      Object form, made available under the License, as indicated by a\n      copyright notice that is included in or attached to the work\n      (an example is provided in the Appendix below).\n\n      \"Derivative Works\" shall mean any work, whether in Source or Object\n      form, that is based on (or derived from) the Work and for which the\n      editorial revisions, annotations, elaborations, or other modifications\n      represent, as a whole, an original work of authorship. For the purposes\n      of this License, Derivative Works shall not include works that remain\n      separable from, or merely link (or bind by name) to the interfaces of,\n      the Work and Derivative Works thereof.\n\n      \"Contribution\" shall mean any work of authorship, including\n      the original version of the Work and any modifications or additions\n      to that Work or Derivative Works thereof, that is intentionally\n      submitted to Licensor for inclusion in the Work by the copyright owner\n      or by an individual or Legal Entity authorized to submit on behalf of\n      the copyright owner. For the purposes of this definition, \"submitted\"\n      means any form of electronic, verbal, or written communication sent\n      to the Licensor or its representatives, including but not limited to\n      communication on electronic mailing lists, source code control systems,\n      and issue tracking systems that are managed by, or on behalf of, the\n      Licensor for the purpose of discussing and improving the Work, but\n      excluding communication that is conspicuously marked or otherwise\n      designated in writing by the copyright owner as \"Not a Contribution.\"\n\n      \"Contributor\" shall mean Licensor and any individual or Legal Entity\n      on behalf of whom a Contribution has been received by Licensor and\n      subsequently incorporated within the Work.\n\n   2. Grant of Copyright License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      copyright license to reproduce, prepare Derivative Works of,\n      publicly display, publicly perform, sublicense, and distribute the\n      Work and such Derivative Works in Source or Object form.\n\n   3. Grant of Patent License. Subject to the terms and conditions of\n      this License, each Contributor hereby grants to You a perpetual,\n      worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n      (except as stated in this section) patent license to make, have made,\n      use, offer to sell, sell, import, and otherwise transfer the Work,\n      where such license applies only to those patent claims licensable\n      by such Contributor that are necessarily infringed by their\n      Contribution(s) alone or by combination of their Contribution(s)\n      with the Work to which such Contribution(s) was submitted. If You\n      institute patent litigation against any entity (including a\n      cross-claim or counterclaim in a lawsuit) alleging that the Work\n      or a Contribution incorporated within the Work constitutes direct\n      or contributory patent infringement, then any patent licenses\n      granted to You under this License for that Work shall terminate\n      as of the date such litigation is filed.\n\n   4. Redistribution. You may reproduce and distribute copies of the\n      Work or Derivative Works thereof in any medium, with or without\n      modifications, and in Source or Object form, provided that You\n      meet the following conditions:\n\n      (a) You must give any other recipients of the Work or\n          Derivative Works a copy of this License; and\n\n      (b) You must cause any modified files to carry prominent notices\n          stating that You changed the files; and\n\n      (c) You must retain, in the Source form of any Derivative Works\n          that You distribute, all copyright, patent, trademark, and\n          attribution notices from the Source form of the Work,\n          excluding those notices that do not pertain to any part of\n          the Derivative Works; and\n\n      (d) If the Work includes a \"NOTICE\" text file as part of its\n          distribution, then any Derivative Works that You distribute must\n          include a readable copy of the attribution notices contained\n          within such NOTICE file, excluding those notices that do not\n          pertain to any part of the Derivative Works, in at least one\n          of the following places: within a NOTICE text file distributed\n          as part of the Derivative Works; within the Source form or\n          documentation, if provided along with the Derivative Works; or,\n          within a display generated by the Derivative Works, if and\n          wherever such third-party notices normally appear. The contents\n          of the NOTICE file are for informational purposes only and\n          do not modify the License. You may add Your own attribution\n          notices within Derivative Works that You distribute, alongside\n          or as an addendum to the NOTICE text from the Work, provided\n          that such additional attribution notices cannot be construed\n          as modifying the License.\n\n      You may add Your own copyright statement to Your modifications and\n      may provide additional or different license terms and conditions\n      for use, reproduction, or distribution of Your modifications, or\n      for any such Derivative Works as a whole, provided Your use,\n      reproduction, and distribution of the Work otherwise complies with\n      the conditions stated in this License.\n\n   5. Submission of Contributions. Unless You explicitly state otherwise,\n      any Contribution intentionally submitted for inclusion in the Work\n      by You to the Licensor shall be under the terms and conditions of\n      this License, without any additional terms or conditions.\n      Notwithstanding the above, nothing herein shall supersede or modify\n      the terms of any separate license agreement you may have executed\n      with Licensor regarding such Contributions.\n\n   6. Trademarks. This License does not grant permission to use the trade\n      names, trademarks, service marks, or product names of the Licensor,\n      except as required for reasonable and customary use in describing the\n      origin of the Work and reproducing the content of the NOTICE file.\n\n   7. Disclaimer of Warranty. Unless required by applicable law or\n      agreed to in writing, Licensor provides the Work (and each\n      Contributor provides its Contributions) on an \"AS IS\" BASIS,\n      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n      implied, including, without limitation, any warranties or conditions\n      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n      PARTICULAR PURPOSE. You are solely responsible for determining the\n      appropriateness of using or redistributing the Work and assume any\n      risks associated with Your exercise of permissions under this License.\n\n   8. Limitation of Liability. In no event and under no legal theory,\n      whether in tort (including negligence), contract, or otherwise,\n      unless required by applicable law (such as deliberate and grossly\n      negligent acts) or agreed to in writing, shall any Contributor be\n      liable to You for damages, including any direct, indirect, special,\n      incidental, or consequential damages of any character arising as a\n      result of this License or out of the use or inability to use the\n      Work (including but not limited to damages for loss of goodwill,\n      work stoppage, computer failure or malfunction, or any and all\n      other commercial damages or losses), even if such Contributor\n      has been advised of the possibility of such damages.\n\n   9. Accepting Warranty or Additional Liability. While redistributing\n      the Work or Derivative Works thereof, You may choose to offer,\n      and charge a fee for, acceptance of support, warranty, indemnity,\n      or other liability obligations and/or rights consistent with this\n      License. However, in accepting such obligations, You may act only\n      on Your own behalf and on Your sole responsibility, not on behalf\n      of any other Contributor, and only if You agree to indemnify,\n      defend, and hold each Contributor harmless for any liability\n      incurred by, or claims asserted against, such Contributor by reason\n      of your accepting any such warranty or additional liability.\n\n   END OF TERMS AND CONDITIONS\n\n   APPENDIX: How to apply the Apache License to your work.\n\n      To apply the Apache License to your work, attach the following\n      boilerplate notice, with the fields enclosed by brackets \"[]\"\n      replaced with your own identifying information. (Don't include\n      the brackets!)  The text should be enclosed in the appropriate\n      comment syntax for the file format. We also recommend that a\n      file or class name and description of purpose be included on the\n      same \"printed page\" as the copyright notice for easier\n      identification within third-party archives.\n\n   Copyright [yyyy] [name of copyright owner]\n\n   Licensed under the Apache License, Version 2.0 (the \"License\");\n   you may not use this file except in compliance with the License.\n   You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n   Unless required by applicable law or agreed to in writing, software\n   distributed under the License is distributed on an \"AS IS\" BASIS,\n   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n   See the License for the specific language governing permissions and\n   limitations under the License.\n","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.13-unstable.0_1562697705542_0.31534648866830217","host":"s3://npm-registry-packages"}},"0.2.13":{"name":"aws-amplify-vue","version":"0.2.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.13","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"798bac0cfeeca2f9a3af7ed8f886fd01a4bd0f87","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.13.tgz","fileCount":47,"integrity":"sha512-3YFkcVH4Hm+4wIelxJDudCt1VaL/j1bwy0d6z4j8YMfqLUS12KG1bSEoit2YBWjmnb89VQFdCnJOuBoq1/Y7Lg==","signatures":[{"sig":"MEUCIQCt+TwEEEu9xtXXz7RoGI/6hFLB8YqLwdKquzGnimcRlAIgK+66ybG2epfqnAtHjpz7Q5ucurD5vaZO5xQ12FdDI/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3500088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJPyLCRA9TVsSAnZWagAA9IEP/0uE0duEEgsd1XiD+nOQ\nvRKTrmGQR9aCKeiGQvxLggylG9DhKl0idDP6f3KdOjTUHn4Yu+KyHBEg9sNA\notwN4Y1qExg4eQ7TPGeSyWD4zBO/fpE+8njLlJ6MHJ483/uwhZtP7SLLPcbd\n3p0xXAU7yQk3uPqnP4iP0ar5+ijt6F0TXPRFLdEs01AvQTn1QxVavJ9/zYWK\nrwTZkg8Tbrg7CycAamxSwpcuLCiZcfnunQGPZKhl/VA9kuhQ7bxe9gn2HGju\n1Z1fGTgzmT6QDmGenjLEPL7B13/OtfLV6KCSNMvDg1Z/KciDUKanQ/tRsZQ2\nZqBYuyVkKDWN2rLVj7ScT6AD/Fj0dlZVFPK6xfcBfNmk++Va2MqJK/tzWqOd\nDBaUToE/jV3PrYmY2k3eetF2SsX9fJPNGggawYxRyZtTeEb3q2ylnfPcucsK\nnbm7zx8rOSwa2cZOQM0MIceHZMHZrZEAuqxYF25wYeQqEUOcYcUiwoE12nQy\nOHNtRLSd8zzu9mgvaHyj2/Q19lxPkxGeELZ9Uik49t55Fvq48okKOUc5UGTS\npQxVQH/OjNieJbf1UYp0h87pk2elcMzekMe393p+Xyckz1TVL7UOWQBw7Ymz\ntaiP3c9c8+GYheqjuSJGEMz6DDv7H33l2VIgmXmFAj4MMpUPmdDAmx1FyXE/\nS86A\r\n=Wyi0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"6.9.0","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.15.3","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.13_1562705034683_0.3291316860173956","host":"s3://npm-registry-packages"}},"0.2.14-unstable.30":{"name":"aws-amplify-vue","version":"0.2.14-unstable.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-unstable.30","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"26770af98a5a421a30d68c978eb278a7989af4e4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-unstable.30.tgz","fileCount":47,"integrity":"sha512-y/JH9mmF7DsxrAQGeiSbkuY3oP+VvKT5TtU9UrEwbnDb8CAIUZ1AyIbbS/q4VGAah08dcYlzQ5L/IDX+KovItw==","signatures":[{"sig":"MEQCIDHxYYqjrGfIqXddlVROaLgo0DKsJQqce8V0LsvEEHH7AiAJJ3Ueilwrhl8cgPqhVRioUKMcdKkZq2f99rzShVfclw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3460637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKqCRA9TVsSAnZWagAABwMP+QEpVqYPp8AJvt8KMYoN\nVKmGaUi9L3eY0LwmJ/tiyKRWz9CIHWYVUaqOoaYvC8jaOW49Ok+pUYfJN5Wl\nI+7VzOYmkhQ/iIZLtEPL9xHOYSknRvpGzOEHjuNLDz6F1enNt5TeMUKoscxA\n0iPLAr1RuY0Q9c+BskNorVryqBJhzhoibCcIeGUCgHfeNMr+cRMJ6korCV3z\nJFrPIy906X2wk3TdarkjSsSTKt0XJAqrI9TU0rtlzHqIfgV4pfWV7aOoHb/l\nCHieonZbNrgCCVmND7eXCODMjnXJmDNULG6u+c4veDJMEjEYLkr+3D0guL8f\nhZyqf6UW0n0lMKeAmuZkchjLssJQf45B7Z1ujEW2+8whiPgYRfusqzMu07eZ\n/S0LrK9QJI5cFi2KAtI5AT8aFNux1muTu69Yd5RshJKbHpg8HdIlaPI2dN/M\nlxpgGJTYd3l0vr+I+veAsdBwsuQZAOUQ8rze2i/ixsxGcWLSevfuNbqrMFpp\nPdeiZGsu5uzugfpF5QTs6dpahweclPL879DyQ/UDn3OJk4/N7jnBO/ksIqgM\nQrN8a89YCJIBO1NFR3dpuE0voWQmE49ZyLHdoEfZJqdRcVbyfugz59smvljn\njzx4bjZmsSAX9CDQ8Ka3IH8tWmQXbemOxWiWLjzhkEsC1iVbBkLxTP6Kh49R\nzKwZ\r\n=g8Xm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"338a7895ed595ed3923be7c408551d1ab14319db","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.13.2/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-unstable.30_1563833002008_0.9395853353861652","host":"s3://npm-registry-packages"}},"0.2.14":{"name":"aws-amplify-vue","version":"0.2.14","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1363ce4a1779301c2b41fb392964c4cac65ce641","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14.tgz","fileCount":47,"integrity":"sha512-ukghLHKDksemkNAOt6EbIcnDFkXQXO/Q7iOxvnYY2erHEnmLkFROFsPgV7gS3U1KOwA1gWSf6EeYPiZDCLXkUg==","signatures":[{"sig":"MEYCIQDnfm7bsdEHVltPKqke6uepJFBUBgpUVAvgw6dKO7Rm4gIhALqYhJS/0/c4MVipu06FeHdx1t9jhAIufX18WDG1igeE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQMHtCRA9TVsSAnZWagAA84IP+wYQhd0QFkBDK+taHxBX\npZjZwd+5XePyxZKY2sbywHaacSUSrylYxePXICCs2BiwCVgbKg6I0uPGRnjr\nw05wR/XzjlUkLH/SgjTI4MyYYK9NPXQsi46J61ATkdR5UrRkeac45+wp4aOs\n/MH10rPlTngbDXRQvw0usJxJUK1O0itWbq6/9i97F6nnLce6Mh4JtgBNqDXl\n8Cx62piq/Q3gU7XPmRT84d5+SZlCLTflE2H6e2InyISY9HUGTPWEqKUrlN+I\nHZkcSsH3AkL81wrGcxlHAVBf7BuL2c8HtHgRKg0+8IBn44n7zVaCo/+fr+dv\nVvX7B2mAojWqOHqTH5oxdMDXv/fAeGGHDPMMl1IfmdKzYNe0a5BnRz6rL5AJ\nzRmtVTvUKtIMZ6KzXoo2tRNSrn/G+DIP9AZtbadg1bUFpX6urSxXOonZVSJA\nCzU7Mkq/z6yKSlXX3bIoaUMhPwb8kemkxnVp4brRsLIUVRF8mNzvInVX3rT/\ntsAkswA7JEqEWhAGaXyg0YPSim6AOohwf6NlyYb1tg5Nkij36fRoS8qOfb2V\nhwmnXGrccrbAphfuvdwac3jBTduGHQq8pvaCdhrqZvQ+F3iAoPrJyqsOpcUe\n5attehzkEV7Y+tKwujz6YFPrFu14lPPQyCxPWq0pOBAyMDPlRN1P5xe9+1U7\ne5bs\r\n=mYQ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"2cf57ec855e3fcdb525e91062bec437b3ef840f1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14_1564525037113_0.633491917276441","host":"s3://npm-registry-packages"}},"0.2.15":{"name":"aws-amplify-vue","version":"0.2.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"883ddd8060e16cb53a67118364da9f15f524a711","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.15.tgz","fileCount":47,"integrity":"sha512-KJoeYsAGL5QZ/H13HBtoGS0OuVlp8EAtKKCG68ftM6nUpzmK8ni4nl2qxz2Vi1GJd6h+UMK7qrGhGke5OXB/Rg==","signatures":[{"sig":"MEQCIBODmrEsVQrIzXGkCLh/Rs4TEZ0C+8Az86/s+pDu/swEAiAdEs48lO97rY1I/prZ1oxlTKcePswHxESEtMivLNk8Mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3822232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXbgACRA9TVsSAnZWagAAV8gQAJjKyyytQHqss6rgAdeo\nSZGbTUVPw8taMh11ueA/gX0FH7cCfPFDWNjPQaL+z/i44PI3sq3j10OaD+M3\n2CQZ/EJ3y3iRbhWTrbNd4kbcdnmYmxDVyrR6wpgCujn8GJXNaudWZrKSqIPo\nyoDvql77uRtzK1ENpsLdPLCmaBj9FlD+ntZ7MghCZdWIOadQW0F+XioQHGKC\n15ZvGZ4J4pPTbvgvhoSvnrV0WFJmvX7OehRM60LGBL3Ze+LA7bIRNJJrtVy8\n+pYuD+HQ3yOjpTbYeEofY9klIJcCnB8u7HUbYL3QGgyIEmUSiZ5s+kdU7zGd\nCRSJourvkW1mDUbub1fulFOoEL1J7a9s1N4f5sUGIML81zyLI3zGuY8hPuCt\n/ipyZeZngOsVGCa3Ib0a01XrjKxfZ/763qg1Gt3vecLumqTJcJo0wusXpII/\nNgBgBAehcJ4YsFfCP3TtRil/KFe9n3mQicFGNpaMKLGSt/Y2pQLrnMozI0vi\naa6SkXOo7pzUG/KFU5rWQFi0iiG6kTIKd4aH6zZwm58rqBZZuBPNjae63XjN\np6vWYInYDFt+hH9oFsLnAAWyXB+ICYu4vkEoe5REh1NBEZwVjJ5BBheb8s5z\nWL2FsIR0pOEsOWaFnvlnhqq42dpD+ArEpjFYOuYNrZfpvhMeOpAwHorOvGBv\n+l7J\r\n=07XF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f9686e53f386e32adda043a2d4299e0a00734591","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.15_1566423039732_0.3201984286987345","host":"s3://npm-registry-packages"}},"0.2.14-preview.54":{"name":"aws-amplify-vue","version":"0.2.14-preview.54","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.54","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7cab4971245057893016e8d4cf8f5dd57bd6720c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.54.tgz","fileCount":47,"integrity":"sha512-H555XBQZZOqF1gnGx33khAe19Sf9QF0EpnLTNGIK0ESJAX6aOLClg1Kijld+Mqi15168Y6dQkiVFPH/+5+xIlQ==","signatures":[{"sig":"MEYCIQC5UR2uEz96A/0JJhoXKiaKbo3ptAzG3TY2PKvozA/x6QIhALNbs82WHjeC7p+D/n/hg8YzaV+5t0jUMZ/5NxNcxFFU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3822252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXb+fCRA9TVsSAnZWagAAzv8P+gMWobAmmYuSPB/B9cE8\nCpZoiZC/m9mPKdlcS6Rv7RGMWtXQCjNKxtNyi02LKG4IKeSkJgdZAquqAImj\nbLMHlUqAEZS1dafHG6Up7fdc1dlnnA/vKdm8gbx4rIMKolXQ7uatcmLl5St3\ns28ZASMCRzr7NqCpaQK1ONhrNGb5bDNzNzJ4OIyud7vYrFg/3/UFKHwPdaj9\n8YqDfTerzx6IRrwjKCS7SjVjmvVmn185V5cHyNEYuOwWLsInYNdqZUOjxuGI\n88MvD+kbW9U84glh3LYq/9x0AYU2qef4hbuuTnsSLWQK1EY/mFR81BdF5/bs\ngOqf3VyrC7eK2g6BJYZVFdkmmtHCUx4+OBrDAB7N2IyW40GWxZaRXSVJF/e4\nkW9V1IXClKTaPV1msJVpB0ECNOZZhvkcLjc6otAhUFvOhanvTRA6Eikbairf\nFEcB6Em22wJuQb63izpdFbm4TK2DRsD7oob1hCxu5HeR2PKGKmpNplHgo+E1\n46mWBgSqCy5+K4nkxj8iclSWXS1mQv0d9sokCYZSY++tFvNjMbjx0/rVL6vg\nxPj48RFpR2Szn+2U9aFPuMGd8h1Mf7afDX0B9rpb/n5qc5YC6aCoCB1WoQc8\n8U3eyOqD4AjsHAEviLPZJRktZlsg4j+mimw0dSwoAR2vqz2tCQWII2Np1d/I\ndazz\r\n=KWUy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"62f717f299fdf94f072b7988972f9dafe705e38d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.54_1566424990301_0.6004666822501423","host":"s3://npm-registry-packages"}},"0.2.15-unstable.36":{"name":"aws-amplify-vue","version":"0.2.15-unstable.36","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.15-unstable.36","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"be03ca00a6d319ba7417d49b6e7e1b0477e6c962","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.15-unstable.36.tgz","fileCount":47,"integrity":"sha512-Xr6sKJ7kL6T4vxW3T2+rDxE+z4ArX1yQsXX2pBSEBRGPAWVlzmJFOw9D/KdJ3K0G+GFu9IrL9lmICvA4YlJBrw==","signatures":[{"sig":"MEUCIFfKtB5SIQkez+vYoa/mLB1v2fNSl4Xftp8CuDy1yr1AAiEA8MlpI2/IWmtrTsfeTP6jHWDdbTGo6bJY8Z7h8MhuWdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3857100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcFi0CRA9TVsSAnZWagAABIwP/ju9m0UFgZZrY61HVEH4\npdwoIdgl5Hwf+ZDUDm7wahiHPYiLxVpKScSBGRJSNM6wswRgJoOzH1Ww5Iex\n65jNlz4KnCj/PelVaZ+RKJgtXVWkIURTWig1p1OoFc8I2hRJOS1DvRNi58F4\nUAnYcCwR7/aBV1iDNqRlN2TiNX4cFUFjFplej7y055ZV9gwnck1bIHQtfkqx\nIjPY0XAwJBRR+yKuyssUQ8Fsy5WAZBC0gDvpWjTHG9hUmRfQ8wcKj+UTMe1S\nOlM9o0Mk/0dN56lUw51NPDhbRJ1WTCSjNaSwrS7bsc+2QaLI0fwTpm5tkX+E\nmOqqeO7qBi/Ss+ruWI/0sMXH5Io/IVhlibl7ne8NA5bzOnPA8a/RVp3I8fc1\ndwJYl/WDlLQVMGLFOp3/Amh0lWp2N2Ygb0f70autIR09KqPCYgeELnikitSd\nTjcbktue0XxmxiCnofzf4uFd7Xghk7MTjVccwqibo1MA3Mctc8gidnPQMFxA\nx9mWwCgskyOXoRsqUYBgHgzjB/+BcjYqLKUyHAaR5vbs3QBQlObEAnKUdmDl\nmdMzStnmBAeDmO58I7+6nJpG+IupjuUUtZeSQkG+r9xOIHBlRQwaJlhIXmNG\n5B5GuoTccYB9ecrKOfnoeD8gdF+hNX2mA3YtEfIyN6OZOUb1G19MUh3Q1PO7\n+182\r\n=X7HQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cebacf0f6f4830599b85e9880226cf8faffb2217","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.15-unstable.36_1567643828076_0.3407270793624293","host":"s3://npm-registry-packages"}},"0.2.17":{"name":"aws-amplify-vue","version":"0.2.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"40258ebf56ac9085c877acf14b74d73cc99a8353","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.17.tgz","fileCount":47,"integrity":"sha512-Vg5Q38PJkRgYxTz/vvCd93KwGReihU/966NZ+hb4j5zkZ9I49TbSp/GqI4T2sSKKUmRkbZUUYEiQR8cageD/rg==","signatures":[{"sig":"MEUCIQDndodfs9eCHDDnntFo28EaPt8ZasRl5N29nByf0DV4mgIgQi+i+jRMmR/Iv1ivrKZ/EXf6Lpu3sv4QWD0HIiMWcxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3857265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcFwfCRA9TVsSAnZWagAAHjoP/ApPDLIgYInOc3IATR/u\n2HSTBOpMNVA4/cHSevlaU/92m8LmyJbKvbkcxfKznGavw7q9liEj5rIzjLAI\nMq/M3FJ0BeOBb6yOWDC53Gd8B24Bx95B9ymi6AW6njSLzsh8jgzBVmWtCqEz\n/LEkpguZdDpO80+xxSBcurRxgnJ1AYT9qULXao5TjrFgzHZANjQmjdayZNL2\nx3wMGDYL1hSvs61m3r8H4msPU/blAfeJNDy5tWFosvL1CH8gFRNbDGN3etRg\nt8UH6wX2zZDAImZYjZ1GKNs3e5FVAmQKssBi2fs3qvitLrZHWIEciZAW5oJ2\nKvrvQ3vwSlAv2MOdgSreD7JJ8Yd+L7ft3aN5CDMniM72KwHvcvshndAGYIhr\nokfG8F3ub/d/WG62+r9lA0XQ8uUUOYjv0VK3l5xPzTb+drJepKNy4zutgNoI\noqQuVvLVI5/DgIh7JVhMBEWIjDXO2NGc8baIlukxNYdjQa01pC9/8d2Q8vsc\nmLwMu1zRGGQosJMTJ5Z8mPGC2/8AHALdnEDhRQdb+pS6b9ru39szsMzfQsfr\n/t72CiuxVC4ttknYDpElxUn9z08sHIqUGIswUQswF3/lWEDMi3Nwqn4WH180\njhAIHOKHfqPuEmHU+sdUcRZ57ScvY4Tbjgu+DvHqQEY2yL3avPdzhZUEwL19\nx0SG\r\n=Ihbr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"7b297422fde91e53af242108c6394dd726dc438e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.17_1567644702158_0.7534613607564888","host":"s3://npm-registry-packages"}},"0.2.18-unstable.10":{"name":"aws-amplify-vue","version":"0.2.18-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8d9907fae139b8b923d32357c1a1bef4a53dd9d7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.10.tgz","fileCount":47,"integrity":"sha512-pxrHium85QgTGl+wVxUaeMIqnUIteoXvr/TyGLr0vYH2cUSmRVIhOMeRgDWl3mpHfJbOlbpnOnvDt5qwdT8uzw==","signatures":[{"sig":"MEQCIHDMEnCr+pU5Rn1BYne9kgsFy1AyHYUpp/pqM5D2xjaEAiBsUooqMuVyMdvuoqqYfe67vx627u0w3kqIpKhS0gFx1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3857920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJde7zCCRA9TVsSAnZWagAAtDgP/05tCy6b0xovYwZHH0Lg\n3fjIz7Q8Uz0WRdQHGOaaeL8024qZQF5o33IL3t0d0kvvqAtqJVisg3t3yFvZ\nOIqvf1GRRbwn1svoRkukl6Q+0A6g9bFhaabv6fs2vb7m+BlOCPfxVULZ8udN\nvAB6oqUJJVBv3J8M8+R7qY34AAmllAnSkPR/Nxctwmywu3f1+nanX89inYcd\nVCS4t6MsNVACFIRfJ+6K+UYcTjaUoD6G2GRXSgRXBhIZ2VfkjCoqAalmGdpM\n3Ae3m2WGA04HCYlR7CwWC3Uqn7/OR/xasJwW43ZGlwqIzvuRRCT+TeVNLnVN\nsg/oHQrdIVJ7QyzwXOzq8DI/Y6dFQrBtiT1RjxLN5rwHjCBW9UPxZN3k0Czn\nVQVMMGSEIMrVa9/MP3rDJS0kNshze+Ex3UPOFZDm5vTUE5LsSiINyOPLd/xj\ngfmZlxP31DiA6bKLG6me9iOWWI/Q9ELLBsR4Km2pwUIDCc5ciaSEt5bUoCvJ\nqk9p0/GBNned/k5ISvMk0psMNRzi+Ta3GR5k4dIO7r7EiF8X0JKhyRiKjr/P\nkA/8fmYrUJRp1yjnQ7SkpYiaLGO5jxgnmuIugh+0Jg81qGlLVsa5h5ObGfwT\nWqfPNfT907a4ikGZLZNQXJdz6X5K9jum+ceIDWMr17I+tQl3tdgovorGY7wo\ntWXG\r\n=iufb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup \n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app', \n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components.  The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library.  You installed the plugin when you set up your application:\n\n```Vue.use(AmplifyPlugin, AmplifyModules);```\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application.  Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of ```Vue.use``` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use ``this.$Amplify.`` followed by whichever module you wish to use.\n\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n* SignIn\n* ConfirmSignIn\n* SignUp\n* ConfirmSignUp\n* ForgotPassword\n\n\nUsage: ```<amplify-authenticator></amplify-authenticator>```\n\nConfig: \n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n| Attribute                               | Type   |\n|-----------------------------------------|--------|\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n&ast; The attributes above reference the config objects for the components that are nested inside Authenticator.  See the individual components for details. \n\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.  \n\nUsage: ```<amplify-sign-in></amplify-sign-in>```\n\nConfig:\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n|-----------|--------|-----------------------------------------|-----------|----------|\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully signs in without answering an MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'confirmSignIn')```: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'forgotPassword')```: Emitted when a user clicks the 'Forgot Password' button.\n* ```AmplifyEventBus.$emit('authState', 'signUp')```: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.  \n\nUsage: ```<amplify-confirm-sign-in></amplify-confirm-sign-in>```\n\nConfig:\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n|-----------|--------|-----------------------------------------------------|-----------|----------|\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedIn')```: Emitted when a user successfully answers their MFA challenge.\n* ```AmplifyEventBus.$emit('authState', 'signIn');```: Emitted when a user clicks 'Back to Sign In'.\n\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.  \n\nUsage: ```<amplify-sign-up></amplify-sign-up>```\n\nConfig:\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n|--------------|--------|-----------------------------|-----------------------------|----------|\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'confirmSignUp')```: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.  \n\nUsage: ```<amplify-confirm-sign-up></amplify-confirm-sign-up>```\n\nConfig:\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.  \n\nUsage: ```<amplify-forgot-password></amplify-forgot-password>```\n\nConfig:\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n|-----------|--------|-------------------------------------------|-------------------|----------|\n| header    | string | the component header                      | 'Forgot Password' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signIn')```: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.  \n\nUsage: ```<amplify-sign-out></amplify-sign-out>```\n\nConfig:\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n|---------------|--------|---------------------------------------------|------------|----------|\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents: \n\n* ```AmplifyEventBus.$emit('authState', 'signedOut')```: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method.  It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: ```<amplify-set-mfa></amplify-set-mfa>```\n\nConfig:\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n|-------------------|----------|---------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|-----------------------|----------|\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 |  None                                                                                                          | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage: \n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n``` \n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n|--------------|--------|---------------------------------------------------------------|--------------------------------|\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order).  You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: ```<amplify-photo-picker></amplify-photo-picker>```\n\nConfig:\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n|-------------|--------|------------------------------------------------------------------------|--------------------|----------|\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '*/*'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n* ```AmplifyEventBus.$emit('fileUpload', img)```: Emitted when a file is uploaded (includes the image path)\n\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: ```<amplify-s3-album path=\"uploads\"></amplify-s3-album>```\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string.  The path is required. \n\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: ```<amplify-s3-image imagePath=\"path\"></amplify-s3-image>```\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string.  The path is required. \n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: ```<amplify-chatbot></amplify-chatbot>```\n\nConfig:\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n|---------------|---------|-----------------------------------------------------------------------------------------------|-----------|----------|\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n* ```AmplifyEventBus.$emit('chatComplete', this.options.botTitle)```: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c479916cfff6249dcbc4b254d25b102cbecac991","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The ```aws-amplify-vue``` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.10_1568390337437_0.574048197353562","host":"s3://npm-registry-packages"}},"0.2.18-unstable.12":{"name":"aws-amplify-vue","version":"0.2.18-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.12","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0de30be670e806c0ccdc530f063dd8ce47472735","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.12.tgz","fileCount":47,"integrity":"sha512-f8dkToAs6UH1CPOta+MHCyDNAulYk0XdG7YbIuaxnF+lBcPddXwMQ31jm+qhx550ghaA9XpMvMVe7cJ38l/C3Q==","signatures":[{"sig":"MEUCIQDAa06edYHFyW/mxo/2cJ8M9f02xAXgxuejsvfXh4oR4gIgcpHdhgTJqIV2BhX8f71NYtEHT/ChbV2BzqKMhflf3Ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3883175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgsb3CRA9TVsSAnZWagAA4mkP/imUvsIlUcZoF44GQmAa\nlmGYLBAkx8flZmatwS63nbQZxaouYDWdS1WNSsaUSbSi77EJL4xTDB6oCIYB\nttwkFQI8JWfub1fVxtZhxVOrT/bDFaHNWOvzb3m6r/1ZQo/ZfQdGqZU6197i\nvHDFMrPyARYJtOJjiuQ80OpPjvC7c/QKylB2NS85ndNadjxqkNeG7SfhuG5B\noqsGv7SpZzFX+IHkFMJ8x35SyoPSLWanHvKixdzKdVaBcgJvi4cqFUczGFpQ\nk9dkIa0DrcsSaigwe8c/aDl4VTePUNbout2Oah8QfX/bnATLq9I+fM9mlyCJ\n4wwqbOIiNq5yj1o/bqM639dYv+5n6y9s7/+1Dt04WjWmSHx6xe4/rdvtaPmq\ndPonRToUcux/JawS6H+1edSf9uDMm5L670I7V/6mf2SEU2cr8wVRIsuTH/yu\n58BWq9dcctc+bVJS1Ky3XUBFaQ2frk+Bml3fuIL1RwlKG87SbzISrQhzYr+G\nmDW1GOrKp7+lx4COmWX4Y71oNB88khjKyp2g3gUgR2PDUksecv4BQ9mKOJFj\n4bH1/LekaIHmZsaIKufKxm/gipNy0nJQz4eGmc5LzNhS+2AYYX/tHG61ZyKM\nM8XJhXsFf9uLJ2HGW8ODAVnehGJ0ZmqEYHr1qSANvv3gSNTIVltqyKxUD+xx\ns3+e\r\n=s5Rm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ec36f8d76efc0bcf3c911277a7cc480a8f073a0c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.12_1568851702758_0.762362148525159","host":"s3://npm-registry-packages"}},"0.2.18-unstable.13":{"name":"aws-amplify-vue","version":"0.2.18-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.13","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"70d958c3dbad73de9f1064447006d8859f0435e8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.13.tgz","fileCount":47,"integrity":"sha512-yYIJmQxAPJaDWPINbUEhRhzBED5g1VEO31GWTbW1SgapAvEZITVU1YhDJ1jEJobrgc6VIJvYRZTYvqvqENRzcg==","signatures":[{"sig":"MEQCIFjQPNZjqINmOvNn+f0m/oUL4yS6CqvQgMiQOoqP4nI8AiBNDrDEXvO3shyCcm4+lccGZS/AeiS7VFkg69axeCpEng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3883175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhAcUCRA9TVsSAnZWagAAUPMQAJWcr/c2+0pzETtw0xdC\n2xpm8Zf66of7AcneMMItzIroBKP3SKbKA5qB04mYzQJxz7CVQN72Ho5xzc+e\nESeL7rRzFJuFl+AoKhPFZWKew3VD5m2HO0FQCi6Fjy0+B2Wv9Hn9phdoMc2b\nGS3iVDN/jp5QC45te0YHnzXL6bLqqYYqLJo68n74haTM7cRNJ6bHqWTjSunW\nLmsYPJDo89dhNptLlDHkaydbYs/rBtya9fZT6Bqgmc7OPBdvFv4mm3wGKvEM\nuHGccsGJVkpOCcOwFJwrWys/psoZ13BT+B1qRzbeck5V7fXmqrKISRHci4YN\nNNpRkcTakF0fIx7X+v8cA9PmPDsZJP8YJhoJ+/dFxcUUHgO8PQyMlAjvjGb5\nztOxsTx+IOnOtc9rCYsdzIM75vzJ6Rnyj45W1yez0TB+MP5mhWCWKNKmaY0s\nQXJ+hkcIwER8J43N2pgd5QYsNXcLaAcJ83vTI8uj2ZKskokZRVtzFod7QyCF\ndM1nHO1D3HIjkFam5WUsyDDczCnAtaEGpmieyhOjk48avsfEInZPtMgytc5I\nJesB0ZUfWyeo7ZxvSRK1D3QPEkm/QIEKPPAcoF9uXdL8118KKpQQ/m4ngj6D\n94lAmyfngTf/SDIiBLdyqcoA2YVB76YLGeFOuO/byAQPHnM2/GxFkt8hIGOo\n/5ZX\r\n=+5oC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"58d8064415a8b53ac9ab542912446c71799e0212","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.13_1568933651825_0.0060526744278834865","host":"s3://npm-registry-packages"}},"0.2.18-unstable.15":{"name":"aws-amplify-vue","version":"0.2.18-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d6b2b3c2223d5b945099b0fafd7c3ee3c20c0724","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.15.tgz","fileCount":47,"integrity":"sha512-DE2F6zvRFCuisvEAaggQtYquP99mYjmAG/ctKMBnl0XfqGuE5qq9gA0vl/YxmqLeEq8NGf/AhbozscXDY/sUGA==","signatures":[{"sig":"MEUCIQCyZ6d/kfWgzCcDHPe5Xrxfcgy5RKf10Law4h7T3HGKhAIgVu61VnTbGloGTMy8IosgyTlWZgRF9ZHOj9PTPBJpuX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3882905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhQy6CRA9TVsSAnZWagAAMo8P/jV5owGdatQIE8WUOkid\n8eavBYZXYW3YLha65AhsH90gSfuaZdOKWjaEM6WHo0KGdvaS2qYH49wvuXy9\niqF4si+M1XxG+7h7TVtKl3wp/xmVooUYzW5IkVV/ms/jgtlOjO1n8q8XfMqm\nYb5+GxnW3vn/KwiTIq6slEQLUQDTzze8rH6lPuBNPB2wZVoDdbsT9sai2K/S\nrvCeLiWPl0y/apc0O+jk/AnePSsjDINmc3ROW9nVXX59BeTAMd8WktIWxPz2\nA0vAA9U64Imjj60xAswa/E/vXdbw9M78zsLQ/wO2nqN4gXPVHKIGGtczxQgP\nrNMTDWKQrfxYZKaXXPgkgN1+81k+iTryfF8rTwQVPhsghjDAPO5bjwbGg/TA\nmNwDbzoqHOGSaqZn8f042hQkATTwvzXgcgn2ulxOMuR5Cme2SHNZ51FJZnKC\nlEF0OqmnnC+do07TCt6+N/1mRYqZDVz1kJ4S6osiFG4NW4fbXFSHPQmqezKx\n6KZV5nbdIrp+chdn3hPJLWl2LWXwiutLY54uVMHlfmhhYj07AmpxqVYgfl36\npvgNA0xcUUus+i4l+HrdGDIaHYVEZz/r9USvvzSAJmkoM0B1jxsyGxn2ebcJ\nXggzp5ZclU8aGo7rwqebJ4Q2Ski8gLVXOOJ0jr6V7xJi/cRtxmjmDohnyH4u\nGBQG\r\n=twVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c28851a6379f3ba05c4fef529bb5be7f18ebe316","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.15_1569000633801_0.0239616193545511","host":"s3://npm-registry-packages"}},"0.2.18-unstable.19":{"name":"aws-amplify-vue","version":"0.2.18-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"521b089f790cd2a74f828906957e75311b6efd1a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.19.tgz","fileCount":47,"integrity":"sha512-9eXrpwdoGz+CH5eJNqeGbLCK+znVeU2QR5YqT0Jw/2vqRNDppIvmIlI0O+DiRBhdCCI3AkvsxHO6NuywXmAnkw==","signatures":[{"sig":"MEQCIQDk7qZXsZmrPu8f7Lkdl5xcxYJA5QmyHtcM5c2HoHfSOQIfbVQM4Izcet+w8L5THET3bxJeKnzvCLsJ8NXLKMxg2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3882904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjTbVCRA9TVsSAnZWagAA0rgQAIXgIqbySwM7fGKGmuhN\nDkCvsQ0Hptp+jKtd2tqDOy3Y+gq21ux61WfqL5UPnpiI1bEfiy/AFUv9t7lg\nWWF1y6ku7KepFjhUm7Xv6eu71VIshi6jYyqEI03EdYtP+2mOApDQMWsqoAH+\n1XZUPROScrMXLocqoepJ25NEFu1cjowszPg2Ig3zimKcVUYI8Z86K+0LsO5E\nKiJMUQQQNi0g7qOrl8S4fF/w1IEElgrCjbBqrclVRu4F66GiPQjjNxx+czB3\nhUqz6/XD9e2G0e1n5WZkQZYnYbpFQMy/N2Y3t7AzBVAlTgFDTWI6yeUD32xo\nhZZUzg8kauPZohPDcYUjM36JIN5uiBXJehAwxa+/VO3d/tOE4CKmMJXnPvav\nmf6GLL1b3f3/pDEsr/P5DTs/qWkNcRWOg7xA2BetIo5+OOZYQx24koBbdjK9\nFc3czZRr6dbM2XT8VFlwaE42DUBhhizhRk7EY2LVbhXvmrJ5MdEuzVbL60lW\n7QRADhCRutwWogXOhf9TlEDeoY6V7oDOb/Iagd5i3OWmg5s5Q/D44bdSwZnE\nJuIdX/Q1j4+7WbgK/MMmiOBclsg8pasLS9USszornPZyhak6mbztayDTKJB5\ngBh3PcSCOHFrwYqUzjeGT07auxbIYn+W+/Akow+IrmBX/dAkdiUVB7BFzhfw\nwDWi\r\n=wfVn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d00f0409de23c9c8405fcca1043f32f8f3c1fd62","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.19_1569535701257_0.5454678239431716","host":"s3://npm-registry-packages"}},"0.2.18-unstable.20":{"name":"aws-amplify-vue","version":"0.2.18-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"08d5a7c09f9e71db81e37099bc6e892646d94b1b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.20.tgz","fileCount":47,"integrity":"sha512-FyOjMlqwO/vtdMdPlqcp8eLWkVG/XOPDvJI7WCs1X57GUigpWm7jj6F6T2TJd9tu7ATt4fzuu2RPU2pTMneA+w==","signatures":[{"sig":"MEYCIQCJfcT4MqD49DNp8h2r0GhCT5xdGEtd6fIOVg31NcE+OQIhANychiz79ZItLzI0K9rNI99t09oykWh/oYqD1uLxVHxv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3882904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkmhoCRA9TVsSAnZWagAA6okQAILjwI8EDL4vAKmivzxg\nxbXJnI50rQwQosjURi2AESGKSBs6Lu0TCnlryv2Ss2u9RRb3h8v6CciKFTCR\n8rkpnoyostHdGf/EaPbtFApLxRI3qxIIsuJthDjC25JURSp39C9C4jO6g1aa\npveZ7XlDuiP+iRQogp+jtWeea1iDYuSDoVwoQ8bYNl/0oDubvolr+p2eVMoi\nc3wdz3jUSklV6IcPZ/ndH3YlWrO3vJ11AQ4jkCvwJqoIqGPkBQ5XFcBZYap1\nVgbPBNooU2wJOsxbADE2GMkQssSuHMJ7sM6NjKH3QcMZg6LEJwnCoq0dLCAs\no7XDRVi5YaWBrJeYPiJVaRS99xm660UXacEUmbyNZMnq/KrRiuS3DPS4skfl\nQ9y8yvC6CU1GsLP+1vY7oz+JxhvxdF1SAR9NHHR9rM6ImbZUt6ft2FYukkki\nTfHoPXAvQvbVXLcqZ3LHXOT5kshbLF0MikSJK4SkBDqXTbFhRHfvEoSEDkLf\nHrJdQ+nqRf3r1ONpCxRtW4PJlB3zwfZJ0WS8x5ULmyvIOvspik6Fzg6UkgrE\nzNMT+xVk+g0fR5/532spWzFhj4w3ePoSNM98OZ22sg7Vfp1NQv58lgcTeu89\n+xoLnpybig2jQWLWfrv2kD4sE3y1Ys7R1jUHSToj/gqbCsq6NYKbIuG5o8qm\n9mks\r\n=nYtH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"82b1dd8acc9b1dc165707945d585ce282fce60ba","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.20_1569876071465_0.7882945827989143","host":"s3://npm-registry-packages"}},"0.2.18-unstable.21":{"name":"aws-amplify-vue","version":"0.2.18-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f3ccb9f4d1a36e5f073ecde3710b1efad3fb8cfb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.21.tgz","fileCount":47,"integrity":"sha512-pAMwxdC861zXm+lV26PfBA2/4Xs0RHx7s/zvgGdqmZLUpHKq5AeYJmRdZSHsFu1fVWSzvSn7Q+qoqI0wnbuRcA==","signatures":[{"sig":"MEUCIQC/b8wM9kHGkUfntAJSo1uupvPH0qdKRit+hDlBtYI3agIgQdhf1L+DX9cD4EV2n+rWXUFWyeqRSJxpzq72IdRGn3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3882904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdksj/CRA9TVsSAnZWagAAjYoP/2riDJvACJobyY/foXJ9\nrgMjSo11w/hfs3P60Yb9bXakI7IXsIc3P2oxQWknCvwdrJgUyjTsSMMvTspi\nR/CuqP98H81d006jtghKuejkJFf7e+oqw2WyfijGfafx7AZN8EVSUR04u3+O\n1ERyeCu4oGgSK6Hs9eKP7kOYvZExwcKuVaqAO9YfCHTP7OwEavkrLt3kLVM3\nO0ghakYdDaqnVYeV+t5IqkM196m+HsIopxBSKX/9x/1CXso4s2Is/y6rB2mK\nBnptuECS88uDcEKK0GO2Gv6DmtN7AZnGCFcWOANtnrbi9PigStR0Jjk70zWk\n4LbH04jhxion2NWHII9GfNlt1fx5u8dfLRuTz1lH9GA4XorJdTUKXMSgW7bV\nGF8Abhhpr6ZqsEsfvRmxsAHZdfUAb8z62l8w3TrrVGD+jX+1y6Jsg9FBG8aQ\n64ZBI3dQA1XqUuOsXw1R8YlebHkHbXCXdO+3jEPcJVlvzgdDA7MZ7qXt2Fpf\n2BT6Lt6+4D5f2Db3Cavrvx9o15ChqKSynsjMzmTNbVBZ4DF5Qu/feFW+nq1n\nkiD8iqUjLBVSXg7PDgt9b7PQhjjBWXQMSfGgmGxHuD1I5p0GcdZHmX9W31+q\nmatKFDhdzEgkjsFto43ePfPRYWk4yWJuPXepNt1GkABqhWWMxA/fBuh38xtT\nQwCS\r\n=EWMH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2fbfde04092c2b0bfddc3d9698975ba7e9c5e572","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.21_1569900799046_0.02503531451776486","host":"s3://npm-registry-packages"}},"0.2.18-unstable.22":{"name":"aws-amplify-vue","version":"0.2.18-unstable.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4e23fdb94cee2a1ee1a73374175ac6ce76053129","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.22.tgz","fileCount":47,"integrity":"sha512-tnLYPBap+DCPzyCdT1QxhvIrBypqncPbDqa4+5KKFpXttn3Lrs0CyFaA0SpKJbb9x8eP1Tx+tC6Df+24+lB9WA==","signatures":[{"sig":"MEQCH1YOLcTXF+3OEHz38j1bcEqaOkbkGiZF7LWfWS+ZErsCIQCJN+IdvgeD2lsdrhgrwhs3+3cI6cwv+DedHL/FjGkoCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3882904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk2biCRA9TVsSAnZWagAAN/gP/iMmUqpeAhlupGiljXWb\n4AHcXsfjTFbnFlY02VKFd+EytA2q1p/SDp56J7+sgpzcPQCVw3TY7jBw7uXV\nUkEWZ/wLp8ZUU0H7be3sUbabZsH03Te2qscNcl4fEqdhYI4qefgRqiTZOzWa\nJhg4807+BSkNu577Odrf/RbgKW0FiXaVTd/GXp5ybtq+rjc0kmPyrRF3sDD5\nv4+r+7wOqp5C0p6SeW506G5UohrcO/cUFrzvQ4/n+AJIRNGboBnpJ6aAYIDy\nlrJ5xBL0T8AAWfjU/oU9I8cCfc0P8AmS1GZRQZ3E1X7uYewiHJVmu1tjFWII\n9e/QYiGhPx4d7nVyeicZuN9syx2JUOKpcDeRfZSu5xiBRgxvMWcJMznl2kEn\nMkdNoJQwAq4/4EzKtKGxl/COaKwM79lmVlO7wno9dem/HJRR5TJAW89k58wx\nfvfzCXk7ZF2Zp1+VJpyzK+zvFUy+YCjo7mBQbQLMn0Itc1Wvc3ULzEO76O7p\npSRX53Ss/9UIi6aMDDLUffZBySUThJ1wvzoMdwx2vfXFBeH7/hXWawKYvlhT\nRmTDqVbgB6apsVeQyiGO2yusQePaCchN3lJRYHp9fCE1AwTu9rO3RVqWmKXq\nsTlCRTg89Z7DukIanY/hbsGnW6KCRqSNGSGYGNAXISr4imoVFYQCPs1vU15E\nx2ue\r\n=ReYN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1db620fb284cdc0f285865f8fab4cf49baad95fa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.22_1569941217376_0.1480564414794734","host":"s3://npm-registry-packages"}},"0.2.18-unstable.23":{"name":"aws-amplify-vue","version":"0.2.18-unstable.23","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.23","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5ee26b0fdf85334939a44225b4cad91ec32ef36f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.23.tgz","fileCount":47,"integrity":"sha512-WkTpUldUEyshkkxLeWF5tuKYIx7h8Aseg4LWbMVFPE/AB4lk09nakL09HeaOuqeCpIsKzY2LUaFy1+iuwwbhoA==","signatures":[{"sig":"MEUCIFb27UWMiD2BkEUBblDZRcsOddeHjkjPw5DUa6clawasAiEAoRU5VI//n12LDMv06QCocsyuvhvRRv8NVFNfy/GNa0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3882904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk2kQCRA9TVsSAnZWagAAv5UP/ja/dkMUm8+z150zGbUd\nI2FjBciXvJFXMFCVw70LMKerVbPQQb9kH2rI3wTizoL23CsjsKbwVGgtIRBr\nfWSJ5cMyVh1l/ULgj7/0bQZloRa/xp/UYsfx+h0oOPNtvX+el4qGiOFs7W5X\nqJbYJ7D2Bu0PVA8sG+smY2YvdIGg4M3Uhue4ei4NZaRZ3ysVb4eoG18wM0Ht\nIeMB4kLp7NMvnyt6qYf7uYu6KUoBMbEOm62dKtBHXO6hEsK5IATNasONIz1c\n23sLJyh7OeyYB2wwZJqs6Q34pgOUT4Rq8rHCV+m8Wpvn72YJHNhTB3J8fNyz\ns3LLJd7bY3crH6s3Wo3Z8qeZMlqP1MFfmzFIiEAwZstOqNLk/93ntxu7hh8A\n+d1z79CDj+g6Kn5bDOjBpOs/Zng3s+0IgoeEYiwTY9ecRsDWrJBJbZdujxBF\nfi9cuSRHOMUcs3UJ0eXG2G2HRE2p0GJ3olYxVEaD9ka02v8/Qt8ct0nW/c0p\nphuC+P+Jb45mI1inSf7MQEbC0mM+6Cc42Qyn0/oc/D+8Tq0uDBL0ay4PaNcw\nYPpyFCVxks9fqZk4f5TrMOK3al9QwRLJg9cjjqDLhMQjjx4QUAadIX1fwLlV\nsZ3kW3NlrpxvGqni92wZCPqAmQ6JXKi1GRLg+aZCkNgRWmRgNICbo+aFgr9j\n9XHG\r\n=fHl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2bf0fb62f62b7cb196374a473c242755d8a567ad","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.3.0","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.23_1569941776152_0.5572887969453912","host":"s3://npm-registry-packages"}},"0.2.18-unstable.24":{"name":"aws-amplify-vue","version":"0.2.18-unstable.24","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.24","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a69d37c945a3208b6d4029383c8923718e252fb3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.24.tgz","fileCount":47,"integrity":"sha512-tmUvVZO20pOfiL+psir8kPS84GfYta64qZGa97HQHDvt8bmh/O6MsBBKu+J4CysuEST49goJxWrxNaNWh0uh3g==","signatures":[{"sig":"MEUCIQDBewJ1a6ANawfMm9PrpXAReMp5909t1oMAocz1hLQgfwIgXlh5KpYuXGlhRXDHgjiyc9ajW97cd3HB9JVTBQQuXcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk4zVCRA9TVsSAnZWagAAy4MP/2lp+u2VT7ZG6wf+GJbB\ntTZz3HpSHpZ96Bm6G5VKCXrFJx1WXZ0G0TggzPvQCe5rn3ForQqKgxTX0Jew\ny10fD6MjzQHekMwqflAlFmEiYJ23iLla0WUIerYOVQuh2otPCbYrbtFZlGuX\nxFFXyhHG1BZQ3oHQGW0A/dKp5xLlcY25FTuJqwprJz4fiJs2ee/cbD60Hi33\nRFeXsR3iXLtVPMajxPiOmuFXxzJSUUT9MN+Xf/FLRVKmNA6XaMtUICxuvCTw\nAthnQ+nl5tB3D4LA5kNSKttSTOS2nP7a7ukp4IwJyZ7vIo6/p93BBP3H9Iky\noqsebvE9AMMFdhJ+tK9WPpX03d058kciHD/EjICBPFuCeaM61QLc3S292Ad0\ncL03yfsEjD2txbCYSjfjV5g2gBC+hFFDGl5HjZSoi+N/zecEZrDpfwP3R40f\noounOmDgj5bwcI5Mw4v6vUPquk0pN5IY8mcgeHbX/zf12/ChLkkEnVNyUJFW\nar9AP+sYjbzMdTkWRuTNLqIkvrAIoQnngHyUZVwvxHtei3kRf71Q3jm+luFi\nxKiu1xOONErpUW+OVT7O+VUTlyxNBdsCNmDM3nE1/9PGfvefEp5gAB7mebl0\n7IPxD2JaWi7MbKRVErVARzYFbLGiG4GQkA7ZZxW5wdet+zWr02XtV3Cl4RFN\ngjKa\r\n=Gcma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"72cf0f726f419ac14e7adc003526942eac04cf84","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.24_1569950932996_0.5522345389625194","host":"s3://npm-registry-packages"}},"0.2.18-unstable.25":{"name":"aws-amplify-vue","version":"0.2.18-unstable.25","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.25","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ae95cb20a4884c0fe23de8ff6d7df3e1547ed00e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.25.tgz","fileCount":47,"integrity":"sha512-xQVFGTxgpWON/8yv2pFQ8ai74ckzbcvwIoCH9En3Kl6QxDdSpizzJnFW5BlvoqE1Dt/YJYSh5Ohr3R57fPbVJQ==","signatures":[{"sig":"MEUCIEtjKwiJOMKzjwco7wj3H45KgjR6TJMrszBFSIKNyVctAiEAxBFrUO1RQ7upPnKwadsLOGwswhdmb7MLHvdub25E2YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk5A0CRA9TVsSAnZWagAA4OgP/2VH7rIzvpXHe50V+4Nl\nTLfSfTo/jsYJoxfgxZaMw6IEAvwRsWjTVBA66F504jBTN8hAW5ghRMOmYIQW\nSTZwLoSmwxT9UXKHg8ScQqN9S0wjHkTIJXp6SD4bPQeI6R4pGW/tMs0XZj4B\nKNa1dHsKLAEbVPkylXQTDPu5bMCylxEErzI8wkyo152nc/MRZ5yfEd3LIUnv\nuHO1X7wMp3OcoAYDbLhed8Zyh5QTvt81wKTtptzcET384v3ClbsjDEtjpUsh\nNbGOyZhcaV8GhzORvH+7SsT0wnq6Eib8gz+z/TUT8E+g0aHgV8Z9t6+5Bne8\ng6u+YTVUs+6E0mkVZmNSXjGkbusLw6PeA+CMsNDHYIK52DFM0X8cOxOoY3oT\nACe0COVPI8cZ0vgl4i3Nq9l98kmtlv179MS8Tr3/8RY5APDh+cLv3IV609su\neTSUkycaCFLy2uuTVj2FTZ5qPWF5V7d4msyUoP3t21Pl/enSgpkTdIh7RGhx\nzB1u9fvmSBfbxbeVrs/ThFRLnNVX57PPbfIBCpFE/XYkci35DA9fjKbn/gPc\ne7zz0Kn3P3nSDAW7jAQcKmz2RZ3V6/vjSLE0/rJpt/UbKG/8vpJOOsCVf108\nFaajAo0CnlDD3zlW81UwTZgLkb0rpm1XiT5RbgPCDNmvl3pgZ6ly9sWHh03R\n0jqE\r\n=vsy1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1a660cb85ea70d42d9d016035730cb231160d5fc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.25_1569951795266_0.8096598218648203","host":"s3://npm-registry-packages"}},"0.2.18-unstable.26":{"name":"aws-amplify-vue","version":"0.2.18-unstable.26","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.26","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ad3e393ef86736a529c8af6f50f097430f8d6318","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.26.tgz","fileCount":47,"integrity":"sha512-aQBKq/+ZhZ4Ms5U/J6/77iDPR+37srJUE6l8c1P8dD65LUOqzlqLXx8S95qvlr2vhIMrKz0+v2ypTf5UV69Lcw==","signatures":[{"sig":"MEUCICqx7fMxyEbfDP2yS7S/ynmGyrSzUw7aRKEcStEk2b7lAiEA0o1dntwuHc/mVOtmwyZ1xupmgvLRbziaVcR8ZtpxpA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk7zJCRA9TVsSAnZWagAAGzQP/3zsC4yIAZbTiOlrouLC\nuwNmLU9RQgp3dsyD2pAkeg7/FLpmiY59l6JLoE2cjsVZDtvP/SFfQYlK1ky8\nKbNf0gZz38RqlgC80/1aobV91wYKoPB7CraWLSSn102gQucaZSj9ReWmQY8Y\nSNyn1FBsmQitzDxFE7AKVwqvsElD6XUYzkInd486Cbwb3AoxGuHLo2zJOjUJ\n8R0rQJzTdlboQKY308fOiQoAG5d3erlhgqYIhF3CfdAYO/dB/tZKaf1p4fbu\nJnS2yXe5dOmCDP8frCPxyOYDHJxMQFDnc2b+58cDphlweRSrs/p9RtFVnklE\n+9NdX62RslFGWW83SJJyPKPP/fDO2fDyAuF+X5v1BOtbwYGmMCxKnk7T7rGt\nY0d9/GG/Z0zrE5vrolRkHYL5C5vDD6RMQdWFA5VTHXAwYV6PMF/5/Fsf1/ML\nNEzk7SgrHGx8QXKFRNACOzk30Uk0o8ssNtreLfJYVRGN8pne3vnYFaBmEXCQ\nQwSiUgSplvY4bs2m9dqVdCdtuz73KqXOCtDvWGhMmT2hpxtvDTDtUysin0qZ\nGjniGlyXP3d1GERI2FeCfmH4bubFXpj+UzramAe5Qg0TGsZ58+4GxxU9OyJq\ni26q8JCB9teLc5P4Q7/TCjPxl62pl1ib+bQMy98rDNln6cq5F5poH2HEFFP4\nsZey\r\n=VBXS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6a77e027a21f454fc3ecb881300e5a98c1cb3c69","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.26_1569963208715_0.17715608243404413","host":"s3://npm-registry-packages"}},"0.2.18-unstable.27":{"name":"aws-amplify-vue","version":"0.2.18-unstable.27","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.27","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"df7d41a59f57c115c7338a6fddb6a939ffa710aa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.27.tgz","fileCount":47,"integrity":"sha512-ep+b/xhhGmUCxmbteBBuUl7uDLBvzxvs1z7VoTqWOz1KiczP44DLJ7cJgSyevzROeQIA8SZXaZdGb2Y+gp21PA==","signatures":[{"sig":"MEUCIBqPcrMnpYpAJbD7fuBvJhBRUnw+gBJI50BOYUw3tOqlAiEA4EwpXey2pUb9JjOtf5pJvFtdk2/iDHe1OiqEoyVVQ9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlQnUCRA9TVsSAnZWagAA0dAP/jyxU4uHlPdXqWOTybIo\nP79cmrcYXRn9Z/Y5OmkXkdHVImtI9u8eUoUkNZ1t/exUagxQ4e0Dgdo9/+b0\n7RJTMkmPsCIIOyspDL3bdHdzpr1NwzYIo4n31OlPRQclnSJCH0PyRYMzib4n\nd82FallDmyddSACZhHukdCqbN2xO6jLqh8TWxvHFJeGoLpsoJFO+sKq6sXf5\nP8Rr0wh82wlISez6PU0zMgXsyhMsLjVZg9q99TJTIHJYwxIZCjjDdqfX6eVI\nUGI0+CQiVbUxfW+6N3SS7O1GIb3K6TGfQ83AV556u8XVcrz5HIwySN5p2LrD\nSH4abkEOZdFMYjKx4WRm8joGwp+J7/R8l0TzbC54g1wfjmOWlZ0gM8D6ScgE\nv6M/DRCMbSsYlhhUh45NgszGbyh8VPJb42Bqpqnpw1fWsBqIQaAa90b+ykjO\nKnbEzpfecHQnH0dINjFAm4mwOD06B+X6lQ9I9pSQuWIo/c/D01PRv2enbtGz\nmkF87uVgXpXAZ+mFeFJxNaQ723XZgeuFHXOqSNJeS5QESpUqGTZte2H/kO1D\njtF8IVvS7GNaQ0Trp1sYRP7MRkLqMM+dglld10dEgudWOgcFGm0iYzrRvHH4\nB3lGFBKJ5vnQAtLou2SpevvGhV+FuCuGBfyl2GCYFSCLPdl68XbKUGg+vQDj\n8qs4\r\n=X5cF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ef883c3d1111b8d1a27893b421130ae74aa3b90f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.27_1570048467731_0.24534563599261006","host":"s3://npm-registry-packages"}},"0.2.18-unstable.28":{"name":"aws-amplify-vue","version":"0.2.18-unstable.28","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.28","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3b05493bc7c529bf35562b896635c8a5ea9434af","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.28.tgz","fileCount":47,"integrity":"sha512-tMiMQr2VpYR2ST4K2/errEzNUdj6+QV2inHoVzO3tfL0BovX/73tYv3dO3uwTBzUVIU+vwGZjL/3F6qFsNAFyw==","signatures":[{"sig":"MEUCIQCAOIEQZZ23kgzTdh48osWmpGfRPrPGgngSoM0cI0G9dQIgZOea3vSiu0lurUH/oe7pOcOZaoeRdRpwWmP1O7D6PPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlQyxCRA9TVsSAnZWagAAvC0P/jGSE30LYUyTkHgVAJWV\nOzPnH5srRdpnkWj5MobUyCdKkklcwwDg+o2tgGZx4QCrnZJQZ6k3Lq8V2sPH\nxME4VuFtC9ZMMl/A7v7REwdpjEHLFJk1guotg0Swdv0ZKxB/G91mVBxTlxJp\nbpKk73vDjIvYNlzQ5aiBVyWGN+EVDr2I7jXPFq4JBfmT4XzTsRFRwYp9/Kb1\nb1Iaelj74xvtkPnuPaRiW8Y/SpkkhZa+1qN6qhdDGdyAsx2QDKiJiLqNUaI6\nWMOyvUttp7FIy9wY5xNTcQwbeQkiysRc57eGGa9bN5qHf0gr1vAdgIRzOhNC\nTma+c1AKMlsNv0KIo0DL9qZUy3iStpC5BRsxUywSjoovhLmQ3PrF+8z4jw3v\n3UQ5L+N0yFN5daIwI32jebcJCfF7ISvfzUozMGy+Gw4+ao3U/wOURdm8jKSC\nHnBgWLJlqIVfbLSBlQZGHIl0iSoZWMZ2hOfpNDLeCE3mmfZx4xlgbyIAMwdT\nieQJYulOVqP/GUv25Kw01T+W+tB6yegs4D4qyRgI0fyjp+guhGQsu/dGPvOz\nxN9oKbxBrwRpuCB3HnczA68mTkOH5QekVmcMeIk4NyVnXN1zifM7t+WyGo9+\njLM09NooFVcfCYSDI0QiyvJMybCXM6EvvUpfrt43ECAwHaC5DtO3gu49YYdu\n1wkm\r\n=7wql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2c2b3d80065b085ffd6b992e7cc4e33fac62cbd0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.28_1570049200391_0.29558074361351294","host":"s3://npm-registry-packages"}},"0.2.18-unstable.29":{"name":"aws-amplify-vue","version":"0.2.18-unstable.29","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.29","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1eaa94f179212385e83ffbe1a8bde6b4ac20458f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.29.tgz","fileCount":47,"integrity":"sha512-C5AQ095YiXTi7ox3iE0XpDh08JIwGBwQe3J8A24s0IRAjWW5qQEox5r/b7dP3DVqEJp+V+UxBMFwrMRAtAva2g==","signatures":[{"sig":"MEYCIQCvl1cLW97XcLNgxun5lPutuDkmKQgGjnf8D3E6bygAagIhALYRMAtNeTewiAyFA/l3AC7uPKeN2n6N1Hq79FgYm/Yf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl6VsCRA9TVsSAnZWagAAGRoQAKQU3eGNlewPiW6OV5tA\nhKPgMlQqt/fdDUkG2s2FzLROV4NvCwTnUDrnQGe64m4bvoo/9Ibo+G76l37r\nWdTvU/hWFDE3uB4Gp2Y1jMhdhfVvwm5b0SN2jo1D8FpS2i38ju3bx+oj7UTH\n7MA+SvTXWzgCcJx2Gex2Eku6J6bkaCMSf9mahOEu8I4nz+Zq2ClLvBF18Y6X\nLnzUH0NxsxTTNlc8yoRmgxhlEggNe8FGKbJCb06SgMVVMAgflhufVf0bRyhQ\nnjGK/qxoHv2RAFLgdjt/9gsyb4/yFbPycrdGggSZIN92/ZJZvTwdKyTTJmRF\n5Kz8YEBkt3ElTzjPD2bwS5kThCJBOBEVLH14GMjg4DViofNHRdjU6FxK8Nzr\nFyOhgzR64fE05ipgNv+PmIeo4gqJyXSvOeEG0A7B7UDCLFDtqZ9Ea6ImQndl\ntXZOJJjL7rJ+ytkg5pNp4wkaucUKxHvSqXPpwJxcs3w25LXOV3qPBfHaan+T\nds4rwbCUMNm4S6Oun+PzsWaJVjytSVBvQHsKJn42ZfdPP0dsrPl+rYWGTOdB\nQGD88TrHCIzoHHzNKVyri9FDQe/ewR6hl9j0EXPVj37mzNW0HT3BRxlupU+e\nFCx/BbD81ksIIUHdyEe/s34D2bd9hNMYc0FNK8tlWDkIIrRGmkRCCPmr1xII\ne4mD\r\n=O+eR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b63ac72ab2c3d5e9105885d3f7a4f1a346878c81","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.29_1570219372171_0.30188658936412094","host":"s3://npm-registry-packages"}},"0.2.18-unstable.30":{"name":"aws-amplify-vue","version":"0.2.18-unstable.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.30","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4a6655ab34f37c42d9394826bd6d538682f4842f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.30.tgz","fileCount":47,"integrity":"sha512-6X18zEqp0ZHtr06wEDQe3ZjZX0L7QwFwsa9X/bZ23GOd4lBKhh9cGMTl+PDlrEKhd0b5ALY+Tw/nqbzy0IdNmg==","signatures":[{"sig":"MEQCIH0B0QQGbxz20bn1hLkLMk80zBZG73obnVZ9UWk6wKPQAiAlRZ1AsehxcAl4V13k7uOYJhjb+iut1BGkKu9ZPdFo9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm2NiCRA9TVsSAnZWagAA3NcP/0oUr7wZ/8RkyXFv4HF3\nHvv83ehh6mI1hkzfJS1VXh8EPSigwO6WCg1p7kAGDD+hnLjGu72S936fd3sW\nZyl5s/3CA7oGIozuUFwT1vdTUD66yoWSWRRokhVXquBlKVZpGzJO+yM2GyrT\nCaO1D69eswyh81OS/nsU3URwRlbFNvxEXr4EDu1bkBiCJtV+nm3J6CQKG+yN\n6n/1qvpn6oCoHVtMv+HzCg4tpO0OkuorA0uh9vsfwSpm6hM+cABoMVtZNqiC\nF8AnC/zJ9sYersT1qwk9V0we8RBY63DmvIwxLqGQcRIlD7UoLOJK2UB2rl49\n/0SHxu/OETLVZh2qLMlKgZjbDZlDWav2iKHonjXHvWXJPhN8iCd/VMQK0HcI\nivdX2/PRmTbeiEvILIWCEZy3zjWR17zOBo+oYF7CJAbeyAWx6m1wuZDFX+sf\nczbwJQsR5OwHCldQdLjzvEQqYb1j6eBaH24Mzhr+iTbZoFQdmlWDemaVvO6z\nXoaSELDgLo2RGByc0PhJ2737v7Ul0TMNTxCI7mDrSRuo3FOtIFbRs4A9IXee\nasgKCMH5gbICOTr+qECmFHrIl92gnoHikOfYb5yRqPt+CwN1CvRMTy8AWN2P\nEHKRZYkdmyt1b5/OFaYLXLgwy9AhQt2dlyeqS34XoLPGrYXL+z3XjCmiyH4s\nb5lP\r\n=Awtu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9a1055a2eeaf15a1406032bf4c039137edd09fe1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.30_1570464609642_0.21544207703199025","host":"s3://npm-registry-packages"}},"0.2.18-unstable.31":{"name":"aws-amplify-vue","version":"0.2.18-unstable.31","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.31","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3e57b8832d5d60bbcbd585bb04d146f54c9dfe61","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.31.tgz","fileCount":47,"integrity":"sha512-oMew5XpUH1mb9gUyQiQ0Gikaapnzc7bbnP8R/JOzDRmouQ3BtSG2rHN4GsAIFe36upHD09oyCG67CrG8Hwsj2A==","signatures":[{"sig":"MEUCIBDeVqvwmApNC94WADshQPHrucygh8+73vRI2qivFuFbAiEA1aHeU1h8anzV/CDK5ylftPv9lvAgEpH48lICxocMGvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnlSYCRA9TVsSAnZWagAAv2wQAIdBhG6BW4LHij4+MYt6\n5LU1AQSDsvgSuAX7nbVGzJn+6dlEypsXtpW++J94gRrwE9uU9uUWLehHDZem\nAMzU2nXlJZSS0CYBNXAVh4b22b5VYsVDo7bKiH/EYrRF2jaVQs8ElwYxP34v\nw3hk1E6U6fupRZedUEBiwK7ad5UWHp7jGGRfpeaFsfjZoQam50vMIQTKl/kP\nmoexTAUvsf6Xi5Q7aQAw/jcIl0cjV52vB364iVLeMGhrL45Puc5yO7MSqup/\nF6Ixre30FRWbZBZJzE9dK8SExu/Ktav8wbZhpQ+tSkwrd6dwIRiZDg57ymNA\nnRChUB9GwRNQphKk+GX0OyVrMMLT2OZi9FXvHlu2KmIVHc+y+QjPIrovNn3Q\nqCTKUnM9HTdGhx/z0a4g8Y5OeoGfXtnUqrJ5yl/86X5YgqOMPKYNE1um1XzY\n1SFb+PT/FN7BflCwkCaRf3kS4WM1fb2zY4SxvW+TJXPc9YvAa1MN/TvTZOk0\n74PhFTyNzisv9FWJ+B+CEqV4luTyEEbiyLYJ3Cn/ba6wqmIA5uoP0JIAeQtw\n4kcGGmBgy3SZfrNFhlVjIBDl3MtEN2rXjgMCxi456n+xPZnYQvywdNkLygT/\ncrlS6A4PhyyaIsWBzJDgQOsmqYmmjZFU8ItEj59/UMK5EC0Lz67H37JPigWK\n9bbg\r\n=4UUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e6f1bb339e9bdd87bd182d0d2c3057b2606a3eb8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.16.5/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.31_1570657431498_0.30454290921776184","host":"s3://npm-registry-packages"}},"0.2.18-unstable.32":{"name":"aws-amplify-vue","version":"0.2.18-unstable.32","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.18-unstable.32","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"139420215c575670ed477ab1d610707743800c27","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.18-unstable.32.tgz","fileCount":47,"integrity":"sha512-uIbQgckDBU4nGHzg0lQyPr7o6S48B2EexpFKFGBBp9Vn4Zz1vvljNP5JSk2mvKpDl0HijzQQBLu+3uNsQCQtOQ==","signatures":[{"sig":"MEUCIBr04kwmZZckpD3evKU/veXlujTZmNuaauYXyMGPyI9cAiEA2t8ulJa44kKApU9yEzwiN+O3LZC01Dewm6Re2Ow9JLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdn5HcCRA9TVsSAnZWagAA9UwP/3Bhv7ac4oIuvkDU9h1M\nhHCKbB7BF84Tjx+kxhZPJ8wZsdG9ArGBQK0uliBU6ApMVqQ4poU7ezRFYwaI\nkDMbq3jD5if5YiKQvhBWx6Jd0OKKCA/17dkInxPfTXhcUleDP8rEicGdRwTY\nGy+Vd6lAfNEslagN2XVOtcePdmJWYAythKKV6oM45ix6vBFEB5CRDGcbWbgf\nsCuA/L8N+Z77Dvjlybf9VLUMUG59vyKYrx9KxY3fHsCieG0rmSf/glODSv5f\ncCqVkH8y5WxLz8NSUu3GxAp8Jbh94ZlEv5kZomTxBPIN+0tZQpcCqk+xGtkA\nCyYHSXYfghkMsUy1WN34AzYlvAiPck9f+pNjD1sFt3xMz4/313v9XdL9WYC1\ndeqOrIK/G3Yvn9HgZ+abBSN7bwAgFlAw0R4tKJvH6n2HHk84XSB6zDixL3LD\nu6YUo8kNchyqA/ySwxkI5xsY7WZNWcs9egFRRG+bocIy2uGHINZmQAq2lyCt\neQv2RkP+qw8yCj/cQNPlmFInQYJ4haZ6UGXoibjfXc8FayK9o/GJvpkam8bw\nmFkwN026pIJPotaKrvAkiGiZn8o6Dgn1qe5MTB7J7Pv/2njenV/j3GTqdHkG\n8HHaAvtVw9eDVzNGSnS1u4G8WYvZk3arAyd+eLpoEmKC8l51Fg1wg5tMsGtj\ngvgT\r\n=FOE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3f80f658551952b9298d2d5ff8dfdd25f404b5f3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.18-unstable.32_1570738651345_0.24432517755604333","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"aws-amplify-vue","version":"0.3.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9afdf27e96b89c8ef739607628fd2346e981683e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.0.tgz","fileCount":47,"integrity":"sha512-9CYkegies7/K+l9gz4YBYC6y9DxKTg5wojQW6au+X8b3EQROMu83n4kHCcKcK0o+KEsk9Ak2VERUR3P0bK9gbA==","signatures":[{"sig":"MEYCIQDgVIfjfEg6aATcQQZcA1pgT7v8Pqfjekyg4VHFzactUAIhAJQA7W7RvH3vJDjaPzlpjL1uWBUxqsAbLWA5OtajVjab","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdn6hFCRA9TVsSAnZWagAAaREP/iohp2Nvm8YQin3eEIvG\neb18DzdoxcNC+0sRz51QvzawcY+cMUT60pRH7GET+gpo9gXMxh6GnAB+md3C\nXbMmbXm1ZILyCyJv7o6QIepRVlZ97ueT7uxZW0oM1eqfvnVW561tVy0Hye+N\nLTXRVzu+vs7BsbneH+Sbb5ZfSQz5Gqixtg/YVF85T+smOOYgkYfQYtrNAs0p\nhylJUKRGkY1Biec9w0iGE2zybMo8EW4kmPbKhls7iusx+fP0hsFOU/ibzndJ\n6sulchXGTbFgr34O09LAv/9MA1pyqXKo0IPpsEIUHWsvQ0k4cksZeGLoi6JF\nC+S894P1VnxcMyxBXqM2yCGTu68eRHtReHxqIqm/FdsAW5DGM/G8neTeDvvd\nhW1WIrTbsl2Adnmg33Qu+AuZJDN3iKSPxnMlxf1q0pljR20sIi7rVMiWtwJQ\nW+247ftBpz7I9KaIv8EWN0ItbefuRV90sTRxZd0goKoO63p2hBWsdD1Y1yK8\neicB7RNezXZ6SVE8ppHODXzacC3yv23iu9hfcOFJWU+TS4CCs0Xvh08kaGbS\nAJG3cr6rjYFWuaR1L50mDkq8pv66+xFp13f95rc/Q8pOgGMqY5TkEFAS5NLh\nhowYy8Jxevtz9kXs4/dP9rCQypuvXHqA5o82eEc++JSAC+etGpRDKvKllWe8\n6WTx\r\n=jb2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"347de7ccf15b75577ab4854780be36754807f1f8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.0_1570744388122_0.01961960767810833","host":"s3://npm-registry-packages"}},"0.3.2":{"name":"aws-amplify-vue","version":"0.3.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"28713119d2f6882fa27cf3b817ff602b691ff83a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.2.tgz","fileCount":47,"integrity":"sha512-mlFdQ9+tYsShHR2Xnr8EbMXunIiBOv1B6YnL3Epoy77/5LyLitRtNwOswe4kp08tB3pwbt8cRFBZk3q1YALO9w==","signatures":[{"sig":"MEQCIHqi74ZcwDCyOsWBIIkPCtRISCOBytsEiG36dCOrExwUAiAb5p9pgPMu0kNJwhg9w1xCB6wWNfAI2glLzT84Oo4n3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdn7BbCRA9TVsSAnZWagAAPR4P/i52WKDzRXDi3H4pUowA\nnfGPc5z0IIayk8H/dogu71OX1Qe4QYWhP2J/k/WmfoigO3pTYRwt7WHRsDx+\n5nHa4rfAupqHWVeMw4Ypat1b1kKacl4LJ2RDtUT4X9Y0sncL5B0dUD8n6zzZ\nEacirYXILQ16wLMSRRJFRrlbr/96FcpKNQ2FOL5V7N2eG63lCo84HfVLKXSy\nWIsQRs+xpUemiieq8di7GC6b5QM0hd9DSVrfkJQSSUdAjsx/muzQNCaFWWxJ\nVmUfLrUnRsEHu0yVZZeNOkiz1UUWRstFkPGXvp0brEOXOq2/47ugP2EXWE1X\nBm5C1LQHW+rw404wyX+ZVVBN0KdFCggF+2kzrV6lIa0oIWq19/nQzXW9uLEW\nU/y5lrcpwcAkC5qJft2/uAaT8eE/sdpsOya9oSe+DUHn4Q/2l+BaTM17l2Le\nueQtQ8nwx3lkvPCT66jisSSu8tFyJPYzZim/x/n1yJ0Uv/v3dnj3WbiVXGZ+\nuG43df9GydGlummOiZfSo4L6dF8Uf1sA0Tf7m3zwxs95nnL4X/6r6tLOXcO7\npN83mgHbujx9zWAEg46KM48qJoWaeGRg+v2fKjztryNmkK3bYJxzjrYE5XLQ\n17Rw4Zbg5icj/fUf2tNsfYLyYkXWzVIWN0XgQarZML0QRL76ZEy33C8JHMcF\nsOVZ\r\n=lhME\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"25ece3fc143cdd8eec43fbe78b9a5af4bc13d0ef","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.2_1570746458582_0.5143564401424379","host":"s3://npm-registry-packages"}},"0.3.3-unstable.0":{"name":"aws-amplify-vue","version":"0.3.3-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6e1f325fd45e6ee05745f1c9bd7ce10457b3ad2d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.0.tgz","fileCount":47,"integrity":"sha512-VAzFoxiQTMuOfaydSanQK9vp6sUmijH67bHa40FBb6ydhe++TscvQf13WJ11irMtjAlbuC4ri06UYTY5OHKraQ==","signatures":[{"sig":"MEYCIQCQLL2SKxA2NDoPkW52n2HLXvJaAf6EVovcMnzpVlLPAQIhAKbHyfYDt0x3yRctG2mNRm3D4qNhqJyJ47Ma0k0SIiBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpJASCRA9TVsSAnZWagAAVKkP/3nKcFSRbd8M+lOjKTiW\n8OPWEyp6sYnuby+u9+rWn/Mu9fZAnkPqa3j/LzRHuhwEwWHHaT/ByrZmX0fN\ndOA69Hg8ZmWuOuxO+4D5DIaUwet2vipavjYN9hVyc+lCasbIahxQGKJvvheF\nEZsJPjVOwPkhKUjZ9qFS9WAmH1IRKxL0K9O+0iHx9cvdD1gXRPHjbdgQoNnb\nfyfdAU20EyEHN8NOurSW9jGpJ0QF3f1B/qNGfFzPXsABvsKP9xWxYN+yVAlj\n3cV/C1HoB7tIvp/BGR+Bdvv1zhFVb82Bayzpgyw+3vYnH0aJngivqn3s+Lfb\ni5TkCPASZgMcTr/GvBsVJCMsKxn0OcREimqvS51lurY08vZAMpLWWjXL+Mux\nZ40OGyjUFzALvPj8MEVgngfV1zA8a95FhX0p/U7qpesciQaEjmOzlSI5FBua\n/P1rRPvYy0SEDUeuvO8Yd/+tKr7aws41x6IC5gWMrHTI0w5K1KqQXVVEtCFt\nZ1WNkapQCCYZTME1RSTw4yABWV2B2eTQvT70wNTivfkF8zqSI/9XuhjyEzfs\nXst9peMTA9kNjVDHdgcfx/c7b9OaGKOrSjvO5wL9YcjlnZg45KTl/MJqCi6n\nQzE4zQKOuty/b826IqX/YazecwVAeR2fcM4bDLo7NImIDHxZ9U1fn8gopjJL\nOr/P\r\n=zbeh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d2753633a939838e1c3568d6579e2da3307be039","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.0_1571065873574_0.9513813187133309","host":"s3://npm-registry-packages"}},"0.3.3-unstable.1":{"name":"aws-amplify-vue","version":"0.3.3-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"38d9a0a7926f3ab53e7b43090c28a91a92112088","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.1.tgz","fileCount":47,"integrity":"sha512-4Z/oEMetzNRbeVoy2+yn+7Dx9EedL8NetGjgcswOVcGSqW7xVTNJNA13QNRMy8kZMa00tCU0CTqhYvO8LYR9mQ==","signatures":[{"sig":"MEYCIQDnJX8z0QOS0lpqbQUcwmDy6//IrA787y5AsYpD2CJMjwIhAKW79H6CyPQ1Ji1B2iEC55jiYdEPf82jiDX44ijlRpgF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpeNnCRA9TVsSAnZWagAAXbsP+QBjw2PMUrQhQzPrWR2p\nomaqdgFGA6YSz5ZW2q71rlnLl49tqhrTVVetjM5xvr6cmn3MPcIwr2oqeSMo\nYh77zZzHDn3M4g6+U50ZX8zLDRPrbH/JVq4pQu46czy3rhKfCMo8b59Hzll2\nn2ZGt1886FIP5J/h43K0x6Pj6v5kzYxGSfK/AiMtIfWT+Pt9vjYX0afb/F01\nhkiMpLQIwtKWA+LccNlDncsbYgdq9fKr+GDEdsup/orwBJta8whDDI3EtD5Y\nbX2PDUkvonCW6MchO3EUqjTJp0jip6V9R5V79vnFSu9T//qf9bNLpBIWgQO3\nwhI+w/Duad/Z8ZN/E8PWj7KKfPo7cSG3fAmP6u/1aBSB9CT0DKUvzzFRym9i\n0ap6oRWcXF9Btc6mpSn/3R3wEcf0NygzzuALzpmVHsIV+Tyt9QiNqQuzN9Jk\nBlZ5qm8GD940UIeg6bZ1Xf4EiSjfoxGy4WRJwXF7fmUZ6RugwIseNrnP+0ll\n/SY1o+5JU+JIXy95KGeBrcV0c45fy0nrwfqEdXrV21WlOQG0TfY0JagTCRXj\ngZ2tRW+rJ8j6+kqJRKG9eloG+bhB30xiibgTeLT7Qx/GwQhE5QoOGfkNNRzu\nfCYyto5y2WJsPTKpej35kCYUPnZTAsycVf445Akq6Qrrj0qKHQ/PWDR+ZxBB\nZjuL\r\n=joyo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"efb8831f7435f2f852988e633633460b94ee0f1d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.1_1571152742259_0.8763071802367421","host":"s3://npm-registry-packages"}},"0.3.3-unstable.2":{"name":"aws-amplify-vue","version":"0.3.3-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0917bca2d801df8514f2bfafe2f424b94396b36f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.2.tgz","fileCount":47,"integrity":"sha512-B8gxQK8yV33Dn7PNdj8BtU7e1TFK28ABqd2G/sJiAEwsWADU+DPxBjFnuK25JnC24XJkSjjHGvn7oC3r/zGjrg==","signatures":[{"sig":"MEUCIAftfM61x7i5RAT54ujhLSqEFHU1Z6YkzK3sOd4RwebOAiEAxdWDp5OswRU+Mf05sd6wYg+6ADm+f9X4E+uES8ypJk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpecgCRA9TVsSAnZWagAAT24P/RvFKgHPbjpxs+Zl3rep\nMTBGWh00a60XqIhVrwWqj6pp1mT0844xT4QDPouDFE3/1Vc+DuqhttRrNC65\ntCN3JT61XVR97SoFhpiXFwfJgB8qkar9wAiprfUB06KX33UfOV+VSksFvisi\n6eUYdmZ0xUeX59PstJnsemmN2QC9T96S4ZNGMw368aj0Rqfe+ptgk29peqdW\nqrPJpq0DM7NjCMVRO4tfixfDp+bE915AGIARol+4+Ou7q57zUzRO4QzsgF/E\nMUAk51gHD6GZ46Yl6UT7/xoo5Q52a1Y6hxFy1BdNM+/e4Swcw169G1T4ULJ6\nAOeJdPIv9wYG0uihRSc8O3EGdi7MNYeBEhfGtt/xkH/MQX0qR7iziezXWnse\ncVotfWbeW3hbyfsWeVvKjoppJOE3dwEHyliQSOvy6w5jHFVbLNQFDn957bS0\nGJjo1Tvchx28bGpgB7rw32/BFCeU1osHm0uuzmHfKXWOsVlVibBHCLFVSTTo\nvjALknqoaaCmoE/cWcMdi7kr64JyysY/yRaNiZKKtOb6LRSOEvc0fEWpd3Aw\nGASxUc4ogaUTRdAVC3I9X4GwsRMmqOytvVgmOdULipVVsbArUE1gSJp9n/MH\nqzJAU97WslEthiRuyDQl4v8JNvW7S82S4J3wZg7xLp4yEHqiHyjS7vpX97rg\nRMT/\r\n=apV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0dfe91c33e9da3fcc5febcbd85ad7db27751e648","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.2_1571153695869_0.37234628081061927","host":"s3://npm-registry-packages"}},"0.3.3-unstable.3":{"name":"aws-amplify-vue","version":"0.3.3-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"33f75905f165fd6596f013038eb1cfe49fe0207a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.3.tgz","fileCount":47,"integrity":"sha512-TKXphXYO4i3vaXni5O5rxgIz37PlO7JJpCYwXc8HZ+weN6Hlkc+ul1me2/lj+u8TK+kpxVggHH+bXcslNZVKsQ==","signatures":[{"sig":"MEQCIDRqoxucIi5XF8p3ruaSWaI281fXmharBUGgRgQrQPJZAiBAVY8abnXwLnHUtpZgyoWOJdKiHgiCqq0Zs48MuIFdhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3881918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpiDGCRA9TVsSAnZWagAAUWYP/j9dw29asdDemSSgc3Mt\n/SWp7aSErDesUBNcXz+OweoUfYo6CyZBtUmp7T67zQ2QcROjhlyyEguLQqNf\nbblmjqPs/pHGPIegYtOkZ8/JzCWVqo7P1sLHDjU8hZn2qDk/4QeWsnG3U1rz\nWK5Ne+AJjfb5Adw6tv7kk/yy62hYCaeKgjp/XK5NeffwBzhzJYw9mz7ApSRT\nP8a8aiq6zzeGjpYR9/fgEbNs2sbX1PZi4+mHmIl7OSex9TrmKe+Loia0dKIr\ni/UaZN/sGDmOkRrlqHyyLc99fwcG7cGOcu3Nri/iWoFdvmRZbzpqZ/918yiK\neVh4Haxw+PGLggplPK3QC+XDlLHfRMx1SUZ/dGcpzV87sjcTrLgtJE2zJxUZ\n6jr33G2QX8OOBcgdDOw9P/LuiwPCPahFqK0sxuJOVAtR76Fd/+ZtDtHJt2bN\ns3UGKYB+3OIjzasvgV2QwUAbRSTeeIWnVHA3aV1nlwbosMH0rM+sXrgGEs0W\nbyQ2CTiXN2K4ZYv6NCI5ITEZBVURAgRzgUYUuhvSY88fqfLfMquIexEiKwTd\nxyDyihp8QTcMtPWXyo2VQ3Y0xP/xyS5s62nhUTp8jI2IEwjxGtHvsxFDKg8Z\nSko+1Aup9M6r0b/Emq1iBIslwmE4CrvYS1rwZdYBC9eFgAKxNHkhOfuuG+12\nsPnb\r\n=6zfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"854e53805651063530a5a725736d03ca4a845a0a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.17.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.3_1571168453759_0.7021584696719987","host":"s3://npm-registry-packages"}},"0.3.3-unstable.5":{"name":"aws-amplify-vue","version":"0.3.3-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"63484efba7a38468c835b53c552d0f88be1f54e4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.5.tgz","fileCount":47,"integrity":"sha512-WXBn8q65C8Yfb2cY23HuFrZxKZDMLKxgVWO6EA9Yiwk87EoKYizWCu1yYowegl+ngSqmyQRRLtlmfkhoBd8HEQ==","signatures":[{"sig":"MEQCIHkznBAZWD6Jg+lQV9bvQSxLFk3hZeLAofQOp1rN/As0AiB8WkBDeI2r5FFU7/xxfsABp2qEpOJDiN513LWVpCdX+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqKy6CRA9TVsSAnZWagAAzCcQAIdrhwPNRvKniuIskotw\nTyBgwG1akFJurNoI4xWcYuNoCkW851oUeG2oeXsG9BxcMUMc/QVGXI7bq4QW\ng4MQCWokc/hQeTd5gtJ6Jz2g/CatU4Lo4tBxV1Ou+P6GlMabMJpxyXQWgC8f\nBQKo1L96BOZLR5zlcEUMdJp8Nb9qh41d1XuT18hB2548FP9UiUduynlghP2k\nVJcHEfDRftahsPFEmB14GGCTlHZGMrgkzUSbTGmkYdlnZX5WyeSH7Bibt+nZ\n34heVtVGDbBWSYFBUcYcOcxpJ4esMl5L7VdyjPcVJgM2rPKalT3AsSZz1KVf\nzARue0NIYpuRdTixVNyoenv8WDxxoMHWYpmSBgLHpYkz+8S1A6Gqr7a/WHgR\n1D7yet1MJ5lnOY/PyOdpXgI4XXkl47J2BIzJ382pOL5vBjk74aXb8vqv4rJO\n40hz8L4XUGXZf1lcULykmQsOuOzcaa4kvGRdCWOASvQr623DLgfdRiR2QpiI\ncpONG/KSPbA/P4mfTXSsGe+X1VUN2Yyo8zMZX4ChTFlX/PklInG/DHGNVg87\nwuPrqozuPf9/v9gU5AB3GeBZLc2LhbYPHFTVIDrR9HO6lMpbtxl/52o8wDAi\nlVUsdBKZKyuook7TdQeNZ3IZHzggXoFtcw8fwaXQEM33yAxLbLJ1mWKXdykC\nAWrc\r\n=sbrc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5c206308452023ca44b21162272e13f86ea6d59d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.5_1571335346531_0.41648915711035617","host":"s3://npm-registry-packages"}},"0.3.3-unstable.6":{"name":"aws-amplify-vue","version":"0.3.3-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8797baa57b9c2faf72b4cefcbf3aa29af7fe0939","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.6.tgz","fileCount":47,"integrity":"sha512-N6mLfltPdDiEXCRYgDwNBZ69vCjNgwTTnd8eqYcTwmsfcrUggC+HOZ8OnnReTTpJMosiJ7u8iYeL+wGTsv/l7Q==","signatures":[{"sig":"MEYCIQCx65cR2xV8174h2ydOQg+bZBRn+kWtxIg18vz6QoorTQIhAPBossFm1gcss/uKXq6LAa747VaTUHD/OqgvkBJR9Qom","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqRhKCRA9TVsSAnZWagAAZK0P/RdkTIH4NTHZaeRlEUx/\nSGceL4pdcTBr9OXVtkj1TZm84bfYD005jFc+n7AMWhxJ0hFMdb1O24B3SI7m\nYvFDZTDbJiAOvr1EXm6qIU7R+YMRLfNBhb4+Flf6F6x+tANQJsWcUd/8Kv24\nAtPJJlBAovIYItxT8FuSb6kHbrxu+Hb5dwHOqQUFkbRwJ4v9Q7htm8CDeWsC\notIITTjnOdoLj8CS4y+PkxK+CJbn+sTw6w1grj6uYFffKhqQw4Z/fCd1HyBo\niqN4zTHAA53+GfzwDzXbGmKuehYW4EBjbR3ljsFSjmpOXnL6UagPq9I3cWTM\nMspXPseBn556gaA+dpNm7jNB2K5B95ayZizaoJahxQYfjGEd3yyNehid0bzb\n+JNhB8BbFNZ2fJm5uTtmQYMcSOSPbFDyN1jLaJ1uHN+8SYFiibGK8s2V0I5O\ncxhXNKpyIyFnvHJJlNmnA86FDAZ/jqiDYp6M/qKd21hn5naLHWayCq+XbIgl\nRo9s1PTHfdCczwhk0DjpbYSGiAlY/CtRU1gk/bkoAcTs8yuONgXmi0qQQdWq\n0G7/XUfn/nhVT+gUTLtqJxwQke7YD2tfD7+ksJDuKwAEhRLJX0yRfXKEmnNG\nRw5DxbWiU3bIN38JJ2uj42rARpQ4ZYyJwA9oG/oodrchjtWXlCSbqtIkY4vh\nCleN\r\n=Yrsd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0269812ff4009abb25464dc8a183c3fb6ee23e3d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.6_1571362890139_0.7125795738350522","host":"s3://npm-registry-packages"}},"0.3.3-unstable.7":{"name":"aws-amplify-vue","version":"0.3.3-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"aab02e155c8d1742a0a51bb21148810861d8999a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.7.tgz","fileCount":47,"integrity":"sha512-AWMpQskvHEBLzgIyxzwG21mFmS9C47kGbsjoJ4bwMzkVC9YbNj/fcI40UP31/FxAwHmK1pfsnrAQ6KyzutSvnA==","signatures":[{"sig":"MEQCIGQ2rciuizMPut5P4xQFFco097syt3Fc0HEBba8sQAN4AiB4za3hpBPdH0275B76Djknh78ZeLuKDxM5kRIMuOffxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqSvPCRA9TVsSAnZWagAAo5YP/2B+1HUC2+izJiNB5EdD\ni1L/eRdJNkvr9iX951WM7Sm1xlYtDWkHoeLjfwAUmGPFICsGCVMMm+rURX0Q\nn3Kg5P4fkW8rINilIzYIEfh7YnYnbSykdOoAEYHhlQ0+pJIbrYeIKWkXEbsb\n/qorGR8hqCagF3uSePi6LjMt2xEqK4tcH0bDVez0S2QV1aikVWGXJ3sdtRBc\nG9N1rjKLroCYrtP30c2o3DLdg7xKrbB8FCYf8qeuj4xbYmm/Wo8bKKDbRBMk\n4l0yZS3etxhGAysEEA5phzuOcko0/qDkX2rdHBIth2IrCYKYl/tFiAQ6Catx\n3mzsTSPdVCALoAD/AYWU53tNE9UkEc9VQ/lDSNF4jtEH8X+JoaCPT7i9YwHJ\nqIdcxEtiZX2Sju7/o8zqGoYgVwqqbKYIsqSddoE9rA+U6t3QH95Yae5F19Ur\n270pXnBcw2X0/Wh1+oMGPstGpLoEuDyhF54ih0q1gHvByOQDEdCJdl34NnYi\nA/+LV1ddYFIu5QMHsOMhQHf7q1yU6FeT3FJneED9X/PX+FTQksZMHW0njsud\n+g2GCiMm2G9JT2zMyvA5PDkA9hfhmnTfe6rZzHwR7Mfkj4+Mp65mzrgwWUUe\nyzqfd4h42b4DZguUYqVDCUYZixeKWTVtXTKPqCM3CghKu/vy+AunjMrWzeGD\nn3D5\r\n=3YS7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"94b7181d0c37fa9dbfaec8d09b93c0c9f1246ec3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.7_1571367887168_0.3126166912804371","host":"s3://npm-registry-packages"}},"0.3.3-unstable.8":{"name":"aws-amplify-vue","version":"0.3.3-unstable.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9a7b81688a44dc10cebf09a47a97e6db91356918","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.8.tgz","fileCount":47,"integrity":"sha512-NZFh5Te2gc7Gp6W+tFcbpy6x7DD2HHxxsIg70CTB5mgGhgoLQxOn5xAW/9PwLRxFtAmvHmcPwF1JG9WEy1sQ9A==","signatures":[{"sig":"MEQCIHEKDkirlUiyDydGrDfOLl+jhzV2IuUrDw8PYgA0iDNSAiBxlmTwM60F6ITFcUtWKgWz8rWDF5FPpWcgdnuS/xJAcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrz9BCRA9TVsSAnZWagAAX2cP/1Chmnh2Aw6tClWKBEgT\nMDp47zlMajNhPl/v7O00wdCZMMNLC4X7eUVtg9X3vC9lPP74CDO8POVnopkF\n3GNRH8/vH6vTHbICGrf0/DI7Owj51nEQ6Mj9lYHOVk0q3/QpJRDYKSBUZEWc\n+iZ20XzHtjmh5xDTmMaeWUCoVIrKVvPArdZnuJz3N4NrMRnSNMNxZqnIModU\nfAA40U4GUshrb1NbqokrbiUPGdRHp+8Dkt52eyTJXHi4d1PZZ2MSzc6bGOku\nS1PJ7KcfwyE06Y79RPHltzxrvBdQ4uG6aVdL2r9ZLlYMtpH/6TItp20WalML\n/9lNvV6/SQOJ4xTWJ4kcJiK/ENwQnsGtfDlNebAcLVtUB/SfU3dkqAUim+KY\nqM8nRvd8b/0j+G5VrndwXjNyAmDleGysUfvRVyJjsqzBCTRU96GOwRE6WIE4\nspleRmROfqviJ6ZxjKZF36h0G4cg5RrvHL6+3x71OOqXYhYhqK0aIGitCocN\n830wuKLDG0yvO1yEBlfvZw5R3jQ8Lh6R0KbKcyvybkYLY1GMfld9jfdyF2IV\n+tHeQl+LF3l2XtdFcj6IFYHSsAEhHQ3jtX4FYT0yH0WiE/jfGt80FPSFo0Cc\n+Qmzc9UKZBwZ9xyt0Ab8mpeaFwEPDbwSH1K89LsPorvlkGaS+i7HKrxIbLWP\novVq\r\n=27Ei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2cbe1f5e2efe4698e4b991e4d8e5b578ee29b87d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.8_1571766080492_0.7030241550340308","host":"s3://npm-registry-packages"}},"0.3.3-unstable.9":{"name":"aws-amplify-vue","version":"0.3.3-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cfd8205f5f60f7d28b800948de39c2d1467a10e8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.9.tgz","fileCount":47,"integrity":"sha512-fwiQiY9/ob7Qa3mprLqQDFNDBg7aeId47dP7oIkNtj59MiQ7y/mXXYpsJ9ddZcEv8gGfFAsvsAoJC63QI6zGHg==","signatures":[{"sig":"MEQCIEI44jhRqlHQnEHs+IDs+JRwf0ZnjrZSsjs922IQdc/ZAiBUOn21ieencRmwvSmscfQ3+89NBCSI5rz0ODEZLCOnxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr2EFCRA9TVsSAnZWagAARi8QAKGEBjWLuy2y3wlyPgJH\nZEQZJ6Pqi0axVedawHrhn3y4Zu2gvC5CzReI1hRvRwJ7Trnzwai8oeIuWsbg\nzI/VeZrhopq78SMpu9eneW9qPxmlKXnNdpCXsW2UkdBlraXuUwnT7ixbpjD0\nrH4L780uD32JmU6jp5iB9pktIl8cPmB38rIwEKIfhdkbL0Ht3M/0FeYjRLBX\nhVSXctukcMH0leIu3/fCN5b2ULygHmo4T2P6GlrNkWvbKa0hFEo01KrMqsCH\n7DhvxScftkr2l8/VypsLobLJcw+SoSLg11tBDRfpcMlv2lyroGFtHkxybw8q\n6XzbH5bOg315inTkXFdud76xRA5jUnvB88hqOfz6fbT8VUkVNmAzb22su2v4\nUvosFUzKOUWHlKX9eerK+iBNNZoBVp0FoFvhvqNtmyHGcqVrnaBzvgyXbF5J\nReuqNwNxJfyy6h60xI1I1BybnZY7zNiqx/EwiqaNKAqRmBrgF70ub+Z0C44r\nxokOURwZoAoe43ePMXwFpAP0FPnXP/8+yg5Q/ghoy2RQ91EwYXUfFZP21RCo\njMDsvgamYpe5dHLq5KD2bYrA6V7xdPeFfh6kBxynEXE4i30qj+SfnoErtlGq\nz1zyn7tT28+NGuES043Ebg47ZfXGS1ovn0Wh6NhVxaCXvRbDqRChVHIiBbaZ\nwbMr\r\n=P+Qc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b0585184d0efb626bbd14abb60dd7f483b6e8833","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.9_1571774724673_0.38301743429906665","host":"s3://npm-registry-packages"}},"0.3.3-unstable.10":{"name":"aws-amplify-vue","version":"0.3.3-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e05832e071b6f2112a0439c52427b9d8f33ae393","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.10.tgz","fileCount":47,"integrity":"sha512-xza4RPbmLLiS5fyQi+bzaqafXpukxkAZt8b2zkTDmoE7JKEXluCv1DUZ9EVS/+zmDs9guHJcc129Jnj/QzwXgA==","signatures":[{"sig":"MEUCIHUs4Z7hA224tYxU5OFrDP5sjEYNMaWkcNb0qEHlSzTcAiEArotMdwMFQblMz7bkd0n+LuBH02dlUYbJyoPnPSC3D1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr2/nCRA9TVsSAnZWagAA9aYQAIlHOEQ7/FD67bQybVyN\nJ8iO7Z6frfFNADtNesE/slxsf0ElaRYP+1o4xIu6OIoDwcMkqXBNCfz8RtHf\npVgRRFzcs6/9idtbhe8b74JU0u7pv69nlr1G9vSdAhU6IG8fcE0Q2HiLkMo4\n0sFTs86xs4eqhz04QO2O6Ciw5vWKIVVZBc2A6JZ5qYXO+v2dLjS4viQTUP6v\nDSeTU3FrF194Ravnmg2rdp6kI322UOBubhG7n+PwyAeVaowz+6cBIY/yko8X\n23t7tbmo36eEHa5aOyt43egMxC/muFbXpQq8AzaxW85RGr6X5AS3vFz+JfFi\nH2bMAgu4y7KXITRxX+INYnFTyMHBqfQ8ejyi1AKPX+ngK4eWVAK0qNtiLoRe\nLaEOUID9Jh9xR69Yd6Pj+TgIKlQJ3xxhXmApdpvu4v8FyANYl6bWIK5Tp1xM\nCmajxBOgJNp3HTkHIL7JzdfNMV9D3MkDLPqUv/+QA2p27w2CCPKRqifMoZEK\nH4Hanmkx8M84FPixqgib2G7t0fg/dveg6N/PPe75k5r1x7x5S/hMg3Hc/flp\nXwXNQE6UPEYJuMU9vYIm3isXNEjI7jVngBG9fdhv9LzARFSsxwMrfTlxfN5+\namWDQJt30tAJDbYbvInMV/Q5aiaREo4fvmZAsbxMjYfsLjoQj0scJ3/XMX4C\naY7n\r\n=oy68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"625a25234c81956a99ebcd2964fb9a70dfad19c2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.10_1571778535217_0.15315936901416216","host":"s3://npm-registry-packages"}},"0.3.3-unstable.11":{"name":"aws-amplify-vue","version":"0.3.3-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3-unstable.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f3117e1e140774182415cf0942b592485553c1ae","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3-unstable.11.tgz","fileCount":47,"integrity":"sha512-Sgtn1vtNgQ3QhOFWdfISpkQjvAO1I04jjWpElma2yGRLma5CpTxv3yfF55jmwQD9UoGS3gPul29lcPJIsQaZaQ==","signatures":[{"sig":"MEYCIQCAlSWmqsPePeiYY8L2r7RjZJaIAudYwyyd4kvaz+p6BgIhAOU9oAVf/RiwKmoCEVuO/ifzuF1ec5qsfb9s9Cr08B3D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3846910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsJHeCRA9TVsSAnZWagAAOeQP+wVj56N+gSrAOUThYiZX\nGk5PaisgEO3+6WaJge4jjb/xHF7wCJHeJ28Iu9dSjscpaZNumcWlfzvCGpDr\n0hzrwe0CaI0WqqezGqf31PX5Omn7XTTUahKxSmBi0ucgxuZhVKNtsiV37M89\nx60p6WdNQQeDr6X+d5HRnSpvbgZbujQBGO6JZuY4fCJUKw6gECjskkTCR2qC\n2ZAQ1pEG16LhrEqkKgkZOaWL3VS45fehkmnVoin9mcg1xj2eobVEJX0ZAfc0\nGkeHi1otonZmuXfATBI01WxFRH8N7kSSuAsYx7O43CX7hiJxGzUA2PAX0gdz\nmtqmgD4Ng3FbHOa3sL3dVG6sFqAWlBe/3nuyckyVVdB9hsndpwLVl2DMjb6k\n7BZlfGmUWkQswn1z9tMOfj7uMtLfIfoC05zzBr1o9xmP9KUfXI3e22CX8xrX\nu9lCHA88ZwU83b17g+3TpxqtB3LC0J4Sk++FtOhAEtgChIRrwMs//+dqwiY9\nIdQPb0zvNwvGjz8gbG2bc+LwztL9BXriUc1TKUXmHkR8IMPoSKg7+gjAEvvV\n2ohi3N15sscL7zMJBzRGWzfxB2Ma2M5sj1n2sBZ35oqEfjo/Vfo3tRXlGWDE\nkW4MP16APuK3ldzyrAHcfkFIh6kifoNmM7ZjwZQLJ7z42MrzyGyI7liJfcZo\n9JUy\r\n=u1C0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4bd5c7ebef0ad223d4c05a452e696242927a750f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3-unstable.11_1571852765893_0.05996392458886435","host":"s3://npm-registry-packages"}},"0.3.3":{"name":"aws-amplify-vue","version":"0.3.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7302dae4a9a0e9bacc2359162bde802d779abc60","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.3.tgz","fileCount":47,"integrity":"sha512-3xlKIj4oIWY05XUcs2yeAyFVZQGHjMukc6ANAeeNoXSGcOCfn5s8ypmDTTQIVZGMIUkdD3kN4bw37MgdKGDrcA==","signatures":[{"sig":"MEUCIADKWpAo90Ot8TNraVUuM9dkz7GJVyj0Wh6dVX5VSoUMAiEA3KzTo1cuzTFdHUQrPT8tPJnv3M8ISDDqPfIj6E6s7pM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsLtvCRA9TVsSAnZWagAAfc0QAJWHEXVN0VS5aUa9NIIB\nmHc7Djhv4gB2+MtNFvYJL4q25U5fLbojCBa64Z48qwTXQ5QkbiWuDshBzEK8\ndXIN4E7jzQBb9gXAcC+o+OYAIqUoylx3j5yPahBUqfBJ1VjZlQE/m0VNmyYG\nRNIluY2zPKPIbhEe15EtYKvQqJNFBH5SqAXJcCiOnXT40+W413oNlaXjTu/6\nf14otugOH3C0KkNHB/8df7V3XrTphridJ0faIhfnmn6KDpclMAWtt5VMSX3T\nYBDF8zEJmGu+a/usVFqU7+uhZtHe6Q6BSqG9iIjLqfmiufzObQlzylPv9me/\n6cIbDYFvwC+ru0lgEuAivOb6CDLiSguZvgNwPyjRoXnjah++KugGon0Gm2Po\nbMowWKEB80XPJ7WUWjNvRZqFQOBgPFFDFcg4YvVRqZhewdpx8yGK29I4DO3t\nNKSwc4gGXLGFwYmwtFQqDuxacJ/uwKld/UgOZYHT1Hpr9T80oChkgdUwlNQy\nBDkxj4tYdMDAIEUVK4vhA3dGbfRblSK/PA/bKwS2iqp3xnYrda54yJCRh/k2\noZCtI/qfxghB2RJ2QaezoBxpQ42aKvsxn2QYvTNfBPp7RXByldq5wQPjMqHA\nRlvZWZ3Sx+CtwpRdtWnYI1j+QQg/jcTSzBZxefDMFojOreE6ncCNtRcftRaa\nenwr\r\n=Wjp/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"233dd1c56cb637193e4b44437c38853359d0de59","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.3_1571863406927_0.46683188630068173","host":"s3://npm-registry-packages"}},"0.3.4-unstable.0":{"name":"aws-amplify-vue","version":"0.3.4-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0a917602b4ff6572c85e58fff09c7be6f0255cd4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.0.tgz","fileCount":47,"integrity":"sha512-h3/eOFD7RMp41x9EK9jzquB826iNHOzFM3rNIE0fSaiCKdbP3hPS2k2xErSNL38Icd2hgtFiL8KawP8LJerSkw==","signatures":[{"sig":"MEYCIQCcLg4H8jXw5gouF2/Vj2Evy/Hkv8QpyFBYEL7S0ZuBdwIhAN1U3S+vRYvAnIfGQw6ttedD19jxx0KbigSG5Djc2STi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsNc1CRA9TVsSAnZWagAAUiMP/jVHIZM0b8UgNciDYooY\nYr3HYkJrdxn2mTacQe0ODAgz5fHmNKIE1MAk3ZjSiFgttzWt8pPSUgH4KJiR\n9S1/I2ks3LYKLA4aAqfjHkkDP3bYlyjjLfPHhqSIT/vdZJ06FbFS04kzDqzF\ncOie7DqfOZV+CUbgywhogC6pdxTm6Mqx18xKnVF/T4rlWWErdTGV/Q5GisK4\n3NuRVYS6mzpdZ2EKxXLxE9kKwiDE9ppUonqABjrTr8KQyp8fNVqI+aLBA5ZD\nAOQN5YPk9CpldQfUiW9s8IjNagDXMmVz2w6IfAziNWF4lIRDxAk1r5DdIj+Q\nSA1HtOJF3ak4AHvNppKBZrdl5x/ZBmiqrc2CzhVklUCqZreULGziGsmsqHzl\nBkhZZU+7yXMHOIT9gjTxSv8ooa5UgC5a9Ctvbe9LKPYAyxo4z7vMOMluK1Oj\n2X3FlWv9FoWL53XDP7TdyXblJewXWMIwG9Px2L6PQtmGELo4N14wQe31DIdZ\nl3TlANfYubYMMun4PAci1xazFKmcv4xYuhF+QdZVsV/u8tfOmY1rpZ+FSM6w\nriA/RamWw9vnqWQnK8XvuHrGIODaCWBSA1Tn/ShANqM/jePCHJgcJtUHqU7i\nigV2/YwQ35EFEnyoeY9xqO1kzMs3tBUl8l55xgYFjMZkd4jXnNfzp991JLax\nWBdO\r\n=YUgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e12a9a490c35a495101bad2352907c8a7e2255b5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.0_1571870516545_0.6165713995495012","host":"s3://npm-registry-packages"}},"0.3.4-unstable.1":{"name":"aws-amplify-vue","version":"0.3.4-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6aeaff4a938c8bd5258db2d0ce8110bd5534d5ca","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.1.tgz","fileCount":47,"integrity":"sha512-Bwd0mJl5XzFb4f9KgmPx6sn/SA1ngdMpt63b8wnzPkf1v6qPshrBZQfsJ4TPJXK02Wjtahl3HK4LTHcRQqmyJA==","signatures":[{"sig":"MEYCIQC38eTy3B6DdvsPf4ilR1MxDjZUPyDHP8S7aUzckWXMFQIhAIGzwwQaMvXYN8QRP6/nViFPS3R9tOPH1vdchkmAlHgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsfaDCRA9TVsSAnZWagAAC1oP/2WH198EeraFE0sxSF52\nN+6GJUBZ4VHZhnZE7QL0GoAuWX6LHMpFImMcx/U1VbXsHdjIRZTWJ6W3YDNG\nwCiO5aHZYKLLKaofTlz1crnIL6F2fU7RoBQH26ii/WenmlVOeKHCqId5EBN1\nRaY8pGWKIx7KVIy11GcVEoIYn0kgqIC1ei/rvnz3tzh4Yu7vYwC1ZJrRILXT\ninUHmQ+nMeoHZxnlcVpHLgkcc54p3e33+TtVWxrOmRO3PizLIwEJvnXoPOOJ\na584qQyek5basAYmRF3/JXJoV81zUOF+ONqB9K4mi5jysp4kHQ1kCAF0Fljo\nO/EN0mhOD9kwr4sNaq/IHnCrrCSBSzEqrYh25RMaXp5vGXAY4Aa/4Ln5Vjcs\nRM8p6fdnBTX27y1RGcwQLaWqDnm/SPFUjpfcV14OKXyprUrB8224U8bglV1d\nnGHZPH50v1O8de2RJsSLiIvF6WjlQVXMWkJ5Rfqv96DGW2xj93gpFRLqUzcU\nHxAK9jwIo0mFk8TeGifayzVAJw7Z8bvZeeGbWr5L3PnGw8RDaQGP1itpmRke\nDJOgCxkV+ddusDo1YhLeXj7CQftuIiPFJzCJ0pS7rHISNZnXOMwd0qyILG9T\np3Eo8R/pJ+L0jazXHpI/j7BU1Yuc9zOFN6aHcFsEYqJLVBFUzRBCdI4Ov25N\nsbhq\r\n=6DXU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4846968b55f4ad1c22667f767939ba224be86c79","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.1_1571944066561_0.752528162359053","host":"s3://npm-registry-packages"}},"0.3.4-unstable.2":{"name":"aws-amplify-vue","version":"0.3.4-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e63f672d7b7a90feb250897a07e0d1d98d7e4e12","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.2.tgz","fileCount":47,"integrity":"sha512-X/UajaZR3cKaNRAQdYzsh1W5srksPVgg6/2VmRixn1XjXva2zd+s/YlFG9nLe10gvCUOt+WGevKHyUMisgpCGQ==","signatures":[{"sig":"MEYCIQDlLDN+xMUiGuYBh3k0iNQZsta3EBu5xZLMZQYPm9b+WwIhANdzktMR6Ar6wDjpr9SoqaMgBcM+1o6ehycie4whKrJn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsj+MCRA9TVsSAnZWagAAI+IQAJ1jDHkjTF+aO6y0xQqY\n/uQ5EaBrIICqCaggYuNpTT9yEdQLWxS18Romv1+J0RCTVX7Lpz+TO5f1cZ2F\nfJDOnY3kLhEImbnYJZRC+qe1yXMK3KTLpYXbeAQOyGyXBOGcjI/NKpCY8kFh\ny8wD8wniBxC3WI469RpoJPBvjfC46gn5G47f5K4K8gHGy3fNn6kdXYfmr56m\nSVTQGqebxKG03anfPVF7tQGauV+yhJ+Sju7REduf/ImZ51hYwocUCCOaxvIK\nqaynyBz9ShqtmRE9BtLPMnptNtNhX0W4k7B+JbAQVqFVmDS7STqsskk+gk4G\nDjBnd0JRZdyZVeZoLQENZxCIv6Sm49hQD3GXcFZmYFoc6XBvMc2DVZURhONX\nAJAcuZjkUVHphGQ9rGEVLWDuIxyQdnr0OEvxG/eOju7GohWsj1cTt03a9W29\ne5FJDSkY0jK54uDuCuwNOSHeBLOIuoW/hbrtXkqVaCtSfcd6JDURvynVeNjP\n3WLAqtznJ3Fr7MVUj7leVd1rpHIt1CBU62HzB+thz0fxwZivtkhtunx0+efi\nb4BgQH7AwrNR17CKTKwh1zxFBYei5L7L93EWxhmaVqo42IUdbfOQTme7qZ1s\nPMaCUOGcP64Q9lR9rrgvU/N6tFPCHn5VkWGEVM7cHrTF1R0FEasqXKW7WYZA\nnzCz\r\n=Nno4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"04845cb277bc60448c631c49fabe8310f7688d4a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.2_1571962763528_0.6378731960884194","host":"s3://npm-registry-packages"}},"0.3.4-unstable.3":{"name":"aws-amplify-vue","version":"0.3.4-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7a795bd73ffba589de0c0b9e250721b1076d880b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.3.tgz","fileCount":47,"integrity":"sha512-Z0YaOi1bai+qnYCixa7wbUxOy1/+r0RjpFHreG5e1mVxOuWrdeWSSPgI4atzj5fhF1d6fUKVR4lXrjhwB3f7ng==","signatures":[{"sig":"MEUCIQDxIqdjrJEeZUlEiDiukIYio6LN6D7hPR7rjnV0BaAy/AIgY7vkdas8YFe3qnqFAmPVy9CpuaUQZdM1aGQjxm1RD5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdskJ0CRA9TVsSAnZWagAA4v8P/imEWmcUGe4JpqycLDa9\nvBURGZZT2+7AvrwigVRrU+mzSv7AmZ25aQTzmvCvIH+6RHyWvvjyAn4yhsGB\nhSNmJgDHBBUaaci83pszf0bDV5PwxrXeqck3t628OmKMloNM3JfIe1UsgnQ+\nh8AKbVhzLKmbq0bYqIfc7MUNVQfIbBWD3BFzTSy1penfFUaPtW7Oh13qnxYk\nK4QnXj/HJN3oNxFSwRx2hZlCq+zkbbvkHb12HfzOU0eed/YzZx6o5DqEPj+O\nAu3RoQOacPq8Bl8thVbdM6weXgSqcoEwRpDClKrxSHfH/lmITjlW3GQI4CTA\n7ICzB1bdmbfTZJqEuby2M9bvbsaGTP7nXQnUafWrgc5ko5zAnKN7AJL6fyuw\nlqzTlSco9ZPoZBa4WD6eTQ786O3bOplbwvefQ0HlnTiPbVBPFoJtyvZkaB/4\nIMnJDfe9BM4iBIO2Hbp75i7OOaeX3XWmxSTSZ8kN04js+zQDYlRNwlMH8esl\n6goyyCcTC42UYpRh6za0qVV6Updj9CziOag/UnnPSgv8ob0s8/ELrrX5fSf+\nKxABTMziv2Gwk50E9yPsy3TFJf4rXys/1yVSZPdDNc3zmGp022A3XmF04MJS\nBlOqwl6SnHPvuIOXl/vcqveM43cjP0ktLnGWaDA6BdAcWMpFcLh7/1fjaD5s\nF0Uq\r\n=RmEB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"be6d5400aed14ecb6af564666e866e605664476c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.3_1571963508157_0.2852805761984396","host":"s3://npm-registry-packages"}},"0.3.4-unstable.4":{"name":"aws-amplify-vue","version":"0.3.4-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3df2555c79d9a10d9e1043d07388851010e614f1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.4.tgz","fileCount":47,"integrity":"sha512-pXJLwYcOUT0NHDcfGlc+3WJIedkBXZxsOHSDnK53qSTivqfYcZd4O4wyTHPAAB0HRgHPL10AgMVoh4khJBCwRg==","signatures":[{"sig":"MEQCIHlAHgx8kE5QegeV9sScnMfQCOK6+Na4qC8xzV6HuGXCAiA4kS0ju/WC4fX7EZuH3DdFjDJP6gIlKFLgAemkEespjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslk7CRA9TVsSAnZWagAAvEMP/ikDANzIqoaGYNUfEmb8\nuh7XCUXiDSlpwiOmgFBsSTjHRmPmhIqrYCfZOfCbBnn521JJorJyfcF/5WwU\n98nFY4t7QNLvfHIdAhbIWNpJFxxgOgMcBEJ9J2anSUk/xQ9PgzhqYnhfnqH+\nBRU3dzG6TX+SrzSoOR6X5Weu8daWMnCK8McAzaYnfzGSyGu/+7ZP0rWYIJZP\nXxuSkZCC2VJYcZWhDyqUPs/meQ4TP7Thf24tWdDzEndGAkEWc+IvICukX4BA\nZtCxR7ISwK8KHqfoeBSVB2CeVVPwW9q8gyYX+hNm9oyMsx19gD0KfO783GK9\nA4ilvtEi7x7HdeAe3/PVxVLaouTDvLjPj6UTQpfOw2Gvkn2NJsYaXhKABGPt\ns5tZ7pv4abLw3D0QlL/mLiFAUAPxVMS4YLv/CA5xB45MRexckVqSLseBOzTI\nEYmB0oWGBPF3pabS1AxUKw8bZfn7KJNGGpoU8I4jx7Az2QQK2E2I2+zJLSiD\nqMLYjEQGe5Wc2WafMArnrhMI0hPLlyS6pJVUoggITjlq2i/e8QwAtEX1bKv9\nA2Ji3nkrWn0skQycSffWyomHhnCOwS5k9oTXGn8B8FzeWEHk+263vURabWN/\nP+jGVMkKRUG4wwf1pGs4P+W9JNbytpio8bTqI8NazTCHA+a97sAkfmK09BnE\nSTFs\r\n=5VyO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"63253ac9062ba5a906c0cbc01ab4af45879e2f28","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.4_1571969338524_0.29358709770886304","host":"s3://npm-registry-packages"}},"0.3.4-unstable.5":{"name":"aws-amplify-vue","version":"0.3.4-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"abb5bbe798837b98ac0c3ee27256f7bd443b17fd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.5.tgz","fileCount":47,"integrity":"sha512-ch4GDSWn47cnrA4OhI/JmLx1IxzwMh2hmhk5pd44A8czOZ6RM7ZVCHZw3c9sqHn1yrjcYL6OvJk5HeX4O/O7tg==","signatures":[{"sig":"MEYCIQC51ZXcPRczKWp5ajfjlcdv+N+pucEEnA7s1nLVKvgU0QIhAOYNCoIZlJyW0eYDIPAbKv/W1GxeBdUdguwkT58MRuZU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds1qlCRA9TVsSAnZWagAAPxoP/ieTnAU9ces+utsJnIvU\n+BkJ4rWjWiZCdrTmPw66KZbVefGUi4CTdFTS5MpMixXCv5aGAlP07+SY5e0/\ne8kcC2G4iCFvD4QYY5YPYznAyLd5j2AMHpI8FzSMrxnTe2srlXXaERlOiGKz\nd3a5ZrY9A4u7OgE6Kv9oyJbdxT+i/R/mfQQcnxL6O+GMPdhzNLfw3+rl0QHX\nowkP9Ltl3FBgppIo58//kvVZL7uH6Tb5TdlymCAf92ImJHUoLzPgAC4gHZ3m\nwRZTSyZJIvyGSWtlwEejMNwt/8aDRQntQV93P/ZbqqHiQM30J6q90rZ1l6lN\nIarxTbXdkEXDmWYpVmK8abv/zbSSOgZeNi3ib2HVLpfnv0QULUUp4TaGNvLr\nsMPZ28jQHua/CDzC1MdNAwxXYmtK5yDv2g9IVjCAlN/5+QqjZeBbDEZoeQ8C\nCTNl1Tmbqul7YgheZOx1ZF88Inr11CecpEpbRUvvBwcnLaDX/+DqcEKg0Vx/\n6qGB7azRzGVxUm5k9AmlHe96U1U+BPjzORQOWpsYl+RMpSZuVKxuWor1sETG\nrivFcH5BiyXCbV+I2ghCvcNA+J89rpntRy0yUbd0kM3LegtDT3MUrAILRzJZ\ng1BFQ+IwLckdG5lJ2fCAwu0NtTa2n/QTzxX7qPVhfVKBU8ySSrV6eqEoMVlS\n/3sg\r\n=uLaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c0fa439b28672a02662bc160058e2a0fb2bf4c13","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.5_1572035235279_0.304985580740037","host":"s3://npm-registry-packages"}},"0.3.4-unstable.7":{"name":"aws-amplify-vue","version":"0.3.4-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"49391337da5ce8379eda688d6c4fe7d6b4f0215b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.7.tgz","fileCount":47,"integrity":"sha512-9WvqN+GvxrkZONeEYXvUYH/nJBqBsRbR1UJ+22urtkSJHDdQl6ahtkcaod9QA9uYRX0EFKzTbqcUWlPcMwbrUg==","signatures":[{"sig":"MEUCICtx0D1vmVcirQp/bsVfpydXVLgfRJHXrBJRwL/qltGiAiEAvBMUzKc798EyWs6F4n2T1nWd1LJ8XNRueo1NmZiDc0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduLHMCRA9TVsSAnZWagAA5moQAIxmQk2gD3be7w2qMWOO\n6u6KGMy6RpJ0mm4IBS3yX3TGuuqL2n4bUOHcChq+gdtnKpJ8Al3kszn0q0TC\nlL8Gzbf/gFQIIN9H88HQbX5KSQNdSfOWlpjXuG4Dza4QW99Ogt1sjkfEeB7h\nG7dWbRKxxUS0j7YXPiPT9LBrNzEfmd6PAGUN0/lgjzpxpy2BrwcLggxLjpO4\ns2m6xIj0QEyy5ageJMd0sy61sC5DYarDC+CFfJ8xKeVCDLVPCUyshWpmzhaE\nOPtuMKnIuV358KB2F1b8k33gKyunuf4jIyALtRIW49BqR4RscsqzVry0zfvS\n2x9KsSBlDpS8f9yIkAEESqedcIPWdLy4Kqy4X0ez/n//Ac56dBIhObpQYZNa\ntWW/Vo5BCZXXoS6a6GNTYkEAFYDN/LGIoB5u0B8YObZllIeSN0SlHc6uvMid\ni76VZKL3vhkZCdlvEtpTEtmRg3hPOqWk7+nMK3roqR0msX5hiUmXLJg9uQ8z\nE7gbVEdAOdwbYJz7oYEYB6XRnxitEFDB0X6HqYgrg47XrdQvB1xvo5r5Hb/8\nUwseyKsg5jyWi49RTCqHshOyQjRMANhh9hcno/eu1VQdCwAf+zNIlNhGTQxg\nHys+0NPHr4XxHYsPfYk6v5beConv0300OaGPeqp9083c8cCkTtl2WHDLVwAn\n5HVG\r\n=2YfD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ac34816df326331cfe04474fdf35790c52f4a1d3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.7_1572385228067_0.4891248164347468","host":"s3://npm-registry-packages"}},"0.3.4-unstable.10":{"name":"aws-amplify-vue","version":"0.3.4-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"fde3b1e3a5dc3e10604b38ce2ae749542f02aecc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.10.tgz","fileCount":47,"integrity":"sha512-RubGDYWyvB9bnFNWKks87SX/vTnEe9D1lMIOkIfr7WxUH4YgyOqZ8ukZUKpA879s103/1NzvZ+L3L0C1IabpTA==","signatures":[{"sig":"MEUCIF184Zxuyp3d3ssExoFjGILpfqyfqJ5XR1iY/dHKQMXuAiEAncvAG7VabP4f4fK1JNwl+tOmItPUK5Za3K5fqoCbPFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdudYkCRA9TVsSAnZWagAAxAEP/jR5jTmT9Ma1VEDZ7+Wi\nRNbcCUMk7/sVhm630b3JtggZYWJxLVYiENO5YjG8iJvhKyTemLEYSTOzku8x\ngyM1EvtG28/r9IRttrjR7pTYs9lc4XaaHIP/4nZiuX+A++tlGcF9hxDjtBLb\ndLyTfzYGUjKrtYN7ybS3ttVcioJLPDcNmySbKOoYsZHE0fM7IoomU8H+PlLQ\nv8t4rxZ8Jy4+K3nFNHjiRwBct9gOfrwIdfgvO3JbXXBzL3n1aFxWR3kOmYn1\nSYpWSUH1KROS0MWTsV2/PnDzUakub9XfZJQip7fSypaLdfiR4vNJuTCtGDn2\nyz2MZh6AvJqwvZvTnJarwhwjcZjOvRdSVmM821YYjScFSHecmf5QhAngBGZS\nnRdYO+T0GrmEfN+0f7UTA7sndL96nJSr9sxZDgZBufYgH0ACdfmPyfbLZVY6\nNfLI8HS7gVH8S0ruZaHVvlxUDDpgljehlENhjzODQCe+sg8LEJf32xGuAk7R\n29ECmskUKPlyAUOvagub3LIOqCyPn2pMsZhrjvl/H8Oth8nPneRVOsXFA/+o\ngmmgAKuT3FhgkiApkVMP/q19jvKceiTklJhjfo0St2wxpsC6ajG/hRj9qJ7b\nd2/zZKj0LuPzo34BE89jEAQQIpbxqU3GDY3nMDsXUvLe5vdKgA7HCeU8jRQF\nzciR\r\n=JN/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8a8ca8738d92f7f420031752b4535c87ca4c496b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.10_1572460067823_0.4668038606265634","host":"s3://npm-registry-packages"}},"0.3.4-unstable.11":{"name":"aws-amplify-vue","version":"0.3.4-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"49d906604fb977571696f92285639d9a131ecfa4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.11.tgz","fileCount":47,"integrity":"sha512-uFwJfDCj7HilqUWZTx0yNneB/Kokr7gn8nXgq1MKNm4tt2szB/PjNanWJNULqrYxWe//TZvuPyMBZL8LKcW+6Q==","signatures":[{"sig":"MEQCIAS/liZkR16iLapcLHC1uX0ID8LqnCkJUG2HPAzwnHdEAiBVPiQUXZBiMVIi2jdPqGf87o0K0HQtLq2hTFC88fTqMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3847093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdud4ACRA9TVsSAnZWagAAkVoQAJHnpOL5P9dxxVPYi6BO\nV+fjhDO5tBl8zFdKv0A6VT5tKMNU4kuAdUTpH/0rhhRH8GqK3JJx0xIzQPEu\nuXcXJLU1VDekijRmTEDxASRU04KlAMexqXAjDNQD/Xc1dAeLcMRc38F44v1h\n9XVZaFC9Mqoyb6pngCFBXEFMezEdLc2GZOJlB2jZQcxiE0/jplLvROAZfjr6\nqR4y45JPjnZwdzzGFsJAMim1/SNNhr6sMnOlDDGuaIiPs6FsmlK+6lz5RcVO\nkx08w1viSvmtlU/BX3NHMK7gsPju5v29S148WDzm2cxq8EMdhOkW3BC0NLzn\noQ64yfwo/lBQWJWQYFWFsr5g48P9y5LWMhDywn+7PvKbwA9aU4610T0ePK6V\n2ffAWaGKWfjd1rfWRyKngMg87rKiO+WFaJyLc+5Kl3JHAyaft3jTF/FjMDjC\n6+AiT6RfBx3yvydX2XQPjc9OsS2FqWNMbDD0So0kYOvXGPd3EPUUg3pB8OjQ\nvJ90Mtob0sPPUR9lrogZyHKY+PL6r/xMrdX6u/jbuDKYchtkhH+Zs88sAKCi\nXNiw75lTE3CS9/Yz5AEGT5xiySrSwByGF5K8MGZp3Pykvs2G3xehMrmG/wgq\njy291k7g5QJDVayADsGgcVplUGYv8+zij4xhbfSSGhvJq4w7hT3zBPCY+El5\nLr4M\r\n=sCrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"70b2ea6257445abe8356ec53047df966570261aa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.11_1572462079799_0.8849741017035131","host":"s3://npm-registry-packages"}},"0.3.4-unstable.12":{"name":"aws-amplify-vue","version":"0.3.4-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.12","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"51a167b845441bb54dc24f7e9086544ed7b10ac4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.12.tgz","fileCount":47,"integrity":"sha512-XSdwdgot8Zc1WNkUAny/jUrUOUhOPrXWumcds9bMcP3UBKai6AOBImf9x/AyuFOXeSWpe+kaLfd01pL6U/54Lw==","signatures":[{"sig":"MEUCIDDcNVxe8/4pPe4Qd25u1S7mZKXI7mXJYa2kpCFrOrRyAiEA+GhJ4H+WaqkFG/XCIYDBc9c/8SFsfs96cuZzTIrU1zM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduyRaCRA9TVsSAnZWagAAInQP/383T2vaBA2IbhUyDKYQ\npOnnKZkNK4m9j8GlQn3i5R06wjufhHm5HlC2m4oteYpf2BmON0qVgZ3SlnUO\nVHf59iIchS2VPelXBhif/EoDHRr7KBIRYQZKnBt4vCJwT4cFjwRKOgJ8bT91\nNIYF0UTh00SOeWYTO2eqGmAA6n0vtR4G9l/n3snqs40K5T1okq0wBwvEMhEB\nWfKvEVN3oV58nJBUJPs1IxXEF+rQalLhXibzYlIFdWDeyzmmF/KTejvYNrI7\nmb+i6euPdkXCRe4Z2dyoDA1EmI1kxMNPO/0W+BxAkOysfSJzl5566mw7FlaO\na6Vt0ADFHIo6TQXlmkGnrkP2qP80TCuZwjDfIKso+sl93bjQhlBBJ4zL/c/d\n1dIVGxpxmfkpslZLk1wcYwlOxh08gwPaAb6pH0roMRPkL+dIhZEQ0WxnGKIB\na3S+rwLBm/8rFfBSBGNjolnR1FQ+4Lju4rcC3OftraFGOPaj0loc2lMtGvAW\n6+KdMXfcD3Bba4QIEA4Q6wgtkGXGyzjNBvDYjtUui/rHNrVL8kUgaUmPFg+i\ncniXPA/CVkc+r4lSAmHYhjNcZlH6tNNjrlbpK3aexS29beeq+eirN2iVVRF2\n8PrYm+kkPNO2PWawYA2qu/8kOtChsGNw5PtmzhE9mGrDAEtzz7CcnXrUvguQ\ns/uv\r\n=7w6w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f9e7b1bba66c3d13245179f5c6f9888cf426f51d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.12_1572545626326_0.9117962165666997","host":"s3://npm-registry-packages"}},"0.3.4-unstable.13":{"name":"aws-amplify-vue","version":"0.3.4-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.13","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"45147bc608628d4f566cde3153e3d3b3ce9c341d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.13.tgz","fileCount":47,"integrity":"sha512-/zca7l60SVV3m5uQxcev4jgLb4rTVnbiB3j8HrAnQTozDMSZ1Cz3YTucivimkvlB0/cjcMMstyi0AyCYrJfK3g==","signatures":[{"sig":"MEYCIQDz0sjf9v4pysiSnLOnPRItfe73Wm2BKHgOdyz6y3UbCgIhAN8jTQhXDBG7xZUqk5KsDy3uXoDgJPHfhW8TfXshIpa2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduylTCRA9TVsSAnZWagAAsTMQAIwKPhuVw43p82u+G3cw\n5ZTLsHmGsZ+TtQPO/7kOdJHPsdAo169OZ/On2YkCdYnBfys9YxnvyK0zgkdY\nmF4LwJdcWquG5mxY0s40IX5yLF4bpLWVSxt6vNW7tncEyvyNcM/Rpwc3jBTD\nVb+d+hs4qRxNfNNB6cmUgqHKX4+U+pMRklz3gXpMWBAWfrEvsDagsQAZMDVr\nrXqebVz21X7nH44C9sNwjiRDw8htgXDieTFBJQjA+q3lKD6pCwhNhB6ZY6hq\nhW46NaYPvG8zGlTUFlaEwInPAhfcARc+7RRgghhCB7YO5cMQX3+49xs1Dn/6\nU1DBsg16N9C+0gcyfDTq9fjzVr+Fy9NSQYy2bdnRhE58pUAZknNyLdkZwwpv\n75vtoP8/cEt9diO+08uUdtPEgWPR7TKNSWLvnv4P94CiryUOG/HZTZNB5bFZ\ngm7YB4E/dpagXJFgJCfRsurMadWmmznV/yCZgdsgK9ni4I3+x2gln324BH2k\nS12/3l76ZZz1lbfWg4ZaCwBVYUxrVoNdqrei9bwybTltcvRpC16E0bm8MYlO\nHUorcbXW1u7qU118uJXUh8DJ9XlIOSuPsTLLnjxOYJuQgoq1+60mQkV/5cTi\nGoczyesWYGO8bHBN8NxH46BWA3YCpsTVIoSfR+yD/zJk5EJMDqsb2sVq9I74\nsICw\r\n=ZvyH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"023f4960d80c9774d85cbc7593175d7380fcbed2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.13_1572546898723_0.978187119452286","host":"s3://npm-registry-packages"}},"0.3.4-unstable.14":{"name":"aws-amplify-vue","version":"0.3.4-unstable.14","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.14","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c72ceed5bc7395ffc2e578ca77a5942bac284504","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.14.tgz","fileCount":47,"integrity":"sha512-b+j8IzGPco2Xaf3gIhcrMsja2jcgykRLH86XRs8HXwP+moeFGRWNPeP0Wp4Xy551Zg+q4UbcgtVFakst9zsU0Q==","signatures":[{"sig":"MEUCICairwolcuG3zQqHHlLcDsXYvS8cGfd0S6i69qyNpZGrAiEA5NjYpvFO/XmmlSn/MkguKkrrE9WF7vNiIRUACqk9vA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduzb1CRA9TVsSAnZWagAA+jMP/jAh31QkklMaSYzBUGP4\nDqPv/rI/8QHccTcUW1vMBmJTKZVSXu065FX+nC2lkpl0ljXyvi2c4L6HMd0O\nPDoD78pr9fXj0t51EwdGnJuSGjlcNNP37+hDyZxF1l0R61DUiIUm9R8nAhRp\niD6PZyj9n7Dtmh+xzXvjz7E5st8Hd8hb6R5WawaQivcpkH1rw4RQRiEc2gMu\n/fqdFRqJsjODiL96orlq2rxTqvbD6yPZke+K8eAQw00Rsy8ioxQf4CjnwmT3\nh6YCofwiOeHNBmvOPHf7BXUWXiBBQSUcLmjIix3CVsq+4r7lXhuvLuHxqNlH\nfqgA/MROMJWgCqa+YdCkHLrsdb0YdvLU0OB6E3MNBg40Af//oYQtPlRu/gHZ\nQTgMULTZHeJ1Ioinq7tBHi10dH9ahn70rHf7Rfp9Cwa7OFo0IkYt5zVns+G2\nPgPP5/z79t20tGSCJy+7LfwwLclFDssg5aQl9cqlzXYihUSGIVWcRQEfLtlO\nsxwQANIx+0R6f9TQ5zjk+ZXPPMZZ5zgkGrPjJEv5EhFn32OwVmPfheWR3zsl\n05iqMOy+2PbgBkIBqL89Rf46Y19NzQZfHIDseMKb0lVNtjNe7SbMU+uVoJik\nopISuctpgz3s4w/4zvAzMh5jNoD1jfrjEm/uz/qs8ty0GRd7shVKdLJFf0TA\n3P+Y\r\n=J4Kd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3b9c04345c56f314db07d8eaa5ab52bcf34af33c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.14_1572550389189_0.7400766428187269","host":"s3://npm-registry-packages"}},"0.3.4-unstable.15":{"name":"aws-amplify-vue","version":"0.3.4-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3d30c55f4c8a395b54c1c30be3d77ed84634e381","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.15.tgz","fileCount":47,"integrity":"sha512-NqpajVQK0gWzezhdVoqVrEDSQW/cu/Xb4F58P7EeGhWohpQqs8hARdp2bevwj8tljWqUbDWbS30unXD+8buJ5g==","signatures":[{"sig":"MEQCIHbv1JivxnZofk30WwnoqJw5X9rqDM5NOU9+YOQVvgmqAiAgSLkClvMMxsvwDdn9TEKR73HS89OslFZZ3ist1b49pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHCBCRA9TVsSAnZWagAAG04P/ij/oXjZz5KJWHlMXvTh\nWerWi6uel01GwLKMutJZly8liFsFVVHszLTCz0ASD72h1+sgkYba4OoU24mM\nnu9zKPqjaxCNAH+i2xhsP0TYqOfei7xiavLtxq8Azwo3cCn46UHlvdrug0pX\n52oe3kozBe3+SfRilJYcyNtC2M7hxNGNL5Bf1mrASayN3U8teSbmDatBLhgL\nfYVvTavSkrlPvLGi+rmYsayyzsC74LEH8pMDQbS4HyKWpvg9izTp/vHbDCP4\njznq5allNthwB3a7BDDELyFKBzyLOP2UfvCueJO1GpcyLjp1hHlxhjNOkNYO\nKYhtyX8F0OXZ21iCcGbl7GPu8sslkse7/3sQZLBAQUL5C9SR+T0CTnmpcXAX\n7aSiUAnaEqhZhzWDb63bo1/MSetqF94ke8VIfG5zH+zZg81BqEJXkSUVro+Y\n89fSd6KGLOPtexjUvBJ/+Vgs8l8OXggfiAICcCPAolKNOgjo9ANzazxPx75N\n/s+8SuqFAMw0CJ6Gg0GOUK/8qlaPHsMSGYpJZCA0r3HY0kJUk/oaWtUxvuko\nPWAMFOVzqsMuJIF5BSsyw9KvZ5/KjH1MA7MPqC+OCsnHZhr0VAYLugE3pg2O\naxSO4Aym1OmOs1p6tbSwqPsYCDY2qxCbUgEvrn2IfKkouFX+FbdeO4SxQdCX\nN/Io\r\n=dDtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"73a1d16a4379f432781ec0e2da3e1c4293a5ff29","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.15_1572630649663_0.755457389289302","host":"s3://npm-registry-packages"}},"0.3.4-unstable.16":{"name":"aws-amplify-vue","version":"0.3.4-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.16","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1d75c67e908ecd91e38e89855bec77697edc4d4b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.16.tgz","fileCount":47,"integrity":"sha512-WmGUZEWb5SUGdGg6b8yBw5YFMlePyISB8bNm/kZr91jYe5ZKJg2RIQNquNskyEgkaqGWGoXzqcPjiOlOmpKlrA==","signatures":[{"sig":"MEUCIELZ+CtGznfcO2tSrVBFcRuq9wP4ZE4QKJMyLfiZEis5AiEAsG5SA5E5Y3XN7Ovt+ZArx7+LFyB5sB1UwR9N5yuBIew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwNlBCRA9TVsSAnZWagAASWIP/jhpYaB4x2Wjcit8T/5I\np/jAUtu83XptjMxbGsj9wVLiozjacua4q3S8xG9vXrTlQUVGQxCJ8gPk3Cmv\nBxmgLNTmuiVlc2M5h4qhRNxBC6r/7xe+OzQKF0DcPwJ3+xIc3hyXnNAK7pDI\nRxzTD6BDcLK/TKyWCE3OU3pErZY/RgiU7OJmdWl6dgd1pIXbfGGLbPIxE0WO\nfvcAjrNVJv0YBFHKVt9CcE+mhQt0CGi+QtJyxbtzPwy6d9bCe0JX+wJBbxsB\n1yIpmw/19xdktU7A68Ldj+VA3xiZD41aU/jAVsqrVscoCCdDyJkqrqpBUhrb\nmXIw+G6FwnK0B0eIBv85e2m7JEK28btHdfzs7SB0EYQa4hEGWmVOlZTXTjYr\ntk/krv4uPrIncJceDLG0617wBkHIiu6ehpeXOlzR6Uy2MI4SRvH0KvXcyP3F\nEJkz97SSgIo5LUa28FPaHWVDPsdEwJo449y7rhO8D+7ysYAO4Q1bkO1m1jZh\nMlKwZ7oAhESPn9ZRulhDcq2WdYbNXgQQtSlgCmSvyHi4dhEn0fNZsd/Htf2q\nkyK6P9hR+YDW+XGFa/ySeVGEqIUUoCZXN/f7ot+7Fu6Ziiz5DCxTNxM/qeSE\nfqOhTT20awm3679WjWdsNS4qBFLQV5OO70N2SjV14ybNLi55EhppLyp+suLY\nFGwC\r\n=fMIk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e61d9066bdaed8f0fdf4902d55386987a2691832","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.16_1572919617254_0.16306700112071137","host":"s3://npm-registry-packages"}},"0.3.4-unstable.17":{"name":"aws-amplify-vue","version":"0.3.4-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6f8cbf13d58027ca30c471416f3d149dd6ec11d1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.17.tgz","fileCount":47,"integrity":"sha512-LTJymTkS6u47MPwbA5tgnoSCX/Ez6Inp4mvo8mkYO1J5wQPNMmGhWzCLiqU2GiU2/UyK4/fZJuw/Fxx4Ykng2A==","signatures":[{"sig":"MEUCIGa8f0ttgHr7RORUgEjBduda7BYdZO/JfdL6x0Ggm8xJAiEAgcLeKeZE/KmPtGr5F6FT3YlgkWTYco46SjYDKWmmgwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwfswCRA9TVsSAnZWagAAOvkQAJ4yTc9Wyol5zwP8F1rp\nYeAlsrG4dUc5EIUWfBJAo9UJmXgf5F9McewGs1ZCTlz6vkhes1Uvrs2WexDy\nbceMj7wIGqMM4S6haVyyaq4q96bJwGE4R3o8vFvpjT2bXRqOr4d7P1bDnKSP\nYZhJywyHpfkpZe0gRel3Wd5zk5vtFm/DZ8b+QV+dgYssa5ViiCDuQjsOJRHh\nZNMny3JTXmMDCYAW16YsTNHoh+sYuVEHJMoXy12+Kxkqz+B1rkmMgv9c5VrM\n0cpOhCsMFPtUJnCnxhR69UhzwGRMy18scBd6FETexdn93k77We9MSvD7nGlh\nLyGkfXX8SOqpIplvsnYoSlIyL4gFfKRgY7t0s5k7sO0anuBiJLday1Nq5WYr\nSEmBOtYP+JDiZIvls0g2y6yix/3UiJPaQaavi3I2v6O/SBfzckUhGom/JpEo\n2MFsnQeMtI1GiYxjwG5njAHU0FKKoohYgdSL7aZ3KmWwPCR2MtU2tvYNkAD1\nJfcUIPqpU+409zzEulILo5nURUp5Y6ITy40p+5bx5gDqUG7tn4pW7G9WBez1\nzzlSoS9YZCFi/9IMh7KjL7j0ki9iHRk8nueFHHT+MrC0N/mR3nzPGjs5nMm6\nTbqF2uYugOyya8H39q2lshCGGr33H+5qiv/G/SOz4puG/5xgg37Hmo9gFW9k\ny9q0\r\n=H1Gh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"218c8d567a13e853a87e416fed81c6f96a66e413","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.17_1572993839907_0.6922319726038675","host":"s3://npm-registry-packages"}},"0.3.4-unstable.18":{"name":"aws-amplify-vue","version":"0.3.4-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"009780ac959a6de033197fb4432ae4bd561417ef","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.18.tgz","fileCount":47,"integrity":"sha512-g5kICnXHn5+RtF8vzc1Go54XzVg44X9kQqSAJAlVdPTIoN/PskhZlZEijBMau7ez54E3Ll0xHzAPmQcUNVjH9g==","signatures":[{"sig":"MEUCIQDL/RyFTwsmPgN7spMyAgyudyQnrZAtoeXm1+fTjl10tAIgIqJonVvBKUzhJ5Q9ToUR55h14Ex3kKJK4mpshvDKa6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwhL5CRA9TVsSAnZWagAAZksP/inUHKLxLYoMFNSYJjKT\nfCJig6xY9JgjT1Z7IrbeLa8HetCrdI8SQqscVygG0O5O1TzlU/Sk91NOp3bY\n4izTJO2eQ8LDZb7/pO61syYngwGE4O+ZYjiYZEELKT+Lk56V6lNdxoxdYxP1\nOL5Rbq1yYB0TGW/GE4PYdS6n+vJU31Ixfw9q+8icCiOfh881zf3c4emUNeK6\naHkdjldbvuoEb3LrfWQUeojCPzxW7VZznQPAP4S2dGP7FCVy3DqRK+UTTdPS\nxJR/A7Wz4D4/zq71sNT1adHK9wHbX5pJIlQImboA+vtUcBefSeexIQuBSUC8\nNSFthABlCJ3RAPPQYbEhtUuj4leA5/+AatIAwe1P7cnQr8lobr3UtSNuIl7d\nPc1np6huKqx9Edg6yboi6KrduIpHXdFQm90ZOKGSiPIqWPPdJKHZwO66Dn7q\nZU3RD+S9jKIXW7lEbxKDg40mnzJioVj+/snNpRPw6M6ybKp1vNY9QW9xnrSK\nLjADzcWnRcweGgtMNhccp8fPbU0uy5jVhBJKL8cbwTDe/Uh/uPjV9tNP/O68\nhGQUPpbkJp5GemlCHr0vpcvrezRtKExtmcCj9WatmugghLvYOKIVPxHk2na0\ndER36g/OarY+QLYBkZHD3MGbuPeJKfUsAvnE34l4bdNZurZm9bDwIkI+w9fB\nIhLC\r\n=OT9y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f37cff7a099b9f2463239b971e6bbefef7d204c9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.3/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.18_1572999929188_0.22777225795241685","host":"s3://npm-registry-packages"}},"0.3.4-unstable.19":{"name":"aws-amplify-vue","version":"0.3.4-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"29d14705d17fcc5b07789ab0ddf92813ae73e5a7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.19.tgz","fileCount":47,"integrity":"sha512-yILJQog8e855mdqZthMYTp7JPFNSoFYAzVpHmpjRXQ+ovVN0xcxK5Ez/n6/vQ3OepZwnh9iCYUqygZeMPYpkYg==","signatures":[{"sig":"MEYCIQCUMpoK4OJgnmVymOXT45cs7p9+Leq+nJm0/VAQt+WykgIhAIHkMDTIBdzhC6I/RXjcd+GTYrcNKXynM5DXr78acziA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3849138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxivdCRA9TVsSAnZWagAA1fwP/Rfb8l5uw4bMcvlHV3qA\n4VdwX+0FluxwHFxukycwV1/8Z8jd7Y9t3yAZL0+2yXnEDRHS4W2W6GR9keYg\nhCAMAwuL42PMJJwGlwNwWtmLuohEeXzep12SM4sZGL3aHnEqnRR8J/tvZl4G\nZWLBdQiY9m7/gscYlVdIFLvTcoyph/dlKWmRzpZSbQUkRRJFmVH4HbwaV9DM\nnOhwj2cNm0YTRMC0EvVxhhN2Yt5HP3ZDyAc3JTDoDPjmDcViDqwXwhP1A6sO\nyu8/b7rm2xyXcavKl7qIsTdQG5+/qE/CsWSmjM/hY8wxUrGdkeRGvmlnkrlX\ndcAJM3Cj+YsYszwS5PXOABL0IPVL0HUo/dyfDSL5uM+p31dWFLa02lYAawE5\n6vgbpOGHvqo6CDvGUHIMibZjUR2r7tLW0bfHTQe6BmAd+0AHkmHzZvUlTvvT\n88LhBxFCcaXh3W+a3Lp+oaiTOfl2RGwUgD+3lixNyHW2+1W9TwUwU1EYOtcp\nZyOmp/mj9+3GxfmOmROhxlAITpjOcDRpwHHu2OfU0MKANMl22HUpJ836h50f\n19v6jJwLjmdPbKbppPDjoqvNGM9C9ws2ohmBMuwdvNj3SsSBJqbrNhS8IWSt\ncbKdqlVSaejwTLx2u8PZthuikST0ZDykuNDNv5t9robnLpM11+LNX8nnZ0ei\ngvA6\r\n=DEiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bd964221413ad8140d3be8e327b179c54c2bb91f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.19_1573268444606_0.32725188083929124","host":"s3://npm-registry-packages"}},"0.3.4-unstable.20":{"name":"aws-amplify-vue","version":"0.3.4-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"485197a0d8309c6bb62ed1bd73d3c81d01c5b37e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.20.tgz","fileCount":47,"integrity":"sha512-2B9L2PKB2ov+X22lMDHv5fMvbn0d1sP2M74HGNfYXujEQtB0PN6bn9z193k+5yzMzOO0QSiX/V+K+NTtJs9u8Q==","signatures":[{"sig":"MEUCIBzYsF2yDReYBUvfP9LU/VuOgM5vdL3Pihl1HnQpEoqlAiEA9qh4Chnw9NVqORJdXg4lmpNdOJmu5OWLE0B6evnLTdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdygXcCRA9TVsSAnZWagAAGAUQAJYdatvN9z8/Nt7iwkla\nrTgIwhK2NnApuw8iZ3za8qatGvHwth1WYlK0odoIDnY5kjau/fyTVyD/hNQc\nWyxrfXSkHeMSADvlX833livz0cAFpm6W9WzWWGrsarNfA2CRiMhoc22BfsUL\n0BLrPjLr58Z4Q3mHRLgN9/fzDNbFZp7XoZjbxZEuv0s1JKxou7f93upS+R3N\nbdBLRNiJsBVyy0O+BTG+mz3DvHNbYiDRzxqArD5yrzPlF9EEvaQhet6pRHZX\nm+iy9v/ekBjTJ5TbLJ4Fz6LzcWU2WrAFX9sRiru9A/tMeyEzQJh5QHsxXUgY\nZaO8WXw/THT6/G0P8SxDXvLCafrCieALw6+mHk2EFOmek5MrGS5GbOI23gSm\nz/+zfpCQ4pHoWnyVfoPAkLzpdYUebNi60XzaUHBoIGdtYJGTnJvXlDQ6l/UU\nB+U1t52C/0XfrVTS/Oh5hjlFu5iqbT9KCjYTUaL+BgVpb2S6AS4FFI1dh0lf\nBjAiePeaTeSp/iwsmJ6QxyMA7JvC3lJLlVM9z75Phuu1Ms7KScCBQTKr1E8w\n1LmqYQHY3FFn8Z6suHNFD4LElD23VfxWoBrWLGSEXH1n9E4dEvPOsfVFxDhA\noVR1FZPtlrKXkyNvZtFn+0pnbkQvtOW8Z4I2mFXsTb9jCc0hsCyXiQsXbtMb\nc2yc\r\n=VGm2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"055e5308efc308ae6beee78f8963bb2f812e1f85","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.20_1573520860425_0.7697628256854172","host":"s3://npm-registry-packages"}},"0.3.4-unstable.21":{"name":"aws-amplify-vue","version":"0.3.4-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"517c359bba32d7011c0d7f3536713db06a8d9622","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.21.tgz","fileCount":47,"integrity":"sha512-onZWqGGeIAcT5d1D1wsI5nEHHwqHXCDCrbYbhM+1HsuuQAz8aHeUa5hviU65YbQ/MxGzyPfyd1wJ/swiFRCNkA==","signatures":[{"sig":"MEYCIQCQlni/WP3NTx0hZF5y6SdvcDukIJw/f83kmBHsQ62zdgIhALx0I0RBIQoj7NZPsnNT89NmGVndeZx/NlK2kT1Tmp2f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzKBqCRA9TVsSAnZWagAAGd8QAJfv71mehBvsA5u/ZN4r\n5gvTvpW8yTu3jbbHD6uxhi0UEwxgiyLzNi3yn69FvYR6B+uj1ls7hgk4kZOS\nXL8sphkQe5jyEdLIaJmIeSJdyT4DArM+WxrtW/o3f9RtUzm7I6Vh6MCov33K\nmTQwkWl+EOy3h9If19Jk624072pheAzg/S+cYiAaJD7+qhfuKDbgyXmjn688\nzm506n9MWjfmOAnlxNlSMNa19bnJBdqBSiAhHyAmiNmY/Q5PHT4Qo2AJrdPU\nJt1jV0LVEaYuMumJOzDKY8s+eJUH2Ib1iLnvI3fiOiz7Y8HsccbzDX+2cjDJ\nqpYV9vF9CiR5JDQ2m3A8GVsnph0xlcxcJG86bUX3fORrIOBpizOJhosFjxPr\nIVFoOQKTyst8Lpho+o4JtNedAgmhRlMPGZ9rIiOGWaEdoMbq6JctzLoE6wLF\nwJhTp2gGhhAf1vyEHiNM4wGzJLkIIT+oFcfmC8PObQYorMrJSoSssOxJt0CE\nKz4nHALIJ7ggIgujrvz2iXgTXTeh+lkHVd0r7QcS2ipPfUx+QwYj4cxE61lp\ng7nioUr/PkRkbwhu66XAd7r6ksN6agp+xlRkyZfQzI/yxNSE2ZqOU+jvnaUb\nuKdtyb1iQ4X+kqoa0ax88/kH6rkMfmiSPuyUL3jus0IMdwzcpsvpwW4KHc12\n/sdj\r\n=RmhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f997386dad52f29f5580def68a60a72b6294c376","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.21_1573691497964_0.7921724597569115","host":"s3://npm-registry-packages"}},"0.3.4-unstable.22":{"name":"aws-amplify-vue","version":"0.3.4-unstable.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"79d48e4b1e208129ebd9aabe94e8b456f12a6680","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.22.tgz","fileCount":47,"integrity":"sha512-dR+AUWEnhtszSAHT1kK7fde6AW2FFFfcgMo335CLqjWHha6y49SpPOorgtuSOZKgzgTsZYAbAFaNfHRqjYZDeA==","signatures":[{"sig":"MEUCIDU0QPZ5vZhC7zDwC8dmI9358G27EWXr59Pj4FqHvfXhAiEA8XKDTTYYdhMu1J6K3fjyXgOmANFSQlUvExSKSuH2Fg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzYlJCRA9TVsSAnZWagAA5doP/AlBXWLQGxGCuLETlORZ\nWk8TRE83eIU2/pOmFqZgiN7+PG9HDsMXDPk+ZDcQL8RVlHVKwb/CoTujKasE\nYM6TEjQdIa7R6Lbyx5mDGIuulgf0RQvSAWN4GhYtxiiO5SwjmIjtYQ4LU2D4\nNawSUKw82OSALnlMddZooA5XkeR3jHdYb2iKKB6ds1eSP42QpRgLY13pW40m\n/gG0X7uNLWn62O9HAM64yLrrfakKKZyUAy1NzRE69H7wNv2MU/PMeWWi1E4o\nwGkbam8GHYjLH6QeLFcSoh9OKubXZNRNaojYrg/7yE5uUYobmF1x4cGQHbyN\nZAovxCfFUtgfLc6j+bnRaQK516J9eayHmKryf8wIdPAA1xFLg2EOa9byCKIa\nYWVJmHxIdL66/kbeayh3l6AC91QLfwQCkBKp3axDHjKe3TDjiYhqmKBfRqrl\nosb7ZA2BY9JE+shfudbMyj4fX0URHHpZPq66uZT8Em62WsToHz24L3biKEWP\nZ8qh65V/AOjcw+0zmeTL03ViMASicWgpi9W2rmlvOKgFqtyEAbjb/vI9YvtB\nxXDtN9/coORrIwkSFdPB+W8yNGrsrUlkgF7xv2U35135pZd6rIwAeK9iTpmG\nVc1zgxDGcaqYNK2/QtoQWQwM/u1kC/Gc9fjHNRc2Xx9yYaTDPZotdcgUgDK8\n3mt4\r\n=7COk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7bd8843ad3c71c34c4f40684cd3c986976870c21","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.22_1573751112790_0.5425725844563407","host":"s3://npm-registry-packages"}},"0.3.4-unstable.23":{"name":"aws-amplify-vue","version":"0.3.4-unstable.23","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.3.4-unstable.23","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"74aefaa90542447b0c5dfe59ffa43b954c758aa3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.3.4-unstable.23.tgz","fileCount":47,"integrity":"sha512-ph3FOHqjQHTPQfBiljsBp14CAvqlaHy6k9hFigH6rMwjMOlAhXQKga6tit+noaa4woTLIC35vSoI4MkQboQShw==","signatures":[{"sig":"MEUCIAW+KMR7uhcjMlHCAh2FiQ7kMBy9kNC5XKxqa9345SfBAiEA2zUHLvHM2TIrhW+154YqwqFW0eqx78JGREV+bRWFdRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzbITCRA9TVsSAnZWagAAzrwQAJ8zFfYr2N3xqE0fCMc1\nwY1iN8gn/p+cnduCaUlYOTWnfkOgCcR/xkdL18KvMsQMOzBrT2Raol20Q7Ud\na0RFpEITC9RkQVNEW6oOjBRv4HJ/WGT7qzLEQkIAkO+FnMLsrKzsmtVbtWgg\nBjfOlisptOABJLpyLbNADBWENn6P/RkO1lwLQB8JqwJrzsO6Rp2hoTS8Kmph\nJdJYpW0zRk9+1rEIYKg3DOk3L4k6CDkRq2iHuKxJHL/VDhy7LTqMH8yIqxzT\nJ3H3kicNMAxpSIauF0m7Au8g/OHMtmJQkPeHTpfcELea+7LIVx7GbqkTnJUB\ncpKT+6PnKTFe2waWYAT9cGEJ/Nd4rboYm9QNjYpwh0K3gz2RoZCfV/nldhNr\n1ei6hPJQ1DNyaOxRNm3boVbg81qLGbP56l5b9h3UePDc51UOnQt947ISrWuo\nCF3WRiLxcU7tP9VFuROvBcsmF2BWq5oL5aaP+lD162/zScuuQGz9eQ1Ubakc\nP1kGbRhnaDIm1z3ZKmC30jUMDVevREaPDm/kHZd7LMNGTmbILtZBjgHsh0+D\nVpEGft0jW2CbpahURiUQvQwtWu0OxJjLxkQcOQijxP6gPOOWYaij2zBD8U88\n2JvfKo+oXxEzaH0ko2N1NhUMQMULp9u9pvRD5SOn4HF/wJSi3ijXDjNKJeip\n0qso\r\n=1Udm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9dbb19686902c88767ead22151bc3e937ce4e565","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.3.4-unstable.23_1573761554599_0.16785501101538558","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"aws-amplify-vue","version":"1.1.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d79ef8ea81672c6c5dabe1fe2113cfe935da4833","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.0.tgz","fileCount":47,"integrity":"sha512-bllcEiFbTVNhl/WA0CD8sjmFuO5xTpKeeeeBhebqOlxCsU8U4B9GTfEq8sQqLGGOJDU72GIpzjx+EKvsAq7Z5Q==","signatures":[{"sig":"MEYCIQDFf2ah6Ns7E62eAfNUXem6TZ7RhaEK5gKGgfOnWqtaXwIhAOOiwPB+8vLCQ9zVexm/H3kgzqaPrgp34enusd2ws0vh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzerqCRA9TVsSAnZWagAANngP/jpODWn8ZpaZ1P1rwZW9\nJqesfTqFWeVg1NX/kIq+/2iw6SSB49pevRBLJcQ2W1p+ayVjEa50dIkumc3R\nF/me3uvHJnrwhtNUCtG8ZHg3TcB/ec+xh4QI0QXSQXpWai3DmCsIbAb0Ygrm\nWjdAH45GTfG6i3eIpipjLOA9ntdVEgaaCBpCxpOcG8ySCS5CeiKvCgF/wDH+\njHeFeha+NhExL/Hr2cAbXwjcRacj4V/MsbrgXsYcXobcbMc2EA80aNLVqo+S\nGM7Hk+0kflt+YCu2fle5oiu9uDlEuI1tHXyKQZmMONFsVpvNzaCqU1v0nh2v\n2wVnU+zjJwO35filfI3qmh/UGRwGXsrJ7+DhNr0AU1pRRH8qK9JG0otocrIB\n7lWIiQ5Lx/rZH1z9QxhZsrLF4LUDCZfiNZEkPyy7BFyV/ZEFAeSsirzAh461\nJrxQvHUAmvQLM39PZrWtprY9eQB3dC/WnZlVaaPesViSx4BOIiNkEpNal8n5\noesApLJ9p1+NL3nxjoHjV9rGyzBPp5+6AhSL+I8BnCDEflwc8PE3NQy+KjvB\nOh9ntN54T76l8EbKIcCVaLZSvdbRhy6Nui4YyG6XskUVzlN9lp/3V2vdKdT7\naQbJS6GdhpBLCrWJVR9WdEeqWlj5AJb+3eWjZbGrLktXRjym7qW+jW0UT9VA\nwWG1\r\n=uAZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"44c4d332f0737efc17a613153f84055cd72f52e8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.0_1573776105680_0.38140700515248693","host":"s3://npm-registry-packages"}},"1.1.1-unstable.0":{"name":"aws-amplify-vue","version":"1.1.1-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e0fd20d96a35329f01b0c53c99460d8d690ea6d0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.0.tgz","fileCount":47,"integrity":"sha512-9hlI94Eass+Gr6Qb6HiP+ahrh2RleMIaecOSs7QfD2rYe5pw6zkDPcyswa3wwVy+DCuhs9UR+CEPuPRDTX3Z3Q==","signatures":[{"sig":"MEUCIQCBP39HyzNY1th5fymdXJQkTFv5eoAWFajf/Ve71k4YiQIgPYfX9QlkyNViAVKBj8aA5d425kAdrCHZavnoKU/7KOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1FMbCRA9TVsSAnZWagAAlnQP/1RfoESOVSh7P8ljZV/e\n0+La19KdZpysCxedCIoOejiUHtHKuvT62PR1oOAsgkcuCm7j2eM/3pN5MvsM\nF+inKCTj9xk+Qw+VFjDJmjkz5p60+ru06cim210rZOnS0LnqamS89AvP89cc\n3F6awiL1o8yXN87NSOfxf5Kol9fKK3r1nLGQKIlTvRnNFju9wnc13zXb5vYx\nL9xd2Z0/f+8w2Vod+C9JAB6M6yCiOSNNgpSJczqSndW6FzFU1NxCQiT0f7Tx\nCZdLoJ9ZJQUOAYCp7NnXU5jnLRNuvQ1E4ichUZzS4REXtpI1woNLNYR6n7NK\nPx9j5apKxUR07MUyVjjYoXtzArt5HktFBvcwJAwQcuUufuxs2FJlqT/DUszK\n2K8hO8hkk5Y3rBCUL+Eu+JGwzbuz0NJha4S46aSBnC7+TTogTkv05OdB1wLk\nkEjQJTdTgHnZA6mezOBva2nSprSTKFhfvV17MXM+C7ahBlSPBMIhsXrNGcZT\ncz4dhKmJd6rDsiAITGbWrViFdlRS5LZkCwfZyosz3CvraXCPDTnSxt12xrlW\nfa4vE8cvvaBMbiUhHeUdydakBrvkAKCNTVlmXfuXv4GbVF5sDzUz64yoeU2a\nY10QEAYZP9kq/3jvEIw/JEpK6ZewmjW7Xw302/bKH518a28YIf+gHfFiTVtN\nH1VB\r\n=9OwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6e7d69337d8fe8295f03d4d0441576cffb2a21f9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.18.4/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.0_1574195995325_0.1279484653390106","host":"s3://npm-registry-packages"}},"1.1.1-unstable.4":{"name":"aws-amplify-vue","version":"1.1.1-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b1514ac79a3af4d6ef26e4d02dbb76d3304c3ff6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.4.tgz","fileCount":47,"integrity":"sha512-3bcGXMXPtv7HG99YeHl0vCb2qgTHy/Ck6AdRS417MTenRw/Pnn1cOHtPkZ1bbIqVlpZeOvSVknplUrMoco+eKQ==","signatures":[{"sig":"MEUCIQC36ctz2FeUFYIVvHpaql673/UtDolAv/6AhRSOMv76fQIgE6rnPOxPreiXtq8wyEND3/FEHwc32ufJogJH3Mfhh1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1wi+CRA9TVsSAnZWagAAn1MQAJHzwkgfpkGWMWtiCurz\nrkKt+U79icXZWbwRE+O13XYMIrAjx/wY9TfA+1wTKen32/pFXGxLL7V5dz20\nHxEYTIg1u6fvr+qgdGAdbJFgUpprluKWr2t2rzUodW1UXCPSxDxRth3V8isZ\n7785tlb2Tm+RYzJ7STfRpLtGIe9+KpdjXH+v+JVDfOfCt0g6kATsmMgGuqnh\ni0T+3g+t7jPOG+IXPvjxgZcilV9gerL8vZ/+DWRNtpkQNgNYhfedAixLbuzu\ne2UciHiD6jORbCefRJps6S+5g0i63h9dQYyydnEeLu/UUKQlME20mW+PR1M1\nExJRpdE4dE7c6yaTg4zFlv6IoKtjIWilrr6Llb1UmrF+yzC2ZPvPZPhyltV+\nvoIEo8b+6fylETZ1WFDetcZF2NfLEWBihTeQLBULkovJPPxkyjZXt8KlnQst\n02WIYxI+nBY77frPy4hTaaS2gBK4IfTj+j6jYzQU046YIGzHhcl2qRYWBWKR\nDUTenM1Js5u+ScIxeFhYADDffSU2pDO1G0AZbK2sGiYWpX6g2b+0kXp+gzhg\ntgt6zcc0LFKU8ze3tdwwMkZhdrhaUNUHwYkJkI7PKJA/TLMssu77ZPtL1DEO\nQJRtu51jfLgrlak22FlNhBDCwJyhSRCgyHuaaGelp5BBnTu4gnnVZjkW/tJm\nB3jo\r\n=53Di\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e8ffe0ea87f9362d468633a8282a7ea3bd7ec571","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.4_1574373565582_0.3186923812912861","host":"s3://npm-registry-packages"}},"1.1.1-unstable.5":{"name":"aws-amplify-vue","version":"1.1.1-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5ccafadafe99862ef838ab1ac47acc07ea108875","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.5.tgz","fileCount":47,"integrity":"sha512-3aaZkAGelyrKzJRgYbqjmo7c1tbKsUxi3JSeKSmQJz5Mjr5g8/yDqZh7+ssCjjApNbiEygOhpXyFrFojo4oTHg==","signatures":[{"sig":"MEUCIDh4FTZ1BkaEGxZIkW5NjnDHOlQpC79QeUeog+XTI62iAiEA8MIo2SG79Vyx2fA5PWBlIE0Pwbidz2gQB8qDdy8kZ6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2FPeCRA9TVsSAnZWagAA4QUP/jRSZM3HZ/3SgdFGiRD+\n7VnTfbcCvQNG43bxC8uECRcqPCFYktcyMaBvqMJojWVvb3PUYdMwdU+jT+Xp\nPORQhCHrkh4fqcLyjBPZX9HXs/xJ6xvtFCfyxKrfLJgj1X50lglB+UzBHdyt\nnLjVoqBKoJQ2mq7usjXE6Pkf8RekDdbodKKqUOLp41yjBicZFHzQx2pQd7TP\n2aw3/zGM2KiVEfa2OER+K6J9HvmcFWqwnvgXyd7Lc5OYV7A9996Jz8RDaY/c\ncm6vIICDCE4ACp0eBEhSej5GyLZXxAcXWTjbSkkSjYW0FVtlMGG2dgLE0GNz\nI/gCF/9IiJCc0Swivy8WcDVRy4xSotCL30+gcxP4aoNIoVXdfYrF4aqab3VZ\nJuqnqIJ1ZPehPgJ3XtIw+0+cUobxwEq468EkW0gGZ2LFuq2HZ/LGOKojjkW2\nHQ/0XmS3Q/xqCx38vzrwM7I+IGk2NoP521gsrdS9UwLtNjh4HXiRO51JNHzY\nxWNt4tDi3JNdvT+OVJx8lCmRPbqqoVjv7Pmpuoza2Zpt43K60US70t4MK1ol\nflYEchAz7sOrmWFeUBKLzkkhGzILDyUSNO5FolIu8JoWSO9fQ3sa6EpYHf0T\ncNwOCuJTkz6bzzO9dtSfx4H/Mk69gcj5XHS4S14QNsPKEsc41xMOxW4n91Z7\nkkDb\r\n=GkuN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"86597db2b0704d7aff5b612557536142b82e1731","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.5_1574458334240_0.4774829971482064","host":"s3://npm-registry-packages"}},"1.1.1-unstable.6":{"name":"aws-amplify-vue","version":"1.1.1-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d5948a51e264f0ba57661e07be2b4835bdf407f8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.6.tgz","fileCount":47,"integrity":"sha512-z2objkR+BpsRlwzJ4qCasuZZF9EIV7a+IGE+7TlnUhuryH+HimaU85rKxnjlwmADGTrfLtQhJTGD9v6zErBY5A==","signatures":[{"sig":"MEQCIEXunRqITpgBTz9zVsVm6srEXq/Z2f7Nu3agZor2VfCuAiAx72OrXJ4JIgoLBLr7Izhdf94Yz9xN7y4QZzpeWwPxag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3xs1CRA9TVsSAnZWagAA1y8QAJEP0c+wTDm1iiPnsKmp\nTQQfl3JILk+4no3LCgebnEVlDLeeGp4oof+K30eeQg0Pq3yoYJ67emJKjpUu\nE3MU6wnGyvzib/WQWpbGGC1Cg1/DHa+ArzKmNsh8uRHqkboWijAPpAlSbKor\nVXVXI+SvwOaH1gXpjhS/O3EdwQ6+dlIhlpLjsytDOY4rYL8j17DQcjy2/8g+\neSCmXxmqDXCSYJOsnHe1LZIeOTHT9KXC80Jtgcb1zzcuPCPMj2jSskYCOiVH\n4kUeJyPmntUZJhalRqxYBq8wR9+cs/HVq/JQCBwwNsLcHqBEoK8xBUM0Bh5n\njckH6NdbCBSE4j/imEcSaHC86gWHIJmAj0NzSPckLot4BZ/o6+N4E1XhUYtB\nzl/HOZZadHlty6smbblgNj8s7UfT9cV/FU8Fq1/qXbVKVzqIyxi+/rnFtto8\n0IxUrU2Tik3xdvODCqDq1CmZDGXoTDezPs7NwXRtNwJR41X9FqGoR8K+F0Wz\ndrm8937Y3Znf54zWYSR9QxDH6y+1xTovUvP59E1plPhs2IyfS5HF2Rtn0UD5\nwcdPH4Chmv3T24p+Uit2U2lyXCrBmtIGnD+wiLtMFnp+bErWN6vUO3XU7Uor\nip8QKuky7zYoxPV1ebjaBDqnxkcxr1kOrkATdASWBZ7zriQscXBADo9mVtbr\n1KML\r\n=1EX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"da4f07c98a858923e7b9663ee55fd7144701fe58","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"^1.0.0-beta.20","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.6_1574902581283_0.4269908808649352","host":"s3://npm-registry-packages"}},"1.1.1-unstable.7":{"name":"aws-amplify-vue","version":"1.1.1-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0595b329c88d75f5ee80717466607b94fcfae464","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.7.tgz","fileCount":47,"integrity":"sha512-o+0Kv3eG1oD4/P6kLgWZsrwD4wBQbwv2xca9MbNWKU7Y5Ngxzahza8ECkXRV/s7DTmQR/+b+HpB61P2NOimrfg==","signatures":[{"sig":"MEUCIQCRboS3IeOsRuVgp38dgrM6sgSZSvi+AAwui1Rag5CPUgIgY96jKt65iuJ2gHTfnaZw8NpkpQJG41goy7wkr8wf2SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5awVCRA9TVsSAnZWagAAXHEQAJuzrS9gAKI26hB2BVvS\n6ezU/bEpYIKRwgoiqDKl0MobOuEpagW8cosSA3HaZuJBnez1ftG8TVGawSuU\nuMwokXAjYL+A4NHoXskHqeJSWegyF2LgeT461dccMMTKNlUDdsAehUuC8Vq5\nEY87QEj/BmGcWfpJY2JB3uO29YvrQmhCXrQVNp2sAe+62tXUoQV1W+mvbNYL\n00jJJWJbKwW8/DslE+XwW4y1dVt+HybtVWpCnD0yanEcIl900x9RCSmLZHFT\ntJvW0kj/Ru2t/OxSwhIlV/YFYWyECNFegZZ8aJDftfYq84Lva2VGcjYS4g3K\niDPLFEABHHH2xVLvB5gTulJTdZDh18W1ViXBVpy9/F9YptCJDNKpqrTOxJuF\nYbTDuLEgeQHWeTi3odpcy0ZXQAf57prHpuWi/0/qiSeFuNsnEjlu16jk1ZoV\n+SFvR1B3wR7TfFNuM5JNxIVpPRQWR0ihmmHLWSkJsVA1irBd+NUNG5ZOJnMZ\nfCx2lpsbmICS9xbsnQev8daw0Y46k5K4Ft6DsHFSbOrYEgm8m2B/sAEKpWDa\nHZsovjxEgl4iCY0kKXldlCRCxpetuM67vuEGaWKdRLZrsI0ihi/tEzIGsnI1\nqb5iPaSGxufTnER+QQBbh7LTskjZHjSvDiok/h/kgOSOxbTZbcwJYvwVVfuK\nSrhU\r\n=YGdO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f2591b62a0870853cad1bf9d66bdccc8a3e68c73","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.7_1575332884730_0.6426466749390574","host":"s3://npm-registry-packages"}},"1.1.1-unstable.8":{"name":"aws-amplify-vue","version":"1.1.1-unstable.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"83bb08f334604191e9a7ed4a4b5aeee28969bf6b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.8.tgz","fileCount":47,"integrity":"sha512-+/rstll3KAr6Hs6P9tcFbv83y854rTMOvNh0xJ18ZuCyQAJyffXdKnqkpmlyR2xJWEMFBgCHIOsHsLQOyjDm1g==","signatures":[{"sig":"MEQCIGaqMhSco+QhuAK8T0lqYN34WAx9gXFzC2Lm4ECjTNnSAiBw4CuLjZSMkeZ1sHgu3E/RCF9luVtXyzl9HAnbch+5VA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5a99CRA9TVsSAnZWagAA/bIP/Ar4h/9FhoF467VzStB6\nh5TvLKtpFcZtpxm8eyQd6jeb4G0ZdgCg159BAjRLwWks+ELYQKHtcQAIWHLJ\nPHjamKi0jxlrxWZ9x5he05cgy2H65IlxKXjUW3qAUlAtL62l2SpxftVxxHIT\nMTFXLet8trVf0ZS/7kwWfKWzyuKQBm1XFqBKkKgyQJ/kEjFNIUnN3vto7ouD\nZaoB7lgFHcg0/Ps7hCixv86tpHdMV+4HlyU/3/2OdRCr4hd0yir8qB0STT8E\nPqbW7gZL/b1CaxPOXcO8FVSOx1oIsyXB8X2NxsE/WScoPkDEV183E2fqAJZA\nEDUOZkPk/2pWcYubly8YNv2lWLnzFISo93aVSuQtMVO3BtntRy01GlH+aI0Q\ngRJfJ49+YvTEcCbtjRNzwrVmXvAFJGZPyQv5F4hoyA4cKfGbgjAULlyNNn/p\nGm9WsZMv3cHsHwILBZ7EdA3YkWI1oKpdmBVu9PIGMruyktcpRgSphkZGRjG/\nkZLrKabWOJHWNCHlLhS/oMTKGCAixkwEMsgNZkX+kWvLuFc69CgXrGXKVvnd\nOtjRnDe1Qeq/hM/ScvSuLa3abR2381Rkt4xajcboUAiC+mvAG1j0WqeW1+5J\nxIApZez+GNzKStl/Hrjb5ht/iRSeaQxBk9aOp5+GQzxVsOyti0MMfW5RIzBE\nQR+P\r\n=zNHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b40a1c2e513c2423144fdebdb312f92a18f669df","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.8_1575333757136_0.6243840866358017","host":"s3://npm-registry-packages"}},"1.1.1-unstable.9":{"name":"aws-amplify-vue","version":"1.1.1-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"eada085ae6999092b33808eec83b0996da276f12","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.9.tgz","fileCount":47,"integrity":"sha512-wPuh1ZmbETrreVnmFoNDGBDL1vWKn3mpZzARpJScA0X+ats1GFmt42234kDSqbn8Fq934+VPqAykfNawoopFOQ==","signatures":[{"sig":"MEUCICbxodk2RRtvlpSVUpEDHC3odsAgPF6klMNn97RBVNvsAiEA9uRzBOmMCGtbtD++09f6kyQ9FORWk6KZE22vRkbA7ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5g7pCRA9TVsSAnZWagAAwu4P/2b0GGK8sr0Vt13gwPtN\nlPDbK9qx/ZXrBqCexa2zvej5upUDjr8et8fefLq16Zi6fpA3EjUyzXdb76TM\nHztTEGeroIn2bLO2VMjyqZR2Ttqhi7DS0nDMx55uA8Nh05d2uhkvJiwViwNh\nQmkfUUCRWLrQHFukryOjA5oLAvBB3kTsqWHpTP5dtlV3lkVL4OROgx4cmQGG\nQ3SQW9o41zqSlHy3kad1caJWna3W4gNRUkJF8RHQcxaXXNElDSxweSzS5uEN\nlA0fzMUsP5Rf9PxgcsE28lXbqqiS7r59glwUQRsaW7sby/LKZwdaP5wOu2dy\nGETUIYPp8aB3TkjcEaHqNEhpiLUZZLrNkyNU8Ea2rk97czmwPb2z4Edg6vTR\nnAYU0JAYaN6tq8KAQoGgbVnHvHhw+xUzDjZIQOQ3YKKm+frgRxo5oNLZ+Su7\nADUIuj+ViMVThC/1+z2dyiqDdj9jq4/9J/ua1m+lqPduaWtdOnTRCJT6WBjI\n/Nz0qtjHcxcTjfwi1phM5UWCd7Bb/G1BMqdvCArxoS33RUlBccVse3Dy+bFb\naKo5Popmtg8wMLgE0y0dPorRqmc24egZn83jzAVCt5tnUQxDctf7gH8qINBK\nBnI5jrw2K1tC6e5OS8Z4ZMQ5jb6kxsKCa4lvvAecvPvNqBbp0zs3+LZspkWM\nwkBR\r\n=fPJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ec06c62e507f9c02677686834e91f36460956012","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.9_1575358184747_0.5490043488497991","host":"s3://npm-registry-packages"}},"1.1.1-unstable.10":{"name":"aws-amplify-vue","version":"1.1.1-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"79f515933da3210b69d03deec8fb65532e24efb4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.10.tgz","fileCount":47,"integrity":"sha512-SOMz39TlDuz9uwxwurLGkc8C9Pufn54pLsIMUZrw9t3OiHpbkDadDOt3nezWJNeVYBdhM1d090GQKSzWudKePg==","signatures":[{"sig":"MEUCIQDJlN4NoUZXdcgiQmr5QOYqQUWq52B86rco/7zYw3PllQIgA1Gr5PRnanhDj29xphr+7/Z3s7ajMpCQdBtLEfREzwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5jQzCRA9TVsSAnZWagAABx4P/0/h3BE4qTwLqAakWzks\n714WijMlagQcLHfXhM++UxXxBkoHLbL8gq+sV6GV4br29vZNbgOfzF+8eKPN\n8RctQlpfTzx8goi4zSZ2skv63SDWjuU8rX5vwFjiM5XxcynoDNcGlQxYl9sq\n+Tujt8bsckBCSI0PsSzUcTroma1gLOY+2PVvZ8XIJ6B4eOWQdxbD/W1rsn5C\n9CVHmnmHDUMNbrSBRRwoVFdTa9mty6lBjUvxTtbh39rkTqyZTLbw6MsuZLTd\n9G3QLGWoHYDH9+XP69H6brEGUWuzrP2OislOH6x0BTEOhdDDlFE6e+xpc8Yr\nCk/au3ezwOzbysqTnbkKhrHbLFKMGiDjHX2kxOcujmj9ou4Ef45ByTm44V0d\n2Wa2CdPvrTQerX8cNf2IAK7JpeYomO3zclOj4xuHpGLs6ETDsmNeXQJL2XVC\n7z95Rv0p0MmSu8qTGJyYrckSvQJOrDxX1q6KGXH6vqnjCYE3YfKqWy2e3Arm\nIhAJyckHccOXx/9WMtiCQk1gj/rCXn7p7IaULYxiqDOPDt3UgKe50hT3EQLM\nX7/umk7hQIx1DXW/9UW0RvkIKdiQiX4jNoLw+X1oHL4r05m5kXDSyJ5LYv5O\nf3f1IUVu36K48RwG06JBB2xwVBRZNqpPWsI+bRz+iZtfBhD/0j4GYYgUKG58\ndDCB\r\n=7pV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8e515adf3858af57029d5e2d76512ad14db3d62b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.10_1575367731069_0.5510346001578463","host":"s3://npm-registry-packages"}},"1.1.1-unstable.11":{"name":"aws-amplify-vue","version":"1.1.1-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1-unstable.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"67d21216b58a378b4fd1fb8462143728b9aec4ec","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1-unstable.11.tgz","fileCount":47,"integrity":"sha512-kPNFzCtmCCxU+b67hpBWDGHYmdjFgQLAVpKDq6OKtjXoG1VFkD9k3mQ7MmZv+xXW9uX0MSP6QQkveowLBbt3VA==","signatures":[{"sig":"MEUCIQC7nPYZKrwqal4TVY2fssFlE0AhgOKyd38SNCNl2OZsZgIgUHjmDSnDs9yXLnjZTb9noPMvYpTT+GWRRBUTl8L1GU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5sYdCRA9TVsSAnZWagAAOjUQAIKb9UukxVI5SpWJQNGo\nwyttTuf+ciLUMRNUqC4AW79QUx5mr8d04dUIo+NojuddriNQGq2hHL71Ovhs\nsz6gt12X17YhLoRFOzQF4xdS0irLRCx5jLv1SfBf8P/1BBusKtTNY6NvhxpU\nBTC5JfHGpbRgh9RK2tMiGBxrPAOId8+7vO6RbPY8l4j0v5MzSOZNT09KaI8+\nZqnWKwVl9idTfCLGL4ieO2znfXmxMRQCm8xWXn1b3itK4SYwMUXtb0/ljrdk\nT5k078fSB7afFe521wTPwtKlfwKmhUEdRy1tPPJaqlJvYYNakLGoyTmTq6I0\nh0H0gjZ7Gn627knuNtZCCuoUvJ2VK+v55dQJgCsNvVSqxu7lw/f1j0eMp45x\nfgH9DYeHAeg7c17tN0I5UGl22ZRSTQoIZj+QSzWPhgRDXFbSg17isoBtIuDa\n2i1gxZfEqbplAkCWmIP6+aBNTjXR2xvjrCvUY+sdbPPlT4yo+CHgz93QI6MM\nBYNLjLCOgu8puNB6BumNDsH1doMN149JmkUK/R4DriOtlzNOh7ulVB4kajMQ\ny5VkLffSgiDI2ZEokW7QTeGttwcgXzdIEtYr+yBdg/e9fKOBNVVbzhlFaP21\nqVSns2Z+I8IQrE84ZoSRqJfjxvEIR4ecxK7cc116sOUgOp9Lyrnu8Swt1Jsw\ny1RU\r\n=pSMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6a6f20baa202fac744ff2cea3b87b9854ec82f03","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1-unstable.11_1575405085077_0.9844594036613574","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"aws-amplify-vue","version":"1.1.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"16f031a2317f8f238d042effd005caf2c2d54a87","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.1.tgz","fileCount":47,"integrity":"sha512-SGzxuNlEGNct6z+gO7++GfovSYIMd+khFkNv0oxBPAe6RNeRd7AY+ghvO5slDpDyjC8aczJr7HpIopEAjlEdgQ==","signatures":[{"sig":"MEUCIQCUH5nveJn5O6h/uaUox37UnaWUxRblryMk6XONLoBUqAIgc1qWpjylevJM5igs+F8Flj7/6rZrzjZgmuBS7Q8dFZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5s5FCRA9TVsSAnZWagAApTEP/RdlBFS182QB/7idTZfi\njP1kKnopdQKZpxgUBDyvFjVq39nZsvHoREfddTb8bzExPZB+BEL4CCNPIzdZ\nfvFqlb5piXnYbBKZVlc/u7laP2H33xWcXVU1U37W0LbVY5PsZaN68FKQm0c3\nx2z3Wtb94IJYa95HCLBgESWtYzZ8SiiyqKP5XQX1CE+zYlRKN49mnAQ1OlmO\np/h9nOi7zsPfCMO8B0QUOOR8zzNxVWYRk41xDRpI2J2M3yi597tSCb/6SVJ5\nkuMJQrvq4AxBmhxO7nyif6R7ZAYHA4B1pXqWlJsjBozGMQ15beMUS9IVr94O\nbc38pcCdnSbycJKqCgcGtJehlHeKaV8+nyhXhDrtyDLaY/RHh+buy+Y8D8rf\nPBjWtcc1QlTG1nydOYq9m+h3otkEQNU6mB+TiYlAfm3XSZ8T1Fqh58Ju5UMs\nBLgnkwJaS8BFV5Djag76pjkXRk0SJR90NxkTEM120MZiShtmIpAS2/Fn7KI+\nKrOdmpSKWQmHezMhV/J/WpLvBi9peW0rDBS7X15UrZBAolLR60pX7iuqP8vG\nXWPlMONzAluqyI7lhQex7ib1Fx7mTP0j7o0YWZdrRkPHysTeZM+YPyh/r6yE\nMbWx/NLHDyieQBV96YTXPv/tb+hNnhTk3kVuD8uJ7LRGW2hWqz8jWg197wVm\nJmSD\r\n=aSv9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"980307b1fbb901399e69f8a9ba98f830e42d5d78","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.1_1575407173106_0.2595338916934209","host":"s3://npm-registry-packages"}},"1.1.2-unstable.0":{"name":"aws-amplify-vue","version":"1.1.2-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b770efa512a2829178841e9877d53a270e39d820","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.0.tgz","fileCount":47,"integrity":"sha512-rGcvO8/rlf0GdBKKRIJf2VuzYNYdOOKfacBYdF/KtEKFggfN8HnLvM62REjf+qC+Arn8Y2YZRJ1yub/WOMviEw==","signatures":[{"sig":"MEUCICFA6EpTJn23w9b3YrOAXTzpyDFFjRjsKamdqEJA56nTAiEApWZmdf+vSrr4rOS5GfuH/PYhxdf5Ipj5wZ4yWR2u01A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5zDTCRA9TVsSAnZWagAA7bYP/i7DOzDeV78wQXPw1rld\n30MGfKp2jFP5CME38kIc25oRcCFQP1YreK4dt+/IFinbUP9MurvbdFG7YX/b\nu6GcSs0btDjf3vWNRUSrifmf7RlDS8LBLKk7WOo+IbHkMWvezINpKnytsOk7\nYjQRMy0rV2eLUmAyan6nD3M1hkObtVFWCaNF1cdmpVvYoqe1DKiI0BkHA7d6\nIJKwaBfengmweqDtISBDu8nTIh4OBypecGbo5ol5Ah9+cmLbh80Y3VCGIfO3\nMj/HiJQR3HV86bIEDgYQTYAqNk6AQ1Y1IlZbWOuR1/JYwLHD8+mPw1F9OTOh\nzkgCSG9FOsmSEdcltuXzO8OZiekglwp6FluGGolAYDh3qdRMXFRw4KYQKU12\nbXulaRNWh0j2CI/eYzJnZPd90o/m2FsNnE2cMTh0EwacbmMFM4I8j0NYqnvy\nbnDz16CzHT7co0EWSKad3k4lVOte/R5Aib7zzV4LC2HJilphiyRu7Uu8YJKn\nBNSsz+6S2Ct12beO3Bppf0f8e1K5ETQqFSnCvqlvBZpo5fm5LAJGPxEL3lWO\nAeQp48wiezCgDRl+EmcUAXUmCERm/fPug5sF4ojtG0Yhe/u4e3lsxsSrmnfO\nwvM4rjw2U8o47pvgx62yPJLxLv1KvUeK2EIISN7vpsRi7M+axhTZbAa39xsM\nGfxZ\r\n=IKJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8d2ba6e85031a7880d2b573e1f68108d22a7de54","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.0_1575432403279_0.6234363109433667","host":"s3://npm-registry-packages"}},"1.1.2-unstable.1":{"name":"aws-amplify-vue","version":"1.1.2-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"08b41be91381b44d055e5e87c16c0cad401a613a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.1.tgz","fileCount":47,"integrity":"sha512-Dchjd8k3X97AAI+P0M/6lH9vMorTuiqOM/AVrpOAPPsGGVs4hKx5pW6CGJuDIV0nCsuFuUjN7fDIhCDt4y8ByQ==","signatures":[{"sig":"MEUCIHvPECAOTAo+e3+speJtsgvxc5pR0LpTui7cvWiiNIWmAiEAyp7kB8VA5dW6Kgp1ExTKUZOezIX8BtjLQi8m+HpjuwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6q3SCRA9TVsSAnZWagAA0zgQAJtgtQl3f7k+H52ljQTX\nbaUvm+XlJKs+JgI7wiT8bxmlx2DQVcHIMwc5a0XE8NBoPuwoMEmu077qTIo5\nSqjms57NhyBq4J6a+N31pmYOduMIMtyKnSwCFgTA/Ll+y8T83Q5VzgZul+qc\nvgTSPeiDQ86mwAPWOVgrXdr6n+gOpmlrCkWYJijojDfWMaGWa+7GL95jjh2W\nJpAMvmp3VNUlQ6U+6kUs+1VE8mGayJwxTlUSP9x5pEpmt8cWX5WLVH/BAGxB\nNSsulYj/D3u6kFzohzq5h1AfXl/qvzkn6Itx2YpxxpBosCcfMqmBl/cRNyzt\nhF+JSuX8vHu5LEt2QLkYOvRqNn7vy7AaZRPR66juo9D1M+YcvDxYGdKIMWov\nXUotn1S0vk4plGhS2yGXMjCWmeyCj2jaJuKzdiWXmSTKZvhcinx+CJGU36eQ\nDgziNVWY1ChMhWaKmGjmTg5V7Yp99pYnHWQc1zIyczgWxaJCWY/aIQoH0nqv\nfBg+DzMv6Z0PTvJUp4+k4gma5LNaHHh34xkxZkGOD/fNYTgZJrn/uiCiIBO0\n/7410CIbQfQ1V19cC55SAdtTtVczPrIj1VqaDrz+FjJcUzs9I+lWbxyD2NE8\nsL51fTywvAZUMmapcy+WpRraEsgQplh6iR954vQawTSoCA3ijPZAph63AqRM\nMT5y\r\n=BVlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a63261d0f5971cbf4f5a6afebacfe598c56ad0d9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.1_1575661009721_0.6328698204883059","host":"s3://npm-registry-packages"}},"1.1.2-unstable.2":{"name":"aws-amplify-vue","version":"1.1.2-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"871bb3c08002ca0905f00147b27ca142d7b99c1b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.2.tgz","fileCount":47,"integrity":"sha512-tRWKOUS2gZGiynuMX9K4FhNmTuBaSkp4nVLYMnAOx+G+igFxM99LHrtw2KC/UfzfYWbS/Kun6s4/rwJ2Ra7PvA==","signatures":[{"sig":"MEQCIFgw47eHtVLF2YmZ3uwFmXFXIUnGzeeZ7B+QpzzGK6ciAiBI9agBNdF9UMtVj+LxUjwfEPH6dRRQHV1pRKCQNSAECg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7nrKCRA9TVsSAnZWagAApvcP/21d4sag2eZqSTPZHxXt\nrBzb5SxC5dWGtO3d3xb/UyFiXVW9JCUna5SNlAfSu1emEgbfQdiP67+2TZZt\nRuV7Q6RG9JNTwOqFZhIs0/F8V+m5H92gtnYTfmTBeqqpAzzH+55kXQzcQ/yo\nE9TtvMOk/f7gB53rgCqufh9w8m+Kr7l9QbkKERHHzTQRvYIryQbiHo0OI9dm\nG63H9E5Ziw0rjw6XvLtOaLTKE7AGrflvkpwJbJcR8i0WObzfRCkn7RO71yaz\ntkWQ1aaTaQTLwJHKAW+iuzFUetKGcLTT4Gus3ygiVUiXRmvAsudsq1XWIfbr\nle93xlSHDE/JtTQD1mSjDi0ZskBtpQHBqFSsrLY0RmYmhjvyYdUOU5EK+r7Z\njk1PP63ZwecXpamojhcbpbXLGJMekCLkukWIWNVNEP63g/x+9oFXc0tfG4UZ\noNEP71Ns4tk0bf0oMWryHaQdY+qP6qrNYcZ+ZfF4xN1qbaqEFatVa9SpDgXd\nQlAVMUJ2gix/5Oe1opDSn/iwJe7TJfIMowKXOcyZQmNP6vobGtDiBXdLJoVa\nEMhRP7fphr3cfrS4YxoBiCyj1T4sjsqPfmhhTbyq+5U0bocEcbtjExgwZc5P\nTGQhn5a9ToRdbmZbTCGnoZkPOqjaL+AGRMP0sFyne8LZLSizMdSkDS90nE9r\nS4/u\r\n=MMLR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"052ed8becd307afd3fd964f8d37d8ec07b8e611a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.2_1575910090255_0.05130946299295891","host":"s3://npm-registry-packages"}},"1.1.2-unstable.3":{"name":"aws-amplify-vue","version":"1.1.2-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3392c003d893234078f1da7622fea96637722a39","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.3.tgz","fileCount":47,"integrity":"sha512-qKXBYZUFeyx3wPrqDRyMNSS2YB+AOkEZaEC6COFSpsfCkPIgHBdVK+vl04Kmdt5lWLPlAS1jvy640QGeWoN/Jg==","signatures":[{"sig":"MEYCIQDyvbwISckS8XkPNuzrCP6PlQr8UQRFTYSz+K8oSabZlQIhAJC3EzAHhWuFwFMS0qangohLaVmcOefR7YAuUSZmFd7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7qIuCRA9TVsSAnZWagAAtsQP/iV9GNDwkMWYadTE5+Oy\nVOkbFrKa6e6BvHKMXgSNCe9yrti/wZIkqD4B7tYnUghROXz+AWMLJ9j2l85r\n54yU1BXGhFXMKSr3m01crfygtrutBf9sbZ+WLz2SLJOHeQnT0ubpfQN2taRG\nRH2oHafnk3gMVz+HLobR+Eogz+bTn9N9NTV3NyJxZXOn1eVcDg9PNDFed18I\nO+vKMlpV2EC2jP8vvouSVfmf5wLA7Qj8L8fICqrUcZqKm0NuNTy5BPqbqoTo\nJXuc6zybjCNPyBAeK5Sippb3r+WHQ51VPewmWOeXSwEntw2h2bqD52+Dz3ms\nCQxbNHUxuH19tvi4ojqZWDVvcSLkOrDZv4gY9RhT2MrdU5bsfGmlQva7diHo\nYutjHQILsk0Vtx/+YU/Hj9S+R7HB/rVmQMQTJZopAFR+riSPnUQi3/fL/GqH\n4bTdnJfPVYl5Wv4CWGK1jTEftid8vggphrDzQ35mse/MobqLu5bNVimP3HKw\n5rX7Ad0GIGySdwaDhMY7KstydDqqOzdLWAtFPsxQl50KLJ1vpZ7BBaWhwv8o\nGVVMNRGKjtiAiJiS525l/p+VZQJ2+8/J35yAh1B+FC+MDfDk+mLZ1RQ8gRXJ\nVWPTnOTBX3FLgBdT+lHb6ggOyKL+eG6DvUD2jYYnroZVjztCxQjkTqbn6X7I\nlD0B\r\n=I6Om\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"898018499ae361c91ba0b5197cb7542b15671faf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.3_1575920173941_0.6614437393266921","host":"s3://npm-registry-packages"}},"1.1.2-unstable.4":{"name":"aws-amplify-vue","version":"1.1.2-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f65cfe55c81598addf5557b4e021b9033d308dfd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.4.tgz","fileCount":47,"integrity":"sha512-kHMf/Qsb1d53NAEIj0SBZMumdGhcKK8G8/Q4ZLaSge5IXxMxHvyO2PWQjeoj7KbOK8dkSjVeAqwyKBRSEfPhTA==","signatures":[{"sig":"MEQCIHaytbfZIX3MQHeg5S9k+KxDVLA1/aBfb8Mr14s7SKQmAiBzkCArVHPeCWnnse+fnnfpoC610nFvQ51eL3dL2GNJQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7tIdCRA9TVsSAnZWagAAp78P/0uh+1K/rrLZQvmMrQzO\nIK2Pjb82J/j5+UiwKrS9xqbx5D7xB7x2YnXjCzbTCVc7qzCms2oE/JhwHPHf\n6vdeQLflyIrIsE5SHLNG9432SwlMLEV0yfGL2YrMBlXBgzAPTBnPwT/mNCwx\nGVUp5OwANdi4Ifhi1MUmG3KcQnq+2GpcwM6jVk3W4QqoLcM429NfQ1WfH5Tk\n2NDjPZh0JVlgt1xzD9EZ1BUJps2mjiTq0xPwnSkCCgIzV9RfHyEuizArz/qr\nJHW4i5iwgvrFxQ+FcBoAyr5qeX8LRodoIxP5RcsAjLV8HNJRtp+Hw3shzmFR\nECq57/FEPtoMNaDXL7CR6wA4aLmGVEeilkN6b/riM23qB090LLShfWxl0AdO\nQ9Nqo5anLOTR+KduRXVDvPKzGs8gfGM51iar+DziMXRsG0hVSrzCg9/ePrN/\nxmKpho/iXK9mclMkUT49zsGdUh3GRBF5nvpR9p88IXdEI5SDlFwOwcLwc02D\n59AJsUKhwkpdJ18DMC4JvQTLTEufM+a1tlII5+IGNUEw5WITpDIFODGKMHPz\nbElyudbxt9G4ix+/MqpRcmMYd9J433FspXYiFZ9/uVGtOlW0XbJD0JxAZlv8\n0w30nHtBVT2xeyJj9H1PO50YnNe9AA0SlDD87/QO/tXhDmC/qo9b+q+AyZIg\nBSbE\r\n=sl8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"73bf46e161cf35114cdf6a791a6ea248c469064d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.4_1575932445169_0.7189837291536694","host":"s3://npm-registry-packages"}},"1.1.2-unstable.5":{"name":"aws-amplify-vue","version":"1.1.2-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4756fa78f571a986f707d4bde1d4220136fbee5d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.5.tgz","fileCount":47,"integrity":"sha512-CZ4W53UMpc9qJfMrH5R/F8p+nENK50X2qDoHdsqpOjrKfBQPSuMl7elOykwKPnQ8bICzQ2V0LJY+Sdcgy/I12Q==","signatures":[{"sig":"MEQCICe7vtxOmygoAssfh84wqOVbd4/h5BMdL+Xu+KnikpE9AiBvXkWe7N43BZKZidiuZlzceClHc/YcQ4IPN3pZrgyqZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7/miCRA9TVsSAnZWagAAAdoP/RsnHF8cao36yaJNHYA0\n/0JqLmCv6WzYKDvVwQ400l+d6HLYw/sIervo1lZjk7Z+hF39lJo2uTQj+iSZ\no/9G9v2UI7EotuuN8WwcD23s5ZFH0kAbjsW7QJVSdufgxRermBiJLnL7xIke\nZ2J/u0b3j6wt1+rITn2++9CmDiolbF67h9nlp2H+ktf+N/KC9ZDOvnd3OohZ\n4K2fxVM6zDulloqmZ7l6jTvOXb8yj7ordeXfy3G5avZ5VmOXi5TdJcwR6Dp0\naZ4g7EaKWQMn5gYOU0pIWqAeyT/KRItnJ5ZtdP7Wa1r6KGVHdZJXRbH5YK96\nX2LmpWcimW5KBiJ0oz0ZM4faUh/i65Kxm02LSCMe4+tM5n++LIZFfwrtIKE/\n6kUqDqraIvnI6ZWeKw/i+gpxd8D1vUwbFzMNmA5qGlMsNuC0U849GF9vl/HW\n2WDwpxyx/TIZkSYHaqtBd0gflZ+Qyc9yugBU09+vd5ufQDGYeLhLcUwUOusA\ndhFb1K/b5kGr34uTgPl1H6pZIf4xgKFR2fegDYzLEqamh6LYhmlGxR96pTi0\n7vALO0js4MlJWgTEIoqohANUQqWKNGr3eSP3rOi7Y5Ei8v20K3VAjpasUd1J\nc7CH+PEXKY8CjD7Az0uAjhemtMLlDSY4SvNGcc1/drVAHk48BwRTlmSfB7SD\nQWiM\r\n=FtdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1baab7807dbaed9bf3915f061053fa2da729fa99","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.5_1576008098022_0.5638881762677137","host":"s3://npm-registry-packages"}},"1.1.2-unstable.6":{"name":"aws-amplify-vue","version":"1.1.2-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"716cf1b6cd7b5e60b09b8827f8c61f633536405d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.6.tgz","fileCount":47,"integrity":"sha512-Od3/UBkKl2U1z9FgmoJ3VsKETJhPNx1SCJcYZpg6W6wxT8OcHAw8EBNEJe7+fXa7aENRjfPAXs0yoPFRzGjifw==","signatures":[{"sig":"MEUCIQCq7CsCjyleyOYhOblZYkBLHL7JlysxLbke0iiPf6o04wIgTl3KvrZZrcJsOAHKLmEb1/8zzghhTnxsnWfgrimlczQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9BLxCRA9TVsSAnZWagAA+joP/0SoPJlGinPU5E4SadP5\neEwxlvymuFcXl5OdT9wJsiC5cFhpfEE7zRqtkMT4lRj0NlYeYPpYOlKznHwh\nce3G9raOm+OecOgYuLSGVTb9nAWqT+N2aI7a7PufR23ucrTqK0GLt/OClguQ\nlR7Iu//gi06MiDXE97u7uglTjWfyEkWZjIqQDmESP5fVIU/936gT0d1XFNc/\nY8FKWoPFl8eNgvz3Z3BW6kk7rGWTmG7zXWpnRE9mJ2l5IywSsG7jThNZe37Y\n1kee0MEgGkCaeJd1yPLEd/hZBZ+/HZt+g2keglzk8fgyWxJQeNmbVSnDfyUY\nmmg1Z+YyCkpONK8EDQ6hQuMq9aeGFcGiXQau3XRhloWfC5E5MrWAiJCSwoey\nLgk5I+cdzLKbAaKleOshPLQ8Ksdnkevsog9PNfVzEYuXvAqBWAqk8IJq5lhh\nImthQKCYRP+IIzlSBdP9pVidUBrCjic3k+kTEm5TZZriknk5D8lsDCbgIjlq\nEJIQJT24d26wSpYqIztEOnm7H7UNBoyWRFjC/If1+tCljsZeGWyHDscsuR2t\nJXc6GQzQMnZQberskvGMon/J4NiPtl9jT50xctoGMdPg+gEjvS9BbaQzOL5a\n9RI9HLILE9q5Mr6Uvnln2hKxjJN1KlRq3tbDbYr9o2p6DEDJvA1rnGh6ZK7m\n7U95\r\n=fV9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"867412030de57fd74078b609252de6f7f81ad331","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.6_1576276721094_0.2011026368942601","host":"s3://npm-registry-packages"}},"1.1.2-unstable.7":{"name":"aws-amplify-vue","version":"1.1.2-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"855c347f622586d346e1560518cc55d97ac52540","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.7.tgz","fileCount":47,"integrity":"sha512-fJ+0d9RDJpVG2AcE417j3ZT6V0Vz4RbIehp3ETsOU0NcYKv1jIJqp6LfMcxDpHnVUkCQZ/tIfdfIudjDNtys5Q==","signatures":[{"sig":"MEQCIFS0Iw6AWw1Hezz+KuiWdcjm6kR/m+oh7//h+680IyuxAiAvP48YYTtPtKqwJdbdub86Y3kXYhn9x883UTWBmvLMWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+pepCRA9TVsSAnZWagAAuxAP/25CFQIzJeM5NG9mnkag\nXHpj0nYMMhl2xtyPH4/wGLMhKrawL06EdBi+ArETBRNBTUr9Wy8N6WtyX7Jx\nGnNhl4w8oh92w9+fa0J58NaR6rlFOtQeqlH5+UcdQ2mPG+0fwmnlxUJ87N8n\nDFpXKZ+dcYQFCGWBLf3sDhLkimbFDQDSk79Ho4Ql0zd6wGAz60dgSSE3EGX9\nWhRAf/p6zbsI9hym/oofIFuCWI7UxtuET4UYkckjkynpcSwJQJYNxCbiW3Ry\nroqw2daRPM8xZbSgZIfx4uPpD6iqh2k3Q3hhnvywTO7Z+/JWANOklgzYkMyM\nOkgDWRUIKI3X0bc/B9kKU+zbm0HI1jgfInVd8+sUHEhkXd7leBVSBdMlkgmB\n/XRvePOGZ30ZfQRRrmh1RCldbzNXHM4Ph+EE0MPzn03thZ9yPNOOkOKK7jTx\nNvNqQf3KSPtecMeu4NuEe7NYST+yrM9M7DF3Bk+FI7S/pIU9f//Ch3Nfdlh7\nT0GcBgAElyTRXfXcQVIn0MevYbOgpp0N6aVszs2xhpDW2nUnpqpi4SEDwr6n\n9hX+BSegGAAEre/S9kmbXNhWWhN8uCZd2+ig6Eq7pAwIsLiKUIh4e6bBX7AY\nHfOIQNFWlkoDmMbk3q0x1sSuvDJwPxX2wnyj0leUHIQl+Sk+j4H36/h783zz\ntIKh\r\n=BVvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"36dfd8f2b942be0fb3d0fd32b2a86716b63843d5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.7_1576703913009_0.28778063555039335","host":"s3://npm-registry-packages"}},"1.1.2-unstable.9":{"name":"aws-amplify-vue","version":"1.1.2-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ac425be585f0eaaa439778a7e40c5a071f9b458a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.9.tgz","fileCount":47,"integrity":"sha512-bzCimEaaiZqVG/loy/eyNzb8xpWpS8CWh+F2tZjQ6eTT8O5YtXu5/YOb9eLYYTXND6iJY01CgpFgZwoSzxtr6A==","signatures":[{"sig":"MEUCIE25MrweO/NKHOaJL8ezkQnvgZ/JRSrVI/reR1pCOxhoAiEAk6pAgVkwFq6bSq2cQTdS/s07yW+KobNavPEDW+1ULJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rPjCRA9TVsSAnZWagAAGdsP/RiNvLN5TMXVpYb2uLHO\n3jBtdxvhL0tlyeTBjSPuGS75Mr3PzFZP3LvnPI56p0PauH32cEJShXcWKx1B\nA7VyauspDRITYjt2K5b7JJc+dAhnVI/kiRmW1EQko5IdNG+sbWecBCGtXz+E\n+YrsZXPvp01nJauelJmWhYvgh6BaJfgSLTBjkyomukwnUiIfGbWXjnCJQEdH\nqhWQT1ogzkNxsXFriMx3isqIINgBW61ZK7gWFAyLnyavZsRH8YhbU7izpHi+\niN9gDS1erExsj+EkCvr8U+gvlJdGlhTQ9bihDpt5usIQYxRsy4QvsMPdsOVD\n2EM/3Qsp7ZtsEaXg4u2dcyOFhEVAcx8fvqJmg/pb6h3W6zMug0FeqhTSIDQo\nf9RksPqISGF/7NBg4VjGxTgYHkcbWzjG7wiLFZulsw3PLmVKEaJhhlbRKQwG\nqW+JlFYjvIuvufWhJmuhddQqHX5RiDuaxoCvDuR03EtPvDt/a4ZymorV/Sax\nUe0xeWXRbM9pD4mQSabIg2g4ciurHTGzMT83em7+g5L6aeAScf03X4G0JhnU\naGAe6+P0YbiY2NFHU7Nuqin77Wyr9pqHRtvu0Bye64DRLP2E5p+vj0TM+Mmi\n+2ziTqSKHScMp5+cn+lZzOIsFaz8G7K7HLY6W4T0S0BiYDGVD8BrgQRqkbBE\nkcAI\r\n=I1sS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8a78b6077bed1975893deda741fc1775a3f6e2a7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.9_1576711138886_0.5482398246351445","host":"s3://npm-registry-packages"}},"1.1.2-unstable.10":{"name":"aws-amplify-vue","version":"1.1.2-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b6c6fbbc14cfb54073aff894dbef00b14a5d1872","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.10.tgz","fileCount":47,"integrity":"sha512-76P01F+SAurr5i+dNryWo+qnmXiO90+7MHZl+8kB0gNLG4MA7m6+QUJL/VzzFbXyPmC0YMzXQ+vB4nXe6ozeYA==","signatures":[{"sig":"MEUCIQDkD4eCQyhLV46BKN5He8Eyo5j6ZTNLq8DiZl7toBqSYAIgPWDLNn7bRw/lbnC8XDQ51zbTHnCIP7ouqDj7QfcMGms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/RjXCRA9TVsSAnZWagAA3rQP/2RWp9HZkWDqkNPjy/vh\n/p9p8YLF2+WBMuPdtfHeba5SUfS3gi4YOFL4wSEKto6GMcu93UvbNu85xTWL\nab32A7elrJQV2tN+V9hTGm2eX/LLsgqxdPq0qNO8f1W5EUI02BrnqML1Gosm\nkp8r0H7/3jubDCdikx1//Pey5W/WEZHVlPDS+VBiuEnQREkBBLW7SFdc/Kpp\nCSgs/lIQKr7YeWgeBAdJWkZPuwTe8cMtkwxzgutJgiWXNor9XausnWQrz4ni\n/bDPorAU585C00dqtZsumw8dgNL5zRZ3DXt1U64YuswLq7QkFcZOXQZgBhjd\nY8Fq84lCFdIK4NKzGz59/5E8rvu9Gn45xrUkD3Rn64jBx1sc9SWrpzpPqNAD\nx3FfYHKgtrValCkJv44HF1LvAc19yv8wD0N4GpwqNxIXjRwafKhDO+2fgglh\nZWNAP8EV1BEbCQYwsOE+7sYQ4yXH9S3zbodezmNFEONGvCs/q1mSk7IBLc7Y\nrTb1ycUXQSuYyeZrtXlF9v7ZRO0eNtIo5qzzDCKiOTD/VtvKbkUBCERbo3Tj\np5L/JIqABzlCtzlp4DMoBE2vwgfWd2baEMmPrssyPdqzaccRGH0ZPI+iSraR\nz6NE4ooZZt91he6IpurKgOJ9m1cjPw4VxHl+WylKfU16FlT3+1YYn6+UZ2w+\n9Owb\r\n=ginv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"aa8a01ea15af5d00866dd93e5d86bf0f002dce5a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.10_1576868055117_0.530754311994523","host":"s3://npm-registry-packages"}},"1.1.2-unstable.11":{"name":"aws-amplify-vue","version":"1.1.2-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b0f5b7d90d50a3af708acfda552c4d4eff318744","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.11.tgz","fileCount":47,"integrity":"sha512-iyvA/pl/IagmmQB4BX4s9NpmXGdZHVVeVSjUupRvxCXZiWdiXgg3wSr1E4tqdnPTsBGjsmPmBlO5zgWWLziWbA==","signatures":[{"sig":"MEQCIBCTmokKDdiljioMo4c3of3UH6ct4l+lLvM7SENhnlgPAiBAzwq+2dQpPdp04vB8RPU3e74Vj2CXs2PwtkHFxrHYGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/SfTCRA9TVsSAnZWagAAWpUP/iwtVr9lPRRenMvC4O7Z\nnZYHEDNMQuiyydq++mx67GmIHJfvzkWT9Es2oaWydyvp6M9y/DLEEKBLy5WG\nvSFfmYQg1L7rq523amL2hDDMVM6KjmJEChLvD5a7AXnE9UJGW0ktHgI0kr06\nZTrNImOvT8oQDdYXfQdyXv27bq0S0SdwbbbNRWgFRvoq0UpE5CnWF2hEwUFJ\n5uiy/gXu0uC/c6hBFSHvY73vR+MxSE7odROssjnBy722Ot9lI38BbD4rmnLU\nUCrmUfV4vsau7LIxSx/kYSkC24Y2+cOGZ30cB8Cf/JWWBzECteEdOtSCY2/t\nk213nwonOp5E4Bj3VHM6BK+TsyZ7NwP5sYOUqqiixorlE+Ap/ekFRsG9aiVZ\nKXQRWOGPOR6qeItmrrXhn6+4HU18J6mb6sMKlA6KC1kgsVWaZ1EmcDVTy6Fc\nGLPbDPdrmVosc9ZXtWxZKeP/V/nJ054fTWltBfIlcFAtjoiudo9Fj537/cjh\nxr+tnjWGGh/oDERECZNjYBnvr3EBpLh0JcYsS1ZHavS+Rw6hDnc8VLuk3jcL\n8JAzYjnafVdlSGanA3FD/JPdDqiizfvTIasBSBXSTI+sSvRgxawXBlY4qT44\nw1UtSohGewfXyRJMHdxzUxCZXzf0/MnuLeAt72aBunjIvH3Y7UfMbWNbmO46\ny8Cx\r\n=g7X2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eaff2d19e06fe37ed8e63ae6c82aa6f811a39987","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.11_1576871890681_0.10480957070740504","host":"s3://npm-registry-packages"}},"1.1.2-unstable.12":{"name":"aws-amplify-vue","version":"1.1.2-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.12","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cfe6a58719bf3ffdfb80648b6e5dca57e72276fc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.12.tgz","fileCount":47,"integrity":"sha512-QiHZPA3TOoNulwX4QoGgeZyjmpgnaQIcARFXRQAULi+BOqvXspHUprPzJYim+hGS0yk0HTNT7AE1XmV2gkaSgA==","signatures":[{"sig":"MEYCIQDOS8rrDqojNI26aDMn2dFwaTbNhRanHRIxDowpgXXNJAIhAMAAd2eicVp2LwzvjaHRz1L9yAibT1LhF8gT3G3AmiUR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/UdTCRA9TVsSAnZWagAAB74P/iB9km3DrM7Ks1guwUls\nQF17KOWO1pEnz/CCysItcctJ6iXMv9dL3w53YjaPf9uayS+eqhnU2aZmMSRp\nnrXKzeHPiNrEPTLlO3poWhxQuekAH9JP62oKLKRvalpNLSl5a9EzZP9J3pKP\n3GCpWkFkzheppO6IYHZAodgzF91Tv0eTpJ8t4tKgDiD+zW9qq9vhUTHjKNU7\ngJri75MqJOVNYZ+x2OFl5+8iZiikhhiiGi6vwY4mds5oVol0+i+A1UX2v61H\neU6DC91zazWyP+BnuRLsHyifNPkBJWXzbiFJFNoxlg+eg+IjrprJnHGzm36u\noz8sqzan3q3qm2j48iSrLiyrHrBJffTknNNHvcSqycbg41u0ihVEPfhC2Gh4\nC7T1u+N9O/gugAG7IFlurP+QeIokMOMTctydv63c4mN08tfkFad5W3AdduMW\njEUMrCsi38Xy0CxnampHH8DRoUTJUSMS2RREgai9GVhX7HPnSfj7FPMCbgLM\nqH6I1irrnY15V5EL0jy4iWBPyaICUB8YTMa1wgPu1tMNr/TjsUBg+vOPo8H7\n1mprp2btfADCOW2CCepnE5oIZWfOJiEjcEkmR4Qp9lgitGrqlI1C/WKVOEKK\nsrmtxCXHOYUSHnDHdNkUbdbSuYWQopsWcnvj4eyY2AOG+kA0KqCGHTBEm1Dp\noL03\r\n=rduH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bc8ae262040d7961a28513a25013c2d306908874","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.12_1576879954910_0.8148317329580339","host":"s3://npm-registry-packages"}},"1.1.2-unstable.13":{"name":"aws-amplify-vue","version":"1.1.2-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.13","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f5e5a01e3db05f35572647cf9fdb759b4f161a60","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.13.tgz","fileCount":47,"integrity":"sha512-Z1UWJHnaXKYJ1OGFgzT6DBwihYzC8YVtG8dqmLP3L/kNJcnMo/f90fpfgapaqzfRkjg1Oe6Jr3woFdx9QYg8nQ==","signatures":[{"sig":"MEUCIH6CFtC1caFMQQU6qLjH1A2rXtZiEsPEL8xXhmmIcjDeAiEArSwZo9JsYDioRvU55KTbQKvT2flARZaCgH2oE6RcKEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeAP0sCRA9TVsSAnZWagAAXngP/1SMx5FIZI/o9xWlmPRY\nnYB3aW1ZGQaI56JzY2ixHWC0hlMMFVxQFHSkLZ+nhgGZlrYxyGWuMccLRCQK\nFX1TgP4QNcZ6L9i3OS/7U8x33rM6P4DaQs+Fw8ZHRFv12KnksPj3QBJu8JvB\nTlGGSwcIf8Bg1rQ4XoexsqcVjl2uw965cwdI46dk+djo5HOOdGxI2aFCMrRo\nF+kD490eBmCcth+nfevKLYLg+1/2UIz0tlW58xdbY6jA+Ve0MB4uaDbJjb07\n4o9DSnOGVh4Ue+ZtLlYiCjqqRyqnuhbIsxb+xNGXybHghZyeQVk6w0M9n4T1\nk5I6S5Galy/r5MIYG0g8+e3fD+MthuTGLnQl6xveTp4dLCUW0H8Xu91Ye/Ts\nHoLd+uqd2MguvwWyhb1qdfrVysjORqiDqK6GsDHbgWLFB2LREpAK2VsUn0Ih\nNgjP7kK5Xl8AUCRi59saNxw0kGkj5LQHox/EBs9kmJmSvjo0dNltGY5z78gQ\nI2S+mVBHSLgDVR6glcea7KlChzSTeiFF9MKH1Yw5412yVLu9TSmYPdxjObYE\n4Nix1llpoy9kfQ4VFt7KaSUIhzazvGTuCVCeL1gBp5Zvlb2EovE2+fwI7myP\nQcEj53D8+1QxGhdBjqDE6pYa/JCe3Q5DxOZ/uEHN5PpHr9cR6s6ep/a/S4DX\nmqUf\r\n=EfQz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"52bd2877bee66b934885e6726b68c8a926c28c3d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.13_1577123116175_0.20013165337688754","host":"s3://npm-registry-packages"}},"1.1.2-unstable.14":{"name":"aws-amplify-vue","version":"1.1.2-unstable.14","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.14","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e6f05ae3648c9e526c37ffca1bc11723a8c6c35a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.14.tgz","fileCount":47,"integrity":"sha512-RHNFP7aZZYS4TCwi0OvqPqIH138Ea8JPmVzbGq4KO/bDMtrK7yo76g9cyOOdgGgr6UqbMaOGTIsVvaIM/CKOjw==","signatures":[{"sig":"MEUCID5Vk+2d2KGpDMG0b0FnETDt/qeNsQFA5hJ0LJMhIe6LAiEA1wdhHt7kWkdZ7ToswY2/OteAPDngWUtv4TBPLlfQ0gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBlmECRA9TVsSAnZWagAAekMP/02j73VnyADvBvRMXXKb\nqFceTQ5r2/7RImQWmXvQ2xO+hSVEQrC8eDTGiNQW/1RS4TROBNZ+12tVfDBu\ninYqpe7erXjIhdL/RcBJA/949qURWFPjG9YxtMt8xf2q0SeGkbZPoy1TmEyk\nVikUKRkaJgafsMajUQ4eReco6Xn9jJ9rNtCvfyX2HXvwNzCzaUQ98GkGNfb3\nhRW087L6wlJMS/H/IkO3OLE+20FU9qsJ9naO6ELQThk7eSrJIe79XIY7SHY0\nsrLH0DR4pByJDygh4M+7XhyLtUgKFdDLbkuthxn+e/3VxChG1n2hhTVYIPCh\nb+2APd2U3XNPj8lvMw0I/vcktz237L3+jHfnNsS1eYOXOny21VLsKVbQNGIr\nHwtebuG4NkG+LZslU3Qdas3InW2ViIcnslp4cxQu2WGrbRSP/uV/oNWdmJz1\n3pyZitp1ZeDBljYuOadR3BKf0Qy4PAU46N1SCoslv2tgKt1Md8iPxyCaXez2\nODLwrCtOHJwQPh+qxlddUZzDsxE0CIWL1JmJtuT2Jl7HCaVbAeZLvqiRZe90\nwDVRYqgoix4neGCExePeTqOeHodxiAU1LIl3E++LBQi93rryHriRaYh2328j\nIlqTNgtY2T9OSGKLx++TYYb3KtQzs/A+7TzqAfmKLWAg2ZFk35GfeaLxD5+w\nH4yk\r\n=D0uK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eb3ab4409d7e1e06130095f29b76284d72612390","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.14_1577474435775_0.4840492781610575","host":"s3://npm-registry-packages"}},"1.1.2-unstable.15":{"name":"aws-amplify-vue","version":"1.1.2-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f8a811e8d475b47a31a9c2f76b99340ab29cac13","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.15.tgz","fileCount":47,"integrity":"sha512-w/7zGuNY52gFNisvQdh2qMcvGC0kBfdNa+gkJkkVNixRTFEITUSJcyVLQdHKJvwosxc9ukp5ccfvgteefVz8Ng==","signatures":[{"sig":"MEUCIBBIixN+BbO2bsvrZkTrNe+I2JHEPUZs5JmQonMAHBsnAiEAn5CW5VF2JjvZq2cYgSEKf9ciiJM2IkNnyvJDucNI2mg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBno6CRA9TVsSAnZWagAAVUgP/R/hES38nuulVbd3kB/3\nLgqDvdMI6u5NGcKCiwQnqhHD1C/T2rB3PjOk9nr90Cm5/DZBEHZGaQIgojdx\nr67aF82+v6ZW3ITAZa9tmGvlheeYlv7UCjjUkAF/WY4HJ+zlQhppzWWdaRPe\nf9Ijo7ZJK3hT98+bt4dHBTvKp0pJ7qqU21VFSgCl3Vh3GKFzVe3stc45Rh+R\nNH8W6bsNUfnRJ9xmrt6b3GwytXSmqUMm59s6wraXYLd9oz7d6+YHMKB8gne5\nYn7Z1w02GnDtuPJLbJsaGxT8HB+GN8PlxHO99cn+uANf8DW+8eWTfsZTCl2N\nvtLrLkpDtaGOPfgM4YHQ9XBjRQelVbSQG1p/v2n/51+KPcbIavAJFCcFpLIL\n2+7SALPO9YA50abrxPW2gEdpMzBITCm2URUgc0VWJckqqMAWWna8EPU74ftW\n5VaxRN8/CkDbqrf/1N89hCQ9yegf6khKVKPxztGi9lfaX15OU44NFUIL8Ui1\n2oUYUOfFgDe3S8+BpfzNsn+McJ0i5o9S5BvukKoatM8JcVQuw+83YjfWRlbu\n/2gGe4TlivTSEe5dkudtJdYiDNIxvjSEiUSQIOFUL4RDGNXTqrIlqqYRnY2q\n+ilx4weud1uHVsf4s431PGJmyRw3TygADZ/leCnU1Xq3EGtBi64GQKHmhryg\n0AhK\r\n=ZGBp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8781ce4b5139a9b55f39f59bb31e204bdbb2c8bc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.15_1577482809561_0.5107289389717495","host":"s3://npm-registry-packages"}},"1.1.2-unstable.16":{"name":"aws-amplify-vue","version":"1.1.2-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.16","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b3f303d71cf9b394b82c39fa37f739a7a5b4ff80","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.16.tgz","fileCount":47,"integrity":"sha512-4Db2DE+o4url8Xw/wFKiDXpgKGKrAefZ74ww6XAHTeSLQOpi1mTerHt91BNMGUAm/3JXx9/6zjE69PfXjnoMFA==","signatures":[{"sig":"MEUCIF26H4sVJGBVnxWQvNxu09YSdbxyByVl2zn0vW0DWLtcAiEAm4TO0hzqOTNxX5KuOgfWQt4if7UA9szeYTzNXwC+gC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBoV3CRA9TVsSAnZWagAAWdcP/As6aU1MdgNaWWNv6q4s\n1rXVt+qHU4SnVwucpQhQBPx0OVXNuS/oE5Eteznnq92I1wi7ERagf29GiOUm\nm4FvwFy2r7RclqzaE6El/k8dlXUOdtQAHrnPnJ0JPxkTehJ/bnHmhHS3mgqq\nocZCMmQhMa5sLVFILzCZGx/wwZNQ7rf5NtAz/eDh0NTrO/X/NdbHcrJnRWMM\nMHT54fUj40uyD3XyNU2vzD3USbLNX9BrcKOQEOlsdfqG1qlWwJlIaP+bFjeR\ncrbopxdvWFwWks0/qhuiowiKuaDeiJvi8kQhKRqwKdI4VJUNBXbkrOwxk0Cx\nKxn5tEKbEpcXYQ+4rxrOwWbsNpQq8o8wpDimJnQ/EHd9pchHOPxWee+GlwTv\nAzMs5jOSarvTbi950VLSS7zxmcge4uZAbfF+cvj6ufKAsgBVU3LcMIKjF2EG\nDkQVAxP6Kk15Fvo41H3pphhOd+Fm8nBFimdvphxJ3DiL1xumhhlozIU7jNO7\n7pJE8olG5VhktbXiF5ZmFYJb9hutlGVfX7WGnKfE4isH8/s5bBSPakMDNJ3b\nRUbW5IPC2QKSimArdY3yGVXjkDuAveWUYWsKGAXicYx1qa6UAMFTbKqltiri\negs1FURaOdUzg9wxdlG7zipQ785nA3C+7uvolnn5XGp0119hNt4MHVPit/+X\nEdPb\r\n=IqJE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"25b21e272f1e88e1a920192516a0fbde4da219be","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.16_1577485686564_0.9973687662033275","host":"s3://npm-registry-packages"}},"1.1.2-unstable.17":{"name":"aws-amplify-vue","version":"1.1.2-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"67d5b6675c1c90a015b4505ede209ff73cd8c33e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.17.tgz","fileCount":47,"integrity":"sha512-L63AbaoVsxLh4R5yYvb1AuZn2OVTBz7vZEj0fdmN0VaNp6EDQGDm6MfWa8AL0vKMaRW3sWhjvVonQFHJRfR4EA==","signatures":[{"sig":"MEUCIGgvA0sKMD0lGHc94MqwOx631Kr/sEkbTuUSnZ+6Oi5gAiEA/jJSel1Cp4bckFWvWEoR95FT5GRsb8cVe9KhwiXT7Mg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeClryCRA9TVsSAnZWagAAIjoP/00hdNYCZq+CMSFtTWgG\n9m9nJIfS0Ue54pjCtPuPRuYjpT3+ScEhSFKa4I1M1Chu2EUlY3rxDHAc28G3\nh0o8L9T8PfCGOcvpsAVF1TJSkTzD6sbCPLAZEJg9ys8yz3Db9G7Wovx58KKE\np4FctKmyQ9/hI3u89DasJZWMDCe6L7k5N/uCTaIgOLopV2WFokbQTu8iSXnq\nEpzk/5pMN5ZDk4AVBDzu0kRA3IwSc9QSg+NdhQYDwJ8NC06XTht/UEinDLui\nyvM5IH9muTj6e5okc1aKBAH7yGGKrzS6j3JFXDPuF5P8RCmC7q0Qx/H36s6q\ntoZVw5QSe2kWOaW4OvDHGRQC/ONzaIXRJDwJk8DyX0jFYFlZcti/jgOJY98D\nvRKmqfaE6iU5TQXUrn5/wwGcMId7i/FSM9euKNakU8dL8WZ9bAzl/0fSLslo\nmzPkOzCZVfPU/2qS5bWbn+V/dntTye6JWV3LpMwHtPS1dof/kCHFRNE3dchP\nTue1Ow2A1t+Z8p6bt/h3p9iJMqpYyWFFWbmyBaVCYy6GJCXvhfOf0rJwwjUy\n0NRlEUoEBZmME5NLQ3d1Nun2HmSVunYNAZOReS0Iv0M7UP5uHz4nn0MdcHvn\nFFm8R3IT3cp4JaxS374v+yEjLTGTLMbIyZB981cPQumrLFm8ccdKqpoG+Zt2\ng8Ml\r\n=YoOY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"510f86ef39bae3fba9a17deb630237a64c9dc7dc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.17_1577736945947_0.48521609585176084","host":"s3://npm-registry-packages"}},"1.1.2-unstable.18":{"name":"aws-amplify-vue","version":"1.1.2-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6bda8bda45851265e3bc4fa7c39f88a673ff7079","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.18.tgz","fileCount":47,"integrity":"sha512-JRTK6DltRdyUC0clDGhkYOZCwjKElDoI2ISKGyWgTEDcrHeiTgg+DkemUUlH+fOpAeCOHJ8aWS6O8wrKohrGvw==","signatures":[{"sig":"MEYCIQDYqZTx0bb4gwTtKmO/9wUPkYktI/vpMR6LAVt8Lhbk0gIhANFpp5qRjB3o7LSFM8fswKcQLveaZ8dnBZBjGD8UpYmf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeC5MpCRA9TVsSAnZWagAAMAAP+QHGl0S6y2P+7/SmOg5M\n4EQ+h/Nx5dPNfG7GZR9ACLPovC9K84X0RAhulJ7c8fwDrWQdWxLVcNs2xnoB\nf6wgG3sBtKdJncbsg75wDDdXuIA85avzUsJcZKFKgCr+cdRv53thzspVkqPn\n+HeytxXF47Ot7sMRLC/7V2K8IhPXSnttKLrV9+7TVjkuqSNHhmLtJuzjs6sa\nBjx39MqkKw4kKfY8aqEUoKCMPmXFqu7g8muLDz/vS9l3QkYPhttkQPXE9TfL\nTgz8Gl1vpVHCLJXgDhJ6VDuVVihukqJFO8wyncOYZsxiEy2BLe0H0ieTfU4j\neASoj/AlJne6BnJAPwEyGAZoqigDlbez6YbdIhvVQFWQGrERf4JrjSQqqAGA\nBbyofoaSomE5CmsDEX5DPwEnVTJCbS80Z/6eyAC2vWqsCeh8S3+bcxA9PzxF\nR3uIBeT/iXcGF2saiEyrzFpU3jsC8EZvIZU4YvEkbqZ9zF9dhwhwaOvC3LqG\nx4SeGT6tt02l8Eq/JZ6LjWW+iTsGTRD56mpSTYp7xJFWpBGXAYuSSkDugq9b\nZzgzeeBeInoIwwgT7ItmUr7xsYieQajRTAmg3YlIiZiEOzpBIVOFJ3EeJJqA\nZlMi+Cab6qIrPPvU0EpsoBvUJ8JrxWbsRd314+Kq3k4jiVJ8MTXHVw3YDiAN\nLxCw\r\n=oNh1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"329c03d181f726420aaacf48a985ba160323d1c3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.18_1577816873135_0.2751155060000452","host":"s3://npm-registry-packages"}},"1.1.2-unstable.19":{"name":"aws-amplify-vue","version":"1.1.2-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d106ae4dec0155c769c1651406aa30ae26de5a29","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.19.tgz","fileCount":47,"integrity":"sha512-4xF9mE/j/i5L15JXP/7khjWyTBKOcW5PwnWN6ZYZH60vCaJ3jOwcd5FF9IqOvCvfibgRaMuwjQ8BKDzI7lu4KA==","signatures":[{"sig":"MEYCIQC+3NPIp/qk9+cGxMSbsqoB6Rn/yT2lNmTfjoxfuohK/AIhAPhhNre+l5GwDu+kPdFjuSAxAzGGo0cktn4e7qgB7N7A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeC8luCRA9TVsSAnZWagAAd2cP/iCeAyFUS7yrkglvf53s\nUG5RNS6AJOg0Ivf8ntyuLC1Uk+eBI7qTL+Jzcifg4pGNmPNlZRarceh79jwk\ndXbIVtGi91g/8KnO6RrkcoBiiQlrcSaZXyoiQXFOkfSZ5hd6M58nyVX0LwVj\na05dD9/1ctJHsHz0vNCPglIN4KQwLE4osHuVaDE/D/DD3m/ukEfa8NNWVD46\nmWptmXbjstOSr8wwungR9bRKDJPCzN3PJgSAZE4sNxEbiz5F5TdG+JgCdZqr\nBM71GQAHuncIM3bsj2BzKLoAs5Tb1OxTs4wKmAJGBEcwxMyNEWIW43Wsk/h8\nDf9xoJOFkykdJuzLrBcEQyHT2hSYmyKllU8GjvYzCu5rgfAjT3Sj/WIVA/GM\nDu5y/BOV82LQFY6pISLRE4zbKcKZlkHmWI8yWJSttMC13MRr9M8pQLD1tEWu\nX1E4KcjLuRU5Zk/cXakXmKB9YJ+TUVT7RS5/BabcBOj1SFOiQN4lTbcltehb\naXzPWdg+vS0zoHn3sZLLmp9gjx01tDbr3DOqwetuGKeKWT0RWtUJ+kSEcoTo\ngBhj8AxbgkeWUQVioVXne+dZT9E8wuP3RbnyM0IX5/h4ZsrVWW01oCb48C1z\nYL2P0MPcXYwGxnBmfoCQFWwgyc3VLHgbpdyC4quYA5jzYxlF0okmdgdiUPZm\nWuLF\r\n=O1xO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d3005a2a8e5b1df54ac0f94335aee513695ecaf9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.19_1577830766315_0.8883648575825451","host":"s3://npm-registry-packages"}},"1.1.2-unstable.20":{"name":"aws-amplify-vue","version":"1.1.2-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"99af297b06a90cf4c210d1957eeff0f165e65fd8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.20.tgz","fileCount":47,"integrity":"sha512-Qlddccu7NvPviR42b7wbfElD6gyejeksN+h5Se+ltGE9BmHB5p65W7BARvGZBICXlfKatZXyiRNw5nJITttrIQ==","signatures":[{"sig":"MEUCIQCXa+cpbHBinvtWP9eVrda3WuM4ZbHSLcUA1mVJFiiWzAIgVQldVUL6BdB0ibrRBFQnsBCccs27+nHqHq7d9F6Feyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeC/OiCRA9TVsSAnZWagAAwzUQAIDYwUbmpq6lZDXvZ8iC\ncR4IaZm9Nu7d/0i6ZZtrlUrTh8ymUGsPK0SOCM1deayNC/De4u16H81xP2fo\n4AIMF4Qhb8Z0psF8Vi94L3RnJQM9QYPSAqKRIbEIeaxXvtVUc2t1N6+P/Uhf\nPUq963145Xo7h33KEw57s7DyjP5CLPewR8Kogs3/yad6AjjNZ6D+MTALQiK+\nEAD9+o2C/Y/mUOxS/6na0K6Hx+IxLdaICwpAKdHYrXEjjLuKdINkIIpVyH3c\nQ7Nqo+I428UTLk/xHHhpAeXwpnn3cHXShM9PtFhdINWDjaMxdLZfx/pDaC5F\nGpSbI0J/Ntq/JWRB2PJNrxjqupjh3ANvaEklSUmCmbmnXiHuls5jVvtsKQeY\nsnEycndZ7Cc3VyMSMDD8a6xbdj+T4olK5wDRwVRCq5Y4VrRH8SqCPY0OxITK\no2UU8nnH2R4obcCCcZUZr39q2j5vtRjInAUzygqQP2Y7/m0cMY+bQ14bqJv4\n3h4SgymTlwo/bYukeKYFSAZwPJ3FJb7DsDV6JlgLSqyloTAAL2HNkOvt0wQl\nvthBW/4ESl2aPLF72S9N9osXA2oLGMMG3EuUVzPicSdBYUy6eQzjhsdO1cvg\nUwy3gMTm+2oNceKbUavx3mZ0WzG0taQxNMUKvJMvBRLoHaCWIifxLWzjWnVN\nU5WU\r\n=OlVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a811091e5bd5c22fee44ea9b4be503b6499b42ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.1/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.20_1577841569996_0.728920031472791","host":"s3://npm-registry-packages"}},"1.1.2-unstable.21":{"name":"aws-amplify-vue","version":"1.1.2-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3f892f581038e0783ce066d9987ddef83c514800","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.21.tgz","fileCount":47,"integrity":"sha512-WaCZBKZehqT7lWQUphKeKuU8Bl70l2qQeVpRifyWcITNsQH3MhA+AnW+yvLrj+wrkPkLo6ehXan51jHffSjl9A==","signatures":[{"sig":"MEUCIQCXAtGsUsDB40mQ9RZgJigvKSa5iXmkv6oo6Tfgq0yWkQIgZZr20tbcOirlzwDByqeVyBeG84+yTL2aQjMVXYWABQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFSWACRA9TVsSAnZWagAAjQUP/3oBZ79I9UWqIpchJ/yr\n9GJ8FMVICBYix7slYVfOPEMVQzsNpvib9xnKQx7WBTprDwdh2zzZC9ohRiRG\n8s+9LGkwf8v59lQExpEFGSGqpVLr0wKyadX46nNgyVBSVhjnZZ1li68cGmYC\nV8XwmTNPW9SbN/Y9jCtWKikSAAXLNzBLBks5VHXP/eH3bTHjAwH6MTto5uoa\nEa+4lEsX29zP9lb9dJwCdktX4/qW2z2J7bl48Mgl6sc2zvDlnuR92WeN1osN\nuBGXPwvayK1aLkpoOaJhlkulG5MIBffYBITSr7/Q95he1wH2JMp2RDMbUkE6\nDIrmmVYw8OTRz+I1YsWs3+Xyt7mXeaDAl5lGIOKK+gz/KMM/VmkyWwi9ekfP\nwxweJmuUiTxlQqsjjcaty7DTPwFhx6c8cTJP9+GVKPPmhGSG5dTSzL+H7D7J\nwbnf2GEMa/uOiRneBkCvEICpPAQfpLWmcx/VIDAHfN9ty7OQYx78rDXnR/Xi\n1RaoWxxWlGBGjnEe7vrFePcO7XnjdZcnxWYefN7p+n2AWDuCaH+DOYmore2k\nrRIFuluW3M1wOSZdI0Vo4ayp9j3u4ry87XO0buxSmZXXZD8/Ba5C5OEcO53y\n6Xu/B0vdlUQvoXfC4syKSZ4kVVrFiHeisRq82lMr1Qssp42E6N9oojd5JYGQ\nZgBb\r\n=D3te\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"54fbdf4b1393567735fb7b5f4144db273f1a5f6a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.21_1578444160355_0.4253731339393021","host":"s3://npm-registry-packages"}},"1.1.2-unstable.22":{"name":"aws-amplify-vue","version":"1.1.2-unstable.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"da9d98c53f424171b83b8cf6f96f3a9e7ab7f1d9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.22.tgz","fileCount":47,"integrity":"sha512-cLbV3fFJDa6SOJZl7d5r75cNjS+OgJ2XkEPNL/ohl3ZqjswRV/d+bzB5DgiYMHrUtbIQfWvX11Vyz7ehpMtEJw==","signatures":[{"sig":"MEUCIAuLPHESF+V+hVCIwQ2MWTIdpqzfMK1zO/wERl6YnQCOAiEAlq92/sZPlTMuOFL0DcdxF+ZyKnzeXz9q7qhNLHcbUcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFigXCRA9TVsSAnZWagAA+08P/R8/5UDNmWMHLpBRnbru\neI0amLDRsmVRoa2Mkj66piYgLcC1bY0SKEoYIzMjIdnbrZNQb+lvoq6krRV7\nGGZQPepv10uWfes2mXxI9AG/hlpdkO5cPA4pncio4dsDxdgjGnZtclD4FfxS\ngsQ54OPV3C4mRUC4pkKWV87IVRm5yVIQRlES8nNCL38u3haKkVT6rU803Stw\n2IexfW0MPZYj7zVBefXWCxc2lVmZUEdg80R/NgsQmm8A50EUjniq2jl+WnWd\nSePNCLIcsbuzAv4YF6mi1L4ZKjSVuafvuvgy4Yuy9z4LD0Bq6FVkFhRArP2C\ndHWENLLxXErhaMluVhxI3UqDXNYIewoqZYTsxf2DCQjcAugYO/Qi2C2wRK4Y\njHdwRvN2wtiXeHjwfe30vQlZaNPakgHy3NKJpGDC6NJdInm4izKRlEe492n7\n5N6DfugFbMgxW622gaMYeDRY7G/XDVvmEDQ6RlEKTG81i/x3g40XzhVBegEJ\nO4bs3hzsWMMrxJYbN+O/j78g0hBn5OiSnKZunIFo7Nt7s6OZgqrxLUPOg1M8\n8/1NFM3JTBoA1grqDWp2u4DA8uAg+dNxYj/xHd+b+VAVTS4p8CTTQS4ZYG0R\nEc0dXs5XpbJyRiY5E9pt2dbm6XWMHW6CLzpUOALsNrkG4sd7qYoHR3TFU71g\ni8ug\r\n=H1yl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"63622488632cc9dc8e176054e760e54f861cc91f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.22_1578510359294_0.8624811569637336","host":"s3://npm-registry-packages"}},"1.1.2-unstable.23":{"name":"aws-amplify-vue","version":"1.1.2-unstable.23","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.23","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e68bdf3a877d68315fc85418b5caca84de46dd1b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.23.tgz","fileCount":47,"integrity":"sha512-Uit15d84V7013tnVBtLIlFsrYJonVDXrTeZyF4z7DvXXQXOD0o61JwroexCVcqE9F4AMxijSD/1+w+CP/KmNEg==","signatures":[{"sig":"MEQCICNkeqwUAM25T6Bet6Eml/hYIVoDGU0gp+hoYIgxFtWlAiBtOqIBMCGX2pqnzh9VmaOD6vbpU+/H4rE7324EaYguTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF4zSCRA9TVsSAnZWagAAGC8QAIEdyGv9VopYCiydBHyx\n/rRDHMKwgICOhtM3OOI+3Tn1p07E4JbgbHm1t0XkgcncnMm9XeSI9xScuuds\ns4QSirn7Yy6p+ZIo9NrIwmOuDRbg1MwdtAOu5LuliGSMsTtfYHvmfEGufRqO\nMxuQfRd+QIqIIQS4U9YPIk5/XwoTwpSGlBJer/wz2iZ06RSMERHi4y1MpTTp\n0mLsk9mdTmaXfUJAmpZUQa5bQY6E+ga/GSs2ZrMTFUEnqNdz9Ez/ZqIJ2/7G\n/DNiqD/w9axWzVriHp4hyqUIw0QsTHgBRZ5c+5134DiKBFST6cBGbY7b0djv\n9vIiloywEYTeKDuKkKNgRTtmOgD3QZxI8CQY3H5djGKwj8eTycoRnwYV1ahD\nlk6/PQ66qIPRYXgoYRQ2yy2UgMhjyhxXTzjsI/R5J3nfVdY4Y7loSlE+sYcl\nX1gIuB7+MruqTLJEcLKl2Gujfqx6ZRBtk0VoHF6JN43EQbwYBgDSClc1A4hm\nVrnbSkqXTUlC/KpIL17sjt21JYataXsl01CPDPw3XBtCkir0c1U3YB7NfZKf\nPxE6HSwc0fMuIowD6K6TEyqEsA8XhQCfFZgf8FI9o/+1MzNBPTLuX62nJzlw\nUeW+aa20tud2t23+FyyaOn/tCWeuDpc21zYtQJf6VlSeuboU57jgdRhtznTS\n4D3v\r\n=n9Vw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c06f8c93b7bf0cb7ed47fac68cd2cd63c97785da","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.23_1578601681536_0.7745997968994618","host":"s3://npm-registry-packages"}},"1.1.2-unstable.24":{"name":"aws-amplify-vue","version":"1.1.2-unstable.24","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.24","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3bdb247cfe7012db801530ed783eb78a05a55c50","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.24.tgz","fileCount":47,"integrity":"sha512-RcUEqKRh/DVBk0hWSczf1oTeGH0QzwaGuD6lfmlx8y51wF+ZIxEHasa8DuaVKY0mtkVPv5gi3wcp5gL6Qw9kDg==","signatures":[{"sig":"MEUCIQD+yIKnse6snWG7A1ZyKu4dxw3YyGIKKrGiMF/EPiHxDgIgKrg5jT4u9qU8DtAn5xcNCR+HBy8fGx18awqXUhnWvrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF48WCRA9TVsSAnZWagAAd+oP/1JstUPIDSm7PpfVpnwz\nlzmZpKs2DkuFLLi1x8oVOqY03qeuwucXY7wWkZS7wOdFNVWj3/xCkiXPN6M4\nuois2rD3+ZCw+0b6UUuTxiMf4+Y8XIWWXRTynITHVWrqtXyEw499CeUEoVqC\nuNB+EXVWfk58jFZ/aDgoiP2FhlXszrqMzgUJRB1nPXYYhJc7Y+nEoQCq//bx\naInufSHGyDpKfNszZ8X6abFAwMjU/AY3A//hO9QvoFIwcsM7uDHfo4DY3G50\njlQG5Uk1ymjuc9wCdnfFqthJgNjscGiAIQTEGhmVFutq1nAeUEKQZo+GqmtF\n8wZaQXC3Pfj3zMgEBUOo9uO8J2saJN0Y4QdlDVkHK5Oll0SlIaCc7s3F63A+\n2Zm89sHSI1PBke+6WNqBSdyrAmODhYwDMt+gQBmNpMWiu7qByB3ny1X9ctVV\n75JLH+kUvgQCKXzz2JkBQ9zwDoaDz8KrxpsGJTSZGDZW2zSUXvjPcbLDOnv9\n0jOig88GRhMQaS8UN7A7cWHoRGQBPZRXdvYpuGQnya7bHE/DjkoYMj2jyTWC\nvwq+4zAsq7HGoc9RwUz3DhvQpASaPcXcGAl8s0TUUQCYl6hijLxqCqWXIHL9\nC0DXtUnlB7FiiDp/ar5uKHinnsN+TtwVW+bgqVvoFhS1bFVbdmmefFpQjDQa\nPKnU\r\n=u3ab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9f8c7ed8515347bb4a5b6606202d85095406f7b9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.24_1578602260113_0.8316645483588103","host":"s3://npm-registry-packages"}},"1.1.2-unstable.25":{"name":"aws-amplify-vue","version":"1.1.2-unstable.25","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.25","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"729850baecd1117e2e9615e837fcb4658a10527d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.25.tgz","fileCount":47,"integrity":"sha512-UtDnqjAqnBU1uyAYyaK95vrwtRSrB1BAxn0+/ureRucob5RLvzhj43g7B/ULrwHNkHXRxCNffOclYYemWrrQnA==","signatures":[{"sig":"MEQCICCOe7IQi0wNs1jiJPHaYmR7MCaqflzobzd9mUfTi7dEAiBMszeppkPcff3Ah6Ga67pDoH8pOITbIUA8cQtIsWjZ2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6HyCRA9TVsSAnZWagAAUgYQAJWwwn8rrbwJcWQzYc4k\ntBT+0IzWlW//9/b411yyGXhc6t4747kOSbHATVvbekVO+Q7cbKWbPvaFhh3X\ncQ0q4mKnVtBdZ6OaFNsJ5rykQKfPm9msaxf+ejOvwvNYJM/3QENJp1NZRTVZ\nqNxhpAExRo4rk6XHvOUwdGZMSi+dpA55NvVfyutBGBEgH8aPENaHfXsPji+6\nm/R/hD9idXLPdwiDIC86/XAQaSHM8/gRnv9/mx4KvmgYPy3wRM1jtLgMd7HP\nXVrc9mcv1/8B48K7g0uWr3zLVdgxGvXUE6KAWh7UUmSQ2hNpBlxnlOdp7KbN\nJrphCSS9XnIelQ30imxjZ4WlVcpn7cZPQ6ktBEf1JSu0ydOC8x31P3fh+GLt\nKAuLoW5UyoOpPsH1ZvACAozZt6nzBhJIkrye/yhDsr95nA43goQMyTScWPXu\neucvionAlHpCfcXZCKpKKZur2W2Wxr5GOFPTIrPdhvgFG74oP0HR+v9PKZOw\nlMrmS3qnuGpvBrXNQfUdTyP7ZNLxyV7ey6Q0rmuxvcQnJSTFpmBnCi8fdiL0\nF7q5lqm4r4c1hT1+0YEOqRHh9x0lNWj9Idsums26Z+7TkNlJ/6Jom4H79H/e\nkdvo0ROafikSM9qmRcSLeHNY8ovznofiky2Ti5jhzjlU2Jj0AYqV6V9RCtco\nNJbG\r\n=mx+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ed6b4e2a03df617a6a90a6c8917e77a103a19155","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.25_1578607089887_0.987569850190583","host":"s3://npm-registry-packages"}},"1.1.2-unstable.27":{"name":"aws-amplify-vue","version":"1.1.2-unstable.27","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2-unstable.27","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"be51fcedcba8f67d4ad63a38748e86e6cf2f2165","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2-unstable.27.tgz","fileCount":47,"integrity":"sha512-nWAhU++Wxw54fvSuQICgTJgXc/FQMHOSGQz5nlv/mra7NtJtxboG0y219X2vCo2SA4iUAIQtfR/hPa4yU3w3GQ==","signatures":[{"sig":"MEUCIQDvdWO6D9ERBBe9TeMG+WkzsCNtwYTkLvUDce0yiYeNJwIgUw2drI+lYgzQWhy0iMPP4vH+pHH5JfUBIKCmHILm4E4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF7OPCRA9TVsSAnZWagAAEbwP/jFNlclJIk846/knM2KE\nc16nzwny4IzDoZE/SPFjDxAYjr05Np9uLHOr2HztpviYL6rQxwsbnK4DXAmy\nMkxCY0PrMvl0Esw/GoPV7iDKw3uwBrotTNvjqWi6eAnmMPFzcOzFGOxpOUtA\ndVHGI9oCvrSWhHgSN5fuoZ447u7hv3P7J1Gh5KOvy5Oj/bdZ6M27cIwrq6s6\nQ0IsaZH4R0K076jiJv/i5v+lDkMjUD8AA9JdmZb9ldOi20AlR/Hf8kJQ2DTG\nwy2vwPD/7y60pvM5AFYC6SWePgOMfwePW75+b715sQ/Ri9gfX+tbf7uIbGCk\nwpxkLrJmSMHBnJ9M/O+KhjjXe9Rz9HginO4f+TYw2UxPq6Doj0+EuAzbyK9u\n8HzFHcV3RiNy1hSnOVxZAdRHR9cntrvrNEAWLEBrWEeyA0ZrTMV6ZaSeY8Rh\nE+vbtW5Rj+8aOgtPw2/IflYcaboDeZWlY9ORBVhk4p1k+o2ds/0Zm5sz5DRw\nmWcCKYSVuAaX5+f9V8NSIMr1WMK0G1jBsNFxHaUvEZFLr46wapaaEv7vsDPl\nxrG1/KJ6QoE4yKbJ8UjwjBesleJiHaDAJSrb5fBMeS+qihSfC2l9PK+f2Yoj\nhFMl2wIC2F0c2heuEZx0FPOKt7L57z/PEf32LBRNDI5xXq0DJJFyHEx+UwJm\nDYzn\r\n=QFFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b824b1aba265d84e9c8af07fa9143e9162ddf163","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2-unstable.27_1578611598934_0.7480211204905363","host":"s3://npm-registry-packages"}},"1.1.2":{"name":"aws-amplify-vue","version":"1.1.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"930c232f85cab9e5785748dec983bec2460998c1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.2.tgz","fileCount":47,"integrity":"sha512-sHmr+iIAQ13KfBRt8WHnnBDqyLeu506P8f51nWZCV58GcnhkNKR1fkGqRodLURvTgvoctoXj2aLZ0tTdYoW9nQ==","signatures":[{"sig":"MEYCIQC6bF/VzztReEtsxabmfBFwZZQX0wpZdNWtV6QPa9PKgQIhAJLWiPy7gGxQOc4fGCK/REewRxvT1YAVz9rU3ceekBU/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOmtCRA9TVsSAnZWagAAK1IP/ih/dUtbc/nAjcH7PpUA\n7X9KDDmuvFjEjeHznn69wYgrhv5XVQDrWT7I200MUMcTLUS9dM8I4mi+wliO\nq8KhAjodC80ZHQ+hJ0VmYLPwmSUVGsjQiRFJmcfTAFiCukE4VX0hxD6T8GAQ\nlF8SR3JlltI6zlssS7MKVyF1aofKgz/Y1RcSRRYOE86WLvJgkuKRcPlsV22j\n6RkHEz7ZLHux1IsP8kV8Mo4epMKTcZxhHvKARb5920bdzXLCdvzUoyemF9Vx\nyZlfYmLLSujKMmCui2cOA6t6SsSCnfMcRPGWE9IcXkzhng/+rTk3vsg1Xh9i\nrgrre+gYR7/Nh0KVzqCzBW1JiQWBkfn8+UCT1b/iH7IkAxnKPDNsNaxo9r5a\nWtRwxeBxEgHnRxHYSvr0ELzoRV9h5sKzCfUDsAf+YN7xqxuHgOuyY0opsT+1\nXFSATghQQ92+3H2bY8/gT8sAz+3di/KWKhUyYJGDywfOa1oqHrEqaeaX1kdS\n0O4k1Dm4eL4pnxaomOcYYLTiS4XnBYX444xbgOmO3oe7ZrEDP5NklZ8E1mOx\nbYoWHn+k+cP6m59gHuKziAPNqakI+5Sc17LkL+QYOAr4kLj1Jw1jrJwTM/+8\nYt+AFg4Im1hOJG2Ps9vil8c1ntkkgLse4kA44UZMTgl/M2YMkVp7vS6EyMyq\npjVG\r\n=UaxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"f205e97172b5843d14d8fb75fd7b5fc4903e9034","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.2_1578690988626_0.3036793877130519","host":"s3://npm-registry-packages"}},"0.4.0":{"name":"aws-amplify-vue","version":"0.4.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a491280fa1be4fcd2326e3faf5708290959c5d3f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.0.tgz","fileCount":47,"integrity":"sha512-ZAQA72JwnlBbxWqciVTW6Re/nrJOScf9gaP9xvtvffjebyxzMji8rPg7FDj8jjYSy1/TEfyPSMET1Lzz17VtbA==","signatures":[{"sig":"MEYCIQCRewEM7h4S2cUEM4b80CESBaAR7SrjOZEbXzWJezlrjAIhALOlf+KxBPJR6N/WIXYkWiqgg0q3uqSow0dY4ZdfuZSz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGQL3CRA9TVsSAnZWagAA53gP/RnpvuUS3W7ananFTX+s\nhQLG2Wu6e+U2sZ6Kxgufwhv3miGrijOZk/IsbGvzNWPbIQCdgLMKvB0azxOA\nBzxFQImJdim4JY/SpXfl76mQFbtSYIjXX9FGbo4sS3pxIJWuyh8dkGnZh/Xf\nxJIqtpNwL2cdgKxYF7pG/bUH0VmkvokNsxs/jZ5/UfiJDpUj2QBCZAk8Otj6\nYlYtNmLuGrC26f6ZMED0fIRWPMPfcvaf9NhK6WbPEqTl9zWRCsYaLg/W2kp1\n3InuVrPoU4FYCFnEGPXWeGJ3E7w6aN9KbVyZs+OTw8YyS/wJK5wV3q5yBOLQ\n5V1yLfq4+5IsIzh6bNKf215EiGJL3GB176KhxwGHKA2QuZ5mReailHrdTo+H\nLH+4sCP0YkvS3ye14PpSY2AVh729uFz7JQhNUHcLINN6Kc/HCN7LZM9ICInT\nJm8G8I2gnGmYngVcjN7kmTCIfC6OszP5ffrmsiYD6QIt5pIjsjFsn1oMZaSe\nhgIFmxtuCm4j3cKt4F1TGZgrhsVJSHg4g4H69662oHyZEwl/VRfNQDdciKfU\n+ppYCYsjSwf5sk8v3Nm7DDLfkYdfkTn01IrlFMysSZlIifcZf4lym2tzeFDF\nn/7BGMIe3Wp71gm+WWUAyODtwIseLBb9R+JSQGGEdD9kNR+DIkoIqynH+O3x\nSR14\r\n=vTRf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1454cc7dd1239cd9c00cb8b037afaca15d0c2cf8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.0_1578697462629_0.10730574324581177","host":"s3://npm-registry-packages"}},"0.4.2":{"name":"aws-amplify-vue","version":"0.4.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8e0d0c330dd5f355bf34c60b3f561b9d2bb8e1ca","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.2.tgz","fileCount":47,"integrity":"sha512-n6+D0peVblWcljEwYqTw3ECeik4h3xU/xbemKBCHfvtjXL2jb172r+5blzuEU8WFQCgOeQWCqtzM6mET3OQe7Q==","signatures":[{"sig":"MEQCIHldI5YFIHAOzObQCD+XEdRC9cjBzdMkeuxa2cPE8AzXAiAwRyDkY5bAsrBO+gA2ToiKA577wihN9R+GR8eDnqpS3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGRTWCRA9TVsSAnZWagAA8TIQAJLYmKH7WLpugmOPibrd\nMny2/WM/MfcfAV5rd7HbhNCH8Q4JL1CJEJAn1EIR0rUipnzSpfC9jSkSVpf4\ncD2aYaIbhoda54ZtJ0o2ansyKg0znpb2PSAmKqfVJ+UhK2KA15ehEfWkcBIG\nxVVTvbsvIs1v3bK53Xnr5NTkHgXIdcximh7rzbg0W43GhZzoVp9GtIkcUFFq\nR9pqSSZ3xeSZZ58s8xYs2Daut5TrruW2nQMpEIGBdDG9V38oS9cF8shscz+K\nW28bQED3xCZBd8smr+BPOIo+plvaJpnnthCdu6sYkGLhJpxbBtz4ZXoahzjy\n+GI59xtsk8RWACtEzNy2pHiOUR2QKgfq1YJDFmtLofq2ustJKnl7Rl/u+x3E\ng04273WPYweMZcT6aX+GkhZTRQTji5KtiVyvB5vbGHpf0jgGL/qNLHdv+AJL\nOihpIVgLPb5vw242pa89PHww8aDTldVHlZj0sYtbqWqDMqXu5mkVM8oHJdSB\nYTQi3+IJsUvLzYH3TV9rsR5bNtgZGf4yNlFG6X2buVL96YM1TjT9iVbYWDN0\n4IdIbfDIX9oFN/EyU8/iDwfG/v9L6Dz91Oh1nUEB8TiQlywBreNeGqkTy+H6\nKT94r2kxyRrJyA/vY3etFwrRzKezGwREHFHY1hO9WL0yZRUcwXWpv5KPXnD/\njrTI\r\n=4uSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8c5f476bff2a09c7570a6a9b76a89b8dd70f4caa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.2_1578702038113_0.1545721314345594","host":"s3://npm-registry-packages"}},"0.4.4":{"name":"aws-amplify-vue","version":"0.4.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4e88a63dd7a9a4f33c6d3816ed6ac4052fdc4634","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.4.tgz","fileCount":47,"integrity":"sha512-NfyCLYyEW4AXdjnuatvrc+Bylq0bja25/xB6Ewt2u4+XtfeV3nWZAJv4YCwwKmX7Xct9xycG3MNLQyKxOCQnag==","signatures":[{"sig":"MEYCIQCInLn1nmN38dpqE9c0/Y1BhrY+15FBqc8NA77JkE3YZQIhAOvHRsuLNwO+9xXuC2JMqwNNBoIslyIx2MpmihsnHj5v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGR4hCRA9TVsSAnZWagAA6W4P/0mX/Iba8P8/ntZ/PKGh\nXBXuDsYE7RbXKtIQJH0uxxXhry+TwYMlSsvfK4Gvt7DQYswO1y/1TlBqH4jo\npzje50dRb79nmG0JsB1KsaPj0KK/VMbOxcv0FyaO2+Z3RLl8MKMCtdYZh5Vj\nRIpVuv/r7veGSeSwKrqP4w62yQB5vmbv0r3xWaylb2NSvG9m3Lw+1YaoQjHs\nAhK4HIWPa5RPSbviq8IJSRtOz0TeqZdEeyJXpAGMjNGv/fwRu/ltoI6EeNK0\n0MeYD3eo/yYkNc6/LaGyaWhYLlAiqVi+QgpN8PlxBiDS7XaPhstYGV9RiaI7\nVwx2mDt4bq9MtqEnZ9vj+TYctugCKdHPPWxCb+ER+gRLI4GA3qOp6hnbeAhq\ngWGSQ/QmGHXRQ6FzbaZXlA/ddjm3IGok+1ZRqmR7bZVQSuLjeBXDGbatu1zz\nvl8kY3yDVU3VZ4mDH6KBXcc21/mSVguFEEKRBmDzxAana5cxMLecbjngw4cW\nRtg+5yMiwYTv+DGiIsUZpNRLW/v78xd2owL/JGXEUG7aMAusyXVKEVPNDMja\nGJOCfUrf4+We9g71HlM1Xus/Xis0chAwVBI/3QGuZoXdti1Ypm5l8jGXRp3h\nUY98EhBWsI5qa21O3D7FsKDnMjz58PIao5pEJwA98UYx09vVO7g1+Zla6Pky\n3AWW\r\n=YlZ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4f1eaade7017d4af91dcee049cadd7501c6db836","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.4_1578704416693_0.7923701437448907","host":"s3://npm-registry-packages"}},"1.1.3-unstable.0":{"name":"aws-amplify-vue","version":"1.1.3-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"98570b1208e15e22a957201b97c1379461f60d3e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.0.tgz","fileCount":47,"integrity":"sha512-i1aq0GrQzCNlRAGATC4fJsOieoAFRIjQb3dDT0nMY5uyZQrg7NhAvQT/oDN4kMR0assbQDoD3qVrAKBbcxLp8A==","signatures":[{"sig":"MEYCIQDK7UCMIPEhWw8b+XJZrmD35EQ8ZIPHWMesyWRiU3bOsgIhAOIdTbwqiPsH3pO/U80d40/Egjfpt9DQHnUcfuOfPupy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHL9mCRA9TVsSAnZWagAARIgP/2rJ6h1n+6snfSiVlhL7\nvNBkIlvw1Qofv4C9Pjl5P/ebEPdNe8ZJ6W5dgfntwK+tyHuLr2NpVOYbPeEc\nLcsihDaX4V9Tf1+WgZqU2AnE5bSkXcD9wE0JUnlr9mJcLKytS9SAtXqLB+7H\n7Z8u0cm6hAryY4eNYHg2xrEXC0nG205kwdCcca05hy5pmI2WxsTOU2Oxlm4K\nC1z8x7SYb0NUwRla/lBqnFRXxWjvdlu6fDgDgFjVC2E+Oe5U1aBpSigZO+Eb\n7fW1ugUwb24C/NscqcN/gvr3Q0VBXkDF+Rphb3a6HeCm7c0F32g/EdGOe/be\n/DNWf/sJCodGf0Pa9y92YvPXgC9a6ORRz2cZ8QuqZOf9R+mNWNxBL2bZ5C4P\nS+JOnQm69uKNpJpzSD8Y2MZ564VMTtj3OzqQ4k0wv/ftqep5koICo2/JcAgI\narxBIcdFRrhTmdie9W6FGcUAaKuNwArCHbciytqoEedaQHrWZKDhOMwNdb8w\ng0YJRESTp56hCZFKUT7dMxFPIszQjfu2Dd4p8jbrS0FYT79Kb5rmGXXjS+uw\nndAWUr6cmft7egDV46WyXgLTTw126RsFbVRur6tLsCWrzAC30EfwkGmpKfUZ\n+Wuz0ZhfQlU+dshPcS8AU44JrMwI4EkJn7d55+JioF4MzYf5a1K4nB1T9qef\nXt//\r\n=F8r3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7154314496360f2dc6614300184cf778bf338b64","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.0_1578942309651_0.5670388671351712","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.3":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0d079a986b25672e10b8b10cc770abda2ea374b2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.3.tgz","fileCount":47,"integrity":"sha512-GKLU7DllfrWqv6YZAFl4GLOKMfJuQqPUDfI/36utnfotdEQgySdQC+4GhpluALDo7f6cc1U4YimvJL9FFrdjfA==","signatures":[{"sig":"MEUCIQC7fbwve+7qqGMb/8u6Dpj+dn9vpWMeUVroMXF3BXJrRQIgHQdZdnkwdVU19nv1z7iAOW3f6aSlxgaysfsZRuk4zbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHmbRCRA9TVsSAnZWagAAuSYP/1NVf+UnNjY0F4tu/G9T\nWG5UenACw/rAOyS5g6DWlY/lmCRL4YhpsxfMOcIMC40trybv5KeRBPQ2nRkb\nf1gyQ6VjH4Ux/Yiksjzzwo4XQ3F8HE7ASnA57FeeLrBH795KLQMXucNgVOtc\nkAn2OT/3UUkVHzO/E0/JkaeVpk4uSlUCJ+e4SrKIrid/0JhOqwBIO1UaHxM4\n8HNGIdW/nVqQD7jNMI0zkkMnULsTATe254LFleDANShjSaZamf2gYpab1cmp\nHs4ZNe/D511WZoO4a35y1c7O3KxrFXo4zOV8ablfSSLX1brpa0qrMmTuMssb\nqWzYk7kBoIjPXGbMQyuy5ZbpX/tx3FJ1qqrLtN4OGWBK5h54/I7Fqa+zcEqF\nwn5s6prRV55ac4x6syTFnju9f/YngxqWnMOG6N47fUpTvsyrrt+1GKi7BOHz\nhUX2NY2ukIr05oe9p5fOI29DoOdEh0+AnsCI2vqdyFWIXLcSn+yKAmqspzWe\nC2CEeZCo/X6vZSkT6/Bghib0EvftCHpNKuoXKNOzRDL5p6dgfaRiTmuzQgQC\nlqODjo/vOlfvI2tkKjq1Z1bYURBW5lZZeFgLrQ+ULccwf8dvquXtDGGrJk5d\nZ+QmTHAYOE1lw/I8yv8bJN+DCrf33wrhH9eJl4I3nLCbQ27MtGaTuKkdfEaH\nFM/N\r\n=P1tr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1d568b65976024fa94d1bdff89fbd538627329e7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.3_1579050704571_0.6123904318340774","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.4":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"05333befe275b2b4135da2e4e6fd0b88204dc8af","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.4.tgz","fileCount":47,"integrity":"sha512-VdhEDxdzTfg2UjzqpHZzeV5sdxvIb/k1ZdKeCejq+mv1IYoqdJDgog96Bmfd2vuwDvZYwoi33w32FxmXQ0miHw==","signatures":[{"sig":"MEYCIQDLVL4y3L3nriCO6bvODrpppmoD6oUqsYDar7vlt619MwIhANSrFjzstFBeTJJXgCz2AEUCRHZA3i7HyXrlzMXH1EoJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH471CRA9TVsSAnZWagAAbb4P/2R5/J+Gybx116RAqf5c\n2Oj5Z5FXDlK2jYj/ZnjBH3shH0QfOy1RAKa0c8c/iNDr7fhHNSkZVDqA08ah\nLFMgARAQVaUp4iqCMnVDHUAyahro5+0zZmb+E3qJoeyxSvyU9HbNVmqcexYs\nsuZAyIcxoYf36PeWATQ5ePiXppmWK7KbRUqzFuC/++xZOpwbHSFWKwCRXOGS\nFvm+4FRqclsgY3z0Fe31wZ7VyObfh7t2emGXRqSvick88yM0nQD/r9ryeS6S\n4JtGdmWbmu9Y84xaSe4fmWZ0JP4TQ4Ef0bVMNT+iHUjX3lPDe8AAvXkA2awm\n6v4eiB58YxJ81Pg9AWZxnRNqwugex7bTE1abEmI8YDJks7wcMjpNfkQYV2xY\neaao8dIFJoZVVpGw6bJneQKzfBvNYkOEkgsfwLr5XA4W+/9LK3lWmLNcBaN1\n7kaWyiW7S+ENuDrbWsbNGiaEomUJzXLqrRb5/csLXui0bIr3w3m+rnGai7nq\nAPEqy0ewk5uFQmC407JgAgJr/8HiyeAoFeR0lxJrGUyASuzd8AYG1U6g7spP\nMH01TKNPngZKeW8X6LSjpKN0aWOvPas26tdNvdqUSU75W5+urcX/dlBJhezh\nYwGp7ZYgDFIxotvSw4TbjJLnK0A75Ye1g2tuYFC/HmPJmUsFuzrTo/T+5MZi\nFajm\r\n=uSDE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"407089fb4f93afc79ff77b4926e0285dff3ad335","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.4_1579126516670_0.9725578861103334","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.5":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7fd3fe5dc6ee854edf6b8947f86d398c811005e2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.5.tgz","fileCount":47,"integrity":"sha512-X8aocgX3kLAhX4BDaGX6BRMF6cheeOa6oiw1x/bKlRHWE2iQGaTFCVLxdFDbsKZxvbr5O49M0ahIN1sCJJZ5VA==","signatures":[{"sig":"MEYCIQD2lFprp75vMzIkZp/jQVlb/jwYL9lRDL2ukZ+4xv96hwIhAILtuOgjeZ4Ytp5qtAVpP1xxRNjvxzJGkHmUTgVY3T2Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeILPOCRA9TVsSAnZWagAA4Z8P/REbxT3V2nWj/p2XlCor\nVcC2TTAK5UqkCQp4W1jTXI4jP6UnZQ8ViRwDQvFe7Eri7UM4XhqO6pVgjkRM\nh/OBXMXDgg4Ejm9mklktfrVjnctXLt3/kXweryK66DQWVqPLwDQEROM7sTAC\n6kmRYiMpqobJ2aJa/hLF44zG430dAxT8z8OtnegJqOoyt5tJy92woW9KuZJF\ndslIUrSap5yoXiQBid39OYRR1Mu0OjruD08MfDIXQJ+TZXZgoxwVaL/KQecC\nLGzNewj0Ff6reNbgWotdRLHkAM6G7fNvx+mgvNKOwueaOf0H9oDjyvVGVp3v\nuiO7zWe436ARO6mLgU+ni0AGpwOPg3lg0UejaqDI+7WspQCNIf2ha9b9ZCS9\nJqj9Qlk0nuPOKqYAtH4kGlM5ANVln9pVq/un5pnHJYrScK8Eo7iAZeOFSoXb\nTSChSF+wz7wPp/HHAnI5BExhvlieXUqIJOrS6pOGfnIugKUTkvsEYYa1VsZj\nxmiwkMor8J4jNEAIxFY7fXC/CIPN6Y/c8sK7PEDeJPJgP5t9Al3ULfGz4njb\n/KJ2FU8yzErAOwZNOHxuu1i5P+h46qjZDR+8N4+uSXCrDmG5lgkra/8e2vN+\n5miTyBHRJRKoy36UziqG9/W9m4RgtKJrS2v9F065XoWyapSHw/usq6sqRD4q\nCOgo\r\n=8PGq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c24bd2e376ed6333420b2f4bad9899a693005694","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.5_1579201485590_0.5336631761259849","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.6":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"766ece95c27a3185dd1bb7f8076c53a224ce9404","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.6.tgz","fileCount":47,"integrity":"sha512-z+eORTEXg4gWRihMmCkTXglZy7S+L6vCSdq5Hexx6UZpxq1bK6ild87e/oBeghp9mPo+fPMotPgS6f02hy3/WQ==","signatures":[{"sig":"MEYCIQCTi/rIt7NybmjmuOpJC1LsmWxVOiuZr9okvNdfkuytAQIhAJpt9nydagAyPqoEhxB/B+dQnmptx4m/p3TIpFe237AK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIODoCRA9TVsSAnZWagAAFzEQAKPpgP820B47LrtXYa5t\ny0hfPKyK53iYYstOMk447OxZyKS75s3YlP5Z54KrY/PcSRZsG7yyTUrTC1Tp\nnlyZvwLEbaO7GtlRL6ExlV+VWGMJ4qH2fsEABEPGT7nBFh4m+TCpYgvFJgMi\nBeIoO6diWdJHJZlSrfdiJ9/atDlBxD7YlYIu0Yed0QU+DdwQegjknvDFZgU8\n3U07/9BupZAieogKGAY9mEQbYwMmyBuvSyAzlSeeT1IM94UwgHPE1y1Q5OGF\nGhdj5GOV6LIEGFasqUH+TDmpCGT3PcH2klQkdJmoeVCL/HkKdur5wM3ws4YS\n60U9ZHI/bV253sLPmbspdAAj3HW1+qAWjCg0pFmGK/f1glxYfDXVN8ehLhik\ni+s5aYSapwNDU4QchaQV77Uf+Ke13d9AL1VHKGBkI3PCz+wLHiw62RDDFZIb\nqNmnQDHKgkvD/3aBAp0F1BL1ciRqwJGY5qQXvEpAkwFY/wZUaLwIN7by5cgo\n3Cgce0j71XAVii5diRucQrKaDVYfrAr0gNEOFu2WlmmVba0vDFtW/lqjSup1\n7AlwOujak5zHcP9QrS5nr5kFRG6yUSymTVMIiWMihPbDxGE1wOZmOS5pgzn7\nDO2fezbxbYdDBvcw6/LrTPtlwCl1KCWiCdNSgLvGeeXC3M8TXDhU8KboLlMZ\nM5Q6\r\n=bDs9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ac02ce934a3e02cd9e5bd419537fad5bdd7616ea","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.6_1579213031921_0.5544327969873688","host":"s3://npm-registry-packages"}},"1.1.3-unstable.1":{"name":"aws-amplify-vue","version":"1.1.3-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e14dbb71cdf60403f9f304512bd0c1ad6f476f40","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.1.tgz","fileCount":47,"integrity":"sha512-bzRThyh5UEGqPZtUwwKEPqecQAo8dqDM4cX+ESm5vijf+CqphHHqnJoUxiYBBags2rz0GwZtvSfKnGQALnL8Cg==","signatures":[{"sig":"MEUCIQCJqCe9AnkE9ooQTjTnBLwCX98mPRbidNXau+i8FDXNuwIgDK4NVWNNI9MmQ4R981KUCUHivUdLrOLzFOkx8aaxDhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf5XCRA9TVsSAnZWagAASwwP/i5OmOaj2WLJkr3sbfz+\nQrH6hj+wMoz0kuvbgqQuQbgXajd1LmLOdykitI6BcXuemjG4NKITwQ+uO8eg\neNQfOEzw9t10GF9rkEDI9rWjj+okay5eZF/elGjB90XEMddFA5XcY9fFbuNl\n756LL3n6kdbY+ACEzMel40XloWfUYW+ZADUqCoC7dFZG/qFPkHm0wbRh7D0m\nhq9XHkJ67sjVaQVSPUtCY/6bLu7iliwomumKykq2fDEffZgloAafJV9vRYfO\ns3S+mJ4LzQcvr3TezC/oV3c+MZ0LwfSDBKMlzmo3NZtKMAL+jLWB8MwX0HSy\nNurnS8qV5xiE2DToyu7/IEDbbvzJ58F3GiYAk/iJuyyL/J1PFpUv0JI4+MCj\nscZpAZ/UFLN34IInpzpHrGmm5gwdiOjdxBN83xd1DM1kZkpVUOOYmWig3M3h\nSnz8SmTK7aM1MxF1FLIwYWEGLq2dImKYgdT2G8is9moO6ct8vb49FS6xeAzd\npd458xCThUOlchxGiayh2gRrQbN1p5Nzt/OxOX1q5hYeDT9DLIkrtF1onf13\niBCAFo7KKFogQsxNN1PO1oGQ89cjnNJkkXRzeVlMVltt/75Q0ReGT1PH3mLG\njQRGgMOW4fo+ldcKNvUgZVFyO4O/FLb7UwSh/TTQqbc/MdMbcm5NXH1AWr8z\nGHLG\r\n=W+u3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cb06d074578e9b1b79605469e57240dcc0fb3ab0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.1_1579286102750_0.7895807429188051","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.7":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3a534f7fd83cca4331fcd21371109041cacb95d9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.7.tgz","fileCount":47,"integrity":"sha512-DAz3pQ3fJun3bnYGPpfZymPbJ9tbXZxJUfE1kJDWpVE6lT6ldOZM6LL7+3uwHvNSlxh6Z4Vs4DkPD48KKkY7ew==","signatures":[{"sig":"MEYCIQDSFCW+14KLZSE0HRJCLWVsHCy3ZPMmGifHrAlhEp95rwIhAOC1mk5bwj+uON7bCrQNmIAMlJ5cOkmfjsJ0K5/fKJB5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ1xSCRA9TVsSAnZWagAAGRMP/RRnW+z1VQg4FfuGaH5A\nHFSsjNMWWWaxrglZ9PlU7ITFKOJ3w73gc/pR6im5fGM7ufV2xel0135t2Msj\n/kh8wufXQD49YMIT2Msw5aka3S7jaLWjIaxbHSaN+hRoA57RFNBwwwK6XLw6\n7s/a7k0meHEOlJlwGQcrJJkDBEKomQW0xJucyzK6sWgH2lRUSRzi+wilWmYX\nvmjla4fB0PETlf8jNSGCI4ltlUMLegKTQ/EuSY8G/lppDT/fE61PWCwMDIQp\npRe9XO9mUPtPr2nnsboixlOhjCZbFebceGIN7joks0Gx3xfOSdHr/pUpc78g\nvAG/MjJfIj/BLxPUhIYSd7jFjDia74AJk4mPaO2sl82IbxNBxr5k9xxCSBgQ\n+K7IvLVqa3Lfo+BP4pdEV2+F4NKUCV1ANWBsUJqLbVbVb6k8g080lUKGfxgs\ndpfL/GRKwLtDYkqQmpjR+Ep8Df3Y3ol4Wcjy49AlPTIEdQ6z1OGDwf+yuOAM\nsfisoMPPTr25gCdUWKDFSNuY3iTSO+SnVRgDob3fQwPNqjFy4HZ7Mkc3r2eZ\nRThlFV/tIgxPsM+L8vtChjXCDQC8shLEClGDxB30Sc7DfJhhGqel8438siAE\nzbQKZbGYhg5YGP1ADcrDd2TNIlZlPSvf32OIFI2WR1IbFG8aTngpRan7ygJG\n/Q/S\r\n=0jEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"85a8994a3bec287510de4b579afeec8c089bad05","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.7_1579637841478_0.43961116628703767","host":"s3://npm-registry-packages"}},"1.1.3-unstable.2":{"name":"aws-amplify-vue","version":"1.1.3-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6cf052ba91b8adbc67f91162f981b5865383d356","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.2.tgz","fileCount":47,"integrity":"sha512-YK207FNPTEtNbSANqBPltxpV8ovz22sHBXZH6yTg1IptN4u/8lshljPg0T+fI4kdGZiOn7N6n8WeOxcW4ktbEg==","signatures":[{"sig":"MEQCIE4OJWNK3Ef12BTkPJ01j81IwuV+HOJHKBMg8gRxQjwgAiAAqd8OYXqAGQg+vqx+L2G10i+wckZkCXSXJm8/woN3gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4+SCRA9TVsSAnZWagAA58MQAI/wkanwthKdsjuyRX7i\naUsHZ0vOs3WLu3KvTMqoR2mbdhXjjRtoAb+i9ay8TJzRDiIUvBmJz4RXLIem\n6ZRSgjSTI8+U2VbKyXqNixrMQqhR9JrE+y9GmKTsYgUn/dJqpe1By+1OfFZo\nWVh7iiasKNoO+GTuZak39SvKVBCF5k5FKTjnkFgYdUFuNqJMZupm2O5ka6J0\n8YVTb7UxdXQ3jQs+csY/ywf7m6scLK+Y/cFMBW2vvI0LMzfLQkdXT+jYLOq/\nLzq5WU70lBZ0G7dE38KfHBNBN1TrvplFwDFEwweYwQSkg2lrO5A8nATU1uek\nS23WrDsdCernmB6nfFc+HV6//3nKt40P4Gykhv7dA2m31cPcgNpLN/sH17Bu\nqqkMiPagX++F6tfCFt6xpjOHUZhhA4odOkIzwINPMc9c87pX4wlGRdGXfglr\nwOfkHkgGVEcQlK+CuDeuZvhofKuupqaDWAoJMYaPHO1TuCm4Sq9NpZ3SrUQh\ndOPTNse2to2FW8ygyrTd/CLnbZ8C79XM7FP67zvP6JsgdPg7SqV/wdDEYpIk\nbmY6Rzp3cMJE2fi83hv3yTUpxIfwnYfjWyzFim9O/71HuwIobVDKQ9FJ2d79\nZzD7IaLflzOz9YR26nUSFsOGWbITQg1qwmgOsXTq8qrvWiRHx9hU7+3Kc8kC\n5lqq\r\n=gCtQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ce0b2fb934afdeec9c1bc294fe949734dbab12a9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.2_1579650961524_0.6429949630167127","host":"s3://npm-registry-packages"}},"1.1.3-unstable.3":{"name":"aws-amplify-vue","version":"1.1.3-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"aab15a97b37876fb849d652c24fa9f64e967fc1a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.3.tgz","fileCount":47,"integrity":"sha512-qnrKU9pNsNCI6EKH+Gtf+ewE0Fa5A/LYWxfadnFNgcbdwVb1VMpT6T/B62mu9pm0qE9D5VGkhjb4JYNcLxHXZQ==","signatures":[{"sig":"MEUCIQCjhkptdEfDWdaS5aOdzSq8MC5gYPSd/MARftGVFWX6qwIgTx7rMWD/8VYEMgBFc+fUkJjrDIfvvt6FDFiXaapVtps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKJUPCRA9TVsSAnZWagAAPOoP/A+lsztnldFIJ2wKqBEl\nNKRqEJFWvyuBqgIbF+nQQOPPt+WtIzRfyqK5qgTJcjakuWNCRt6IZCvv2HDg\nvJ80ltVgZB+ryZy2+oJo/LNFDanSltLij2bOaTJJlpYLR4HFwqkoum5oAnQd\nf3fNXl0rjBJe1qxHXI+b3R+lZrAZlNpxgbL6HAY1WzLi4igG2SOU6SH+aj2b\nROWJe0cEbzYEUYekDlNCuAbUjWgkr8bt0nfABxI/RyQAIgW8KW6tmB0F9tMx\nU+PorgLOrkPSIug/ljTfRXA+Dd+DP4t4Ug8duaVKAXhpR/C3rZbiPPjAjQcE\ncxM3kOl3UjIpxLjt1wVRBC+epO4B0jvc9ldlKrUDjzUmgpUJNs6NfThA4xv/\nHo/BuYShHpye5NlKyzz/hYyeM8vSDnXnA6cDn4bq27/qWqhH02pVGIKyxe2/\nTRsYJZrFYFUsIBeSm1ZwlQdFdUvSwviiuOvgnw8JkonVqt63VljLWYCUdk8H\nh3lgmFYZK9xhouawiXH+sezC31I5JEionUGjATMTLUe0kO//hr6yr7XoRfCz\n9mla1zoZE/3JJRxdM/KPOYKPdLPxPYOLAKMssZ/o/yueDCcjvK5w8PgJXWIN\nUhGj1cTj6SqSTuGsfTMU4tNV86uLsC2AiwMB7MelkfIWzEuB82lrTWx9uuhp\nrBgi\r\n=CLJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4a4340a8f9b41d21d4fc8f2b56b2f95a236a2475","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.3_1579717903215_0.7054441403410758","host":"s3://npm-registry-packages"}},"1.1.3-unstable.4":{"name":"aws-amplify-vue","version":"1.1.3-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5cb1bb8806a8489840c16dbdb1cd9a4a980db2b9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.4.tgz","fileCount":47,"integrity":"sha512-RnB3DzxR5bFpzK0BotcmX/BmD53sU/ZbAolZnIfxLUmsuEUvSXyEuUvIM+nGKTlv7Jyn6KmZTTc6HywZRk5vUQ==","signatures":[{"sig":"MEYCIQCn3PeunNrslYdr4vMhV+KJafBlIw3nGT3QS9dQKRZz2gIhAOMln6MNW9uwNI7hsWi4mpCUxUXczPKidv14ymfvwc8+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKJ9cCRA9TVsSAnZWagAAWGAP/Ay0t+M6L6aRtZtBHeDZ\nwXT3jEz4XVe4/uCq55VtrLUeVyvzE3ZFUdGXcs+BHVIhFPv5n8fufk7AtH72\n4lQ7v0yKZe3bbWh9oWI3drTGb0hVaZP7GkzXl3jJcAWMWLHFqWLajIPwF2Jw\nUT8MoTl+uVsDpE+dtBsAJ8GmDr7MJQsvYc5VrZCxNdmC82xT/DFuLdKygjNT\nYE0Aw1L1UyTxYcU1OKU4upfaLFmcW4fEVSRO8KgiON/2GNGuzsXjl3Re5EKj\nEH8Zye0Q0VIWDfHm7e9E2E0J7NUw5P1srhqgRokQ6boAdVU/t8wqOQRgcI26\nVE9RWutlTnlf9ZlvdabaVs7AocniE0ZbJD+Ep5FFqj2jhEW6qOXhV+ORi3Xe\noZVjibYtC1SwODrl4C/zUXovepISzVDrgU2RKmKwVZ4FZ5qOI2Eu1kwMEo9U\nDnn9QUyxAR5mooAlRgLjgAbKwPdWSPnTAWEUIoh6mCNz2lLRAqTpwm12DlP7\nS/T8fuJ+nslcGn8ZExJNESNsM4pxLRUCKVITv2bHT6q6Fv4AxM0RBNmy2vQI\nPpQ07C77mhZ8pt5RFa56pyyzVk702d+4TA4W8+vlti8+1Bj21U4/xAtHISbr\nOCn0AkHnHNW1zDn9GchnOD+ZOeMYipP/zVfpdlylWTjEvuSDljJMKGsrGKgG\nWwrE\r\n=GXys\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"030b6c310367b136e40bbd8ff6e6d6916b2706b3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.4_1579720539776_0.04719761649166476","host":"s3://npm-registry-packages"}},"1.1.3-unstable.5":{"name":"aws-amplify-vue","version":"1.1.3-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b71ad0fde127438ee619d8f04b67426dce5d1688","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.5.tgz","fileCount":47,"integrity":"sha512-t4JlD2AGc1ncvRmVO7EiEMMQxux4Tmb5s2kJ3ScKVZ1j50YkWq0KPSc7fhi+J7s8d8I3RwEm3GaFx8poKq9AGg==","signatures":[{"sig":"MEQCIHUzssSBIf5KMkjFjTcHshFOB5JMNTP6RqBDQ8Vs6vl/AiAZm7kl1LpnSHOeCIKEtdKuvmS8rZzUxYA60dID9mil3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKKWRCRA9TVsSAnZWagAAT88P/3WdFXrSyM5FdfX2DXDr\nIzwnmI/BglyQs6FOrIV0nQZq66YFCvervqRIkQa5SDqYfzApPzqVupVBv863\njx9mYl3COqK4Q37Q6v6MSi6t8s36TyDL9j1qDNhlk/CM1oJJNMivU8tGc/iM\nslzAnqodNZS5Lz2Z3eh+lQm2YH8BdHaeh4zHFOE67sTFMcU9dRTEtoyfb5I7\n00CoOUrAJCLzuTI7OeVFqylACg8xBYP/SjeS9CjNxBQd2Vv4dahtf5RRpRTj\npQO12APSC9kL3HvF1OZMX3cETcTJq3VWQLEseC+MTcPsWYR8iZVXK9Oj78aK\n2zvqYrUnQkb2TwHaKXzRiV6+FylTI9YnRdu0Q9ZITMDXIrbMbtoiJTAiFRh4\n0ZhU/ISCGwaMk7my8B+K0wosbcuWUGL7Uzh2beEJnPOr7qQXi6C+Sy5tM40E\n3jxvUlQTBXI6MgaR3U5BHFCsVhxraBYlw84VKLl2Syz/fEQk8L1bHbYtKfFa\nwdH80rNb2K/dww1l3xZVZqAkfZQoRAng0vBViGfjQ6r1jR8FsDBvb/cLq+cC\nPaSBxKjac68udXvL4HZkSD2raQJ0IVz9DotPyx+5Rqbqfsj4BJuo/M0zAPh4\ngDtN4UtGWLBWvc21QCdND/lqJm422I6dbWOw4n0XAnA7YcqGFGE4q9i7+8bO\nZ13p\r\n=qSLs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e8e5290165492c83bdbcbcc3ba87f00aed31678b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.5_1579722129475_0.9647171399318175","host":"s3://npm-registry-packages"}},"1.1.3-unstable.6":{"name":"aws-amplify-vue","version":"1.1.3-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5dd9016a5640897243eb457f75f0e82b0d96f833","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.6.tgz","fileCount":47,"integrity":"sha512-Jx+1hi2qVmaRbIApYACPTU2Zq5XDtkHTe8+EXOL8O2JosH1O9H3iqyJE2ULKdlUHpiaV7ape5xHx6wR/oaJBag==","signatures":[{"sig":"MEQCIGuJSIuODoTf+0DdlyG9einf5bMIEbU5oiMzTxEhV848AiAd2X5iFoVuFm1DkrF49T2UhnbAzJoam986fWhVEET0mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLiLCRA9TVsSAnZWagAAHUkQAIK+VugsM1bnZlIb0T7t\nxCZB7IzjTslBB2fnna/kkTmn6AF9tDV3I2FvYPmxvyCt0R24oJ0yGZ7jbGhx\nxjYDfq9UwTYryksD6dBuDyZ1DBviWziwqh/xnLYjKJNdHGGbOIUIElfwMozN\nNVFmttsGOwqszVL8HTNpvn6A/DLWdZRfsfrssn3PHLdpqKnPRFrhlpavuqit\nfGcpRp6dyWqn3K24rBAwTtM8sKVylDhTKILvlw6KvzBcKWRQc7DrIdjCxs30\nbt6CNn9WFzEfJmvSZLhmoKAuNZb5O59lumP87Dbaffz4hwOwGLMCFDPPELo7\nKRsrCRmIWYcE+iv3s1aJwxYs+PXcFalv/hfCgdyeXo7sOpLBGovbPUa8AviH\nVk29q3QuHeKZWmiRk4H4jArcJNknFJavUL18AeT+ns94QdnBGp2rwvxEpdpQ\nrXNfUgxxd/2z4Zs0C+XlXuZRhGOzF5arSwSuqfplogwN4W5ze+exzwdkVjvF\naEx05JZmaSBT039zwubAJRUEQdxHEDa1boz87lz2qPfI4IMyQIm7yKuXhTg6\n0Q3HuBsrCusDJ/W5wSFQ3GrtZILFMdwRuzW9c4MIQ4yQV1mmaYvqGuxlCGJY\nwxyP7fLTk8yahJLrmoqhceGoDVCmV5roropFCZSVi7JgTU/FHjTwlNoimoqE\nabw0\r\n=yw/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"915473b6daded2820bccab10d426cefd207121d0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.6_1579726987256_0.2403087916917206","host":"s3://npm-registry-packages"}},"1.1.3-unstable.7":{"name":"aws-amplify-vue","version":"1.1.3-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1032696385b8f690cb9ab7cb77f42d12156f73c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.7.tgz","fileCount":47,"integrity":"sha512-Mk31hv1Ai11jAqfikiflD1Pu4E1lQQVLaGS+CBuH3ZsRvNATHmfgeIusWNo5mk22ue9X3aQYWSJdaQaC47cwFw==","signatures":[{"sig":"MEUCIQCyf9mLK4kt4Vhl1f60/FgZtQhiquH9hcQ0ISZgdAsWhgIgIC4noIijDyEfl1tnKkRtYcGUNQsAqYE45+6gHg3E4mQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKMquCRA9TVsSAnZWagAAqPMP+wQqXh6HRXZoL403wxVS\n2oerzZ3kaSltLr9tblFnkB3sNIPxiDlA7UNVJVfcF62qE7CJTLzui4JdbneX\n2Y/F/9PAfjfgZob/+KpjXoWAdB0HTb6WaQiyYHeyrElk0jMXY3DJ4vXtFMeP\nyR0Zz8lvPzVChyIc8zz/yCEdlH5PBBk2zcTkmZl3cCpEC58/7+xdX6jlsH2C\n0Y8XaFZAvfGPOXZ39lyt6QLkB9wYuFJwMmcv9y2Qbxsi7jm0PCX9xciFfK+S\nOOhsvGMrXtE30bdPehMLQUXce0065naF3jX5dmLu3J/LXr9AmvtEdEg+rs+/\n+IeVlTXgJ8pyMzjQeOFE2PNE53BSfdDMbly5lh4fzc9Pcu/Ia+PGIkIDZwfr\nkW+YeTz9cAT4/TV7p/9XHmM6jCKxxXOFMldB9laGh1NAF1jZNJCfVPDiLaGR\nWGIVElmi8EEM0CVXQaKUGawZVsvk6wWqnJ/t635VT/Zuluq1OCGcG3TB5DQL\nWHXu2EFEYAVBLuxUfkQgN4+T+I/fkzG48g4Tnmk0Pu2pMsRpvJ9arCfLXoAt\ntEDIJ6of9enk9u1Pil6X29w2jYyrVp1ZDT6bXBHYxUA9hzhanc1QM6A5UXvX\nqeSOBI98Z5JJ8N5615aA6/q+PLkmwQFdhftbY3nvRBaitEeltIRzti0ruuws\no8tq\r\n=dksK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d2289dbc58853027ba84b18e5f44d89a3fa9a899","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.7_1579731630090_0.6586815060560456","host":"s3://npm-registry-packages"}},"1.1.3-unstable.8":{"name":"aws-amplify-vue","version":"1.1.3-unstable.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"396e8dc43a8466d58f5598bdb21ce595960a43a1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.8.tgz","fileCount":47,"integrity":"sha512-eVv2Mh4Pj4XApLIvH/s+PAPe04qS5FBKyNwyThF/qqdXpZvQFxQX7iXbuml5Bs+dIfhp+O9J7HGw4ZFD4P91rQ==","signatures":[{"sig":"MEUCIQC82I9sMQ3NyWRnjyPzYZkf4hp5L8w3jT34O+02CdGtPwIgZ/Wd/kUtsiX/qfeWd1PftsV0uFHgsi3RAFznTmf0pTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKM7nCRA9TVsSAnZWagAARH4P/AmjsaOxVQcVG29cfwE0\nKBgeUB8PB+Sca6wgLLukgIQcVeytzydIA34Ot9o/6m4kpwLoC36eorZpU57+\nKEtJZhpCnOWXVv7oHH52Rz6A0tygdBKs3l7z1paW3FwIrA3zNHRIvmx28PKd\nHutWiT5g9lZrXT9pmB52+Hx/lQCpBrlGhSOSLAgmHiIGZ+vvEt98pmfXI3+l\n3QCVKk2b5w8ZTqzmojU6XttSPrZs14BP77wu02Y+1NVs1UkCOxe3QgvAb8ih\ngerwYOl7S9k5zjAUSjPYz/ZY8tVkMLOD8S9yw9yah+uvj7cj9Jcy8bI4HPR9\n8El4LExBhZYegQlM3IkJulBhmsvl/nqzyK0MX8V4fNqVy0DDv81WVZV0PlRC\n3s4Pgc+lSBQtnmufi4/O8sjf0VC8G882DmqMS+RKrjSoSzY9hk/UKPBBSj1V\n50mdcOb+w6Ddv0dza0IJZlMC3feZM9t6fN0Tl34sUO5rcjityKIXXuFs3N5U\njgZnbsUwdTGQ+P4TIOt5UfeHgOC0mCWn/eQiogBk6EwPjRe+zmfYLd4NosPy\nymla6agUCKH6WR+OvNQbFIrhuG+rghak+8pW775DwmoRbO8vGG6r5kIX6V7y\nfRDXII3o4GraPG2cVs+puZWo0Piaq9XgdDnlCxaqict6l9pYtcRaYocHorwN\n949a\r\n=M/lP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3cc6ba4999686dcacff7f61964737d6590d379e6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.8_1579732711162_0.8956928681836942","host":"s3://npm-registry-packages"}},"1.1.3-unstable.9":{"name":"aws-amplify-vue","version":"1.1.3-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5f20fdcf613753fedd9532ed3327e6304ad502f0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.9.tgz","fileCount":47,"integrity":"sha512-n1Gxdn0vHrqaJAYoliUu7ZzzYFBB08MvbabMYCT8KI6MpyFR8vfiwOZFCAZUcUafsdmc8whdB1NpzCiF0CnnTA==","signatures":[{"sig":"MEQCIC2Tro+vhLrzZ6iW8oXKESjDqVQ12HDuRWeeUNL6XLw9AiB/JJizwanM5Vtr0iGSlQ8vojm5o+f/WxiQsYYRgdIncg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNU2CRA9TVsSAnZWagAAPvsP/jRyfkwlHD/75IxaDywp\n0Q94F6RMo39hgkEXFscegn7F/JbP85o93TjlZe3tUXXBP0c94xuZVAyR94e6\n9lpgX5K5U/Eiyp3miXIDQpZt5nm2x4qiYiYOPyLhIUgSr5/hOY10IcGliF/E\ngAOoCFchl9FwHFQ1qaCgrFgdz8dg+CO03A3VkGPPiw9SU1+IWtrJeyfuBDfw\nHfwBhXCvfWsfPe1ePoBrZKY6tuhyT0e1La4DQCDFXcK9OVhyXJqpZo+jNONP\nTgd5RN8u5QTCOKMZInAou9VMSGNza9LVLEi+EMyL6EIL3Ov6fy2mvxyl/VdV\nenSL8y8fSQlL4bSb8WY/ZHwh79AvigQ8dbhW534xlgdbDsZH9Jd04eT2V5/k\n50BjFAe1EtqYuyoiLIPddXqiMOQgP5EdxB3KRNA/NmB0Hac3rskAGbQBDQo5\nMMBsPyB8PBDmn5PBzCZyjnuPpdFdRCeWRlySvwS4y7Y8FpD3NarnklTvxZ0j\neokqVtk4SuPuf7wQjIb0vXr+2Bm8DTbnFz7+317q0RELFBSlZTFE8ruUeycG\nCuSQvu/gPsKQLGyfXm5OWBLk1eM3aivc5muC+Bn67iyUHMWnSLk0dBKSyu4f\nJ1qASc/SpRzpa50bLPjTJie74iDGr1QcD0sLRgavFlEAE4gZSOl5H8fxAuh5\nyJcN\r\n=Rv7f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8592541daa49247ee84e4a7b9c3559c5f557ed2d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.9_1579734325917_0.15949375330388582","host":"s3://npm-registry-packages"}},"1.1.3-unstable.10":{"name":"aws-amplify-vue","version":"1.1.3-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"334826c9a59165311b8adc748ad31da1b55c5431","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.10.tgz","fileCount":47,"integrity":"sha512-ciFa8jkME8u0fF1EjJm75b7+B9yJ1O5VmkT82iof88VC7UvWXxXEUTrVTHfJ58SLlHIaKI+5H68A4kkAqNMd5Q==","signatures":[{"sig":"MEQCIAgkvgJXO2hYD/aKQU5InUQpa/2mpVMExxR3QORZWIKBAiA0iXvwLY7pA4v42i7sKTS+Q+IexgvCE1yjuGjc8gkfxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKN5lCRA9TVsSAnZWagAAP+MP/0PhNenl55a8xH1+9iRl\nsL8xoBanBbKnYKXOraoPuS+9iZ+hLh9CWCPW0GLJyoy9ZijxExeYjxOSGqTG\njVZsP3PbmJNIpUxcTITUJfNTIlchxt5F45ZsH0NfBLFzaJzcVYqZ/4GR1vZQ\nIJ3SEACRWLt9FC/xwEMEtBiz5X2C+z5ZbXH7MN0KymahyxmxYasX1I55HBp+\nav1/fSVlI13VxIg2JHNPuCRoEZ2FAI0Xd+KKe9NIRQnFpIXEDaTuUkP023XJ\n9gmWtVdZGSC3vGzK6Mi4uM2rxLm0WN1fIQUvw17FDBYKO7VwQwB4XeGbCCNb\nkFa3F2boF8k7ZblRVoVXlmQnMuEgMNwHRNJUsMzS5KF15xrSxXbKCMbSF+FL\na1tG/zX/5qMnrV9/DgpjqsfxGPEyWpccki1deQZ3LaiwljglOq4960b0sziW\nDmKiZsRDJHPWSAziatEjizkQb0ocbhN+VRpZx0lNeTQ6bgD1+bdvrzD32JDG\nLSA8JujO7Gpi9zABrBqYIekRDqdm3gyWO6tErHboR+PFRHAYN60HKuJE07KB\nq1jJqg/0BfqTlVT3LNNhjzQA8sB2Igc65xBMSeI5S424jUzVj6vwPP0FZ+dY\nlj7qaEzOAIzb47Q2npfMuGO0dkdr6B3qAkPtH2XMOjOnhMK6H6qRYRcl5qcC\nFQ7W\r\n=9it9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9b5b09048681ac5b3b1529bf72f3bfe039ef4276","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.10_1579736676656_0.1357960457791887","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.8":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"91e114546c483dc62308838e2cc2e0d778d09123","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.8.tgz","fileCount":47,"integrity":"sha512-ARbptmAo+QdMI+BJPXlDJdR9B6zZLih8l2s0yKe1gPU1lxyAzCVb1Y2HmdE5GQMIBGdgLls6H76KeNhmsjMclA==","signatures":[{"sig":"MEUCIHQ/eGbexkyuLr5zZDEZFYyhk4FDamjZG7m/Tslq/EkCAiEAyqd5+BcEBBDsckHI7rvJL8UKSu1iU8MuQb6+hlNkiZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2blCRA9TVsSAnZWagAAr/8P/iSpd8QuRW43ptN3y/vC\n61TfV/FAGocuo7QCTgLkF8KI5uqSQ496N1hJs/wJTPFdcEPL6ooI/o6jG9S8\nurl01dYNqOSCbb14YQ5CNJVTxjJAFniIVPajrCHG2IkdRPnfngFvKhgfLmMS\neBBQ253TUp5Sa7enCWpSfdBjzwDacXIagn2jSjdkv+9FcCXuX5/nDp2TBKGG\n1Q4ZP9rQvOVpxgKZibi7ufC+3lXyn2jYptexRxaI+g+woyTTyrB9+zxjEFCL\nsjuhHDO02fZDSBI+x20fyosvFDl1FK/d5PEPPHvdxEMLWwCQ3PVUte2Qs2ZA\nVTnfnQOuU5qqT61YEsxgflKWdERC8cQeDYiQFxJAsabm3a2f7IIEJA+Vkjnd\nZCrnd28e2naMqh+9anA/SNZ3YaffxAfjkRxsUgkBDh7TkkGo+bm8M3vlST20\n88TS+I57VF4EghhmNsDSC6DUTC5YH/IlO4G+vXomcF31PfavudDMYRSaomrz\nmG7zHLnWqJqY4BnpjxUEAFuPzOuKESHb+sY/ERaLoswoQyjgaf8yUHLADZMi\nqv4fwP5PLRXiv/gBRlABhZBuzZHK3HMn4+21WfRM1XlnlC+HcJVAACy4Q+yE\nRe01sAm9Jo0T+7paUsDmfNcX9PxeMHB4APJXONXiL+FjVDWwg3hu8Eq26aGX\nYvdm\r\n=to2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e0ec550dc500c76518426a70f2a79db74e35daf7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.8_1579902692612_0.0863452086158858","host":"s3://npm-registry-packages"}},"1.1.3-unstable.11":{"name":"aws-amplify-vue","version":"1.1.3-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9406fd38832198ce8ed2ce904f95334934290622","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.11.tgz","fileCount":47,"integrity":"sha512-BWToYt0+26iH9zOViChnipBeTtdZJy3o7cR23TCPGKxSJN823ckfNrs5L2Y2IU2LzQ4bVc+QFKR9QxHygwtf6Q==","signatures":[{"sig":"MEQCIF/AP/X+HEo5ynOEmseE3KNqTFSsnGIbM7T50XEEtwR2AiAIUFzymp+0IjgCiKpYAlNKYXTR14Zv2e1ljVXV6HMjSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLzljCRA9TVsSAnZWagAAnW4P/1Tx0M0tFqgf/TfXMkph\nGoLZd2wY8hL2P9GQh3yxfkWsfJfcjAdNNr2EgRJujH5IgPFTAy8nNXK/vKNN\nUjM6FNiuvhsE9I2Nwx/8j7LwzmReVpgPrPFxkMsaCt1kOQc8p50Rh7WpwMem\nLInh3beQLHc1riLFvu4PPab4aXdQ77DU6K+lYVVZ3b0jZ8XOm2Vg3atitnGf\nRWX7dLeU7M6hMshRjBgS+CJj0y7wR4jOduiidVVqVAkjTFWA4p4IuBrHE8hL\n7WLwJKf6fdn8nw24ztbY+PyXq+YC0YU6JHRCoFTO9GsCgqBGoXBtyA0N8mBp\n6W3Yc2Di9Z+YYB1rMv36pFZzGsEHQUwt//cK3GurO+FVfrOx6kpMassfZ6vy\nyDvEEIAQs+xsV6bhz4gc9pp1EF/nC8Xy8eRMQ8grUS9uaoW72RNdd2N73wB+\neEifR1H9NQDYi51LBILyRa7U4MUlF4F1PvDfciEcQdkbd5CpJtFrPZkojN8I\n9+K+qBMRjBjg5N7oi2hNc9eCM9RI3sYJ7ZfZdLdmf3I5q8P5iCHEXvj31opX\nHH4jmDwm36lxRArqtYCakyM+GcZUlVSvmTWy0jIgwLq/nHyg1wmuQbsimY9k\n7K66gsLDiExAuMVdnT4eJ7g09fY8i5ZPEuY2sS4Ix4VxJOTWQMb4D4e4CFjU\nB0mr\r\n=8hhy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"34cdc6c9841b48c077eff42b21fa2b3fcc9a80be","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.11_1580153187466_0.8078206095399796","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.9":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1b448ea24abdcfb875c3668c6f34fd127306aa4e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.9.tgz","fileCount":47,"integrity":"sha512-bYKwnbhoflrkrMoGYx0fEozwaLKn9VQyzrX/GMy+5tfOAiQazfinOTbVJU1NHFAMoa06nhmApWtZ5swq3UWsfQ==","signatures":[{"sig":"MEYCIQDneyXJyutGcIWOylXgOjArCHDnZvo4K57PgPi4JEFoWQIhAKUkAUhChmNkgyIydp4G116GjTrTkkwZ2ijARNbeDpmj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMLC/CRA9TVsSAnZWagAAc1UP/38gqcyJhMmNCu/Na1x+\nPu2i4hZogRrxjIjJASErrH5HNaHOrFPwjmVv4yXkuNwqfFo9tEal7Oi/Rd2T\nY8Pp1uYBNYxa3L5Ss6EqOk4t/9iEUtkRziM2ramB6QR9X2XHPLIYSBbz6hFC\nqTqKNMwIAUGnKvZIHYtX1b0U1EDH/7wqCowf2MFGIa1Oe5xLzDYwP+RS9Jcx\nttNEM6rb4TBikg2LECLLulTlOaTIAfL9RQ0Hp/Vu1o9D9I4YdLsvu5ev2IxW\nVp3zsagjUAyuaAyXacXGTm7JVDX/mAvxfeWMbabfzNwrrUo9pZxgiuXmTXtP\nEisDyPM1+CKB6faDj08S/GR1rqeNjPtZw8sDFE1JmFz+JHeUCXDRKpPpT/38\n4zfLutgPPvFbxnkEMPXnEwaXLj3nZod9wuq26l3G+Ss6o2i3ySMHy+xU552p\ntb3S/zmFKLe5axZ2OXQ1rNhMh+IHzHqPEQqe2+4K4a6yktNogKGt+ae8FQBs\ntCvwdkX3Eh86wqRjH/4rUlpsb8BqacnZtT0ceMkvX6LfRRKWOWLalr4d3yPQ\n4jL/GHrdad6IZUSb6HfgPQQPtzG6SymNPmdv/2v1hOT2m1jfKQK60U9qtYia\n0uSSTW5pZGr1aCrHJtic2zogxBnliOB6JXDfW1Ac0OBgU6lWXOVYOi0w8mfb\npwEu\r\n=qw00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6d1019fa242e6574b8dca10de0ae7ed96bbcfa9f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.9_1580249279080_0.557305707084337","host":"s3://npm-registry-packages"}},"1.1.3-unstable.12":{"name":"aws-amplify-vue","version":"1.1.3-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.12","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3c101fe417313b6a61bca437259662d121077aa1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.12.tgz","fileCount":47,"integrity":"sha512-fNcx5zRI2XakBCM6EjIBUSA7gyGwPT29choSKj8ZWZbpcaTFcWo/21Q30ozSBLeBU5ncRe4SIfguCqJtEqwo9A==","signatures":[{"sig":"MEQCICMP+wQaj4N83Y8agBFxOpc1jxV0u0wmHEsxnWFR4DUjAiAOlq6mIr492ponKqO/sZOSbNfU2xbYZqEZZbS/4gnd/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMdUtCRA9TVsSAnZWagAAXDkP/2TgF+GKGdwwsBPg8+Ra\nQOyM07FuzPWo/xGJjqobuFsNjKNZslLAEg6o3Pb4qXvm4EGLMuxke2UvwNWA\nWvm+Ef0mKOsWwfCbPlr5h8JLReNlhytTswgdIQqdXhRVaKV23M3g6TFCmK7z\nqXFrZh+HQ4EkTDHaIpRYtSVIPl5qutw0xRdAF0r/LbI517zGvWNUBujXroc0\n6PG1kwOp2NFma2QJ488Y68XbLdUb5Iru6/ze3U0S5TCSMxemhV9W4OuZCtJI\noLg5Iavt864Cju7LHivdba27fo8yUAXZ+prQvTUeA3iOD6jQLfWkDL/ki6AX\n3n/PmIsyRne2Px/syyG6qAg5FyK1/Bgogmr46gzTyC0U6G+wvqa2SISSwlNA\nw8ocLWDSOGBxNB9bOPAX4f0JEXxlobRRU4TQoq7AB2JQDoNKih+q9OwW8ung\n7o3gL4FZC9O0HVO9o60wNIxZN8KD7bGOdS72qUYZ88KmQoQLk+VKcCQFitXU\nR9xSxz2pblFXoegtPvpZVtCASIGh755xscwOslPx+uVtSf/eBQO5j99PScNl\nok/NHxC7WoPDmKTrIciuBMU3c2v2XKX37XnNN4jmuPvq76FJi9/jHg1uB0g6\nZPJBP3gpq/Hig4MQ/AbjFIjtGkRC4XuT92nn85ip7lAsBXTi0miLjcf1aQst\nGRQg\r\n=rQK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c4c990ea62a77625add92e8fe94ba170b0dd2af1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.12_1580324140944_0.028792877929000094","host":"s3://npm-registry-packages"}},"1.1.3-unstable.13":{"name":"aws-amplify-vue","version":"1.1.3-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.13","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cde31c0efaac32c5f03156d36a5d4c0569c29bb2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.13.tgz","fileCount":47,"integrity":"sha512-uB4SLyKlcnGudYVCOonOZNpdIP5JiTk4ixRVonB5sPnqk7LKvXIJr9lS7FFhh5WLiErw+and/P2IU2XFU7OSlw==","signatures":[{"sig":"MEYCIQCjK5fRZahp8C1RM+jv6qnOwArDRhy7XIxxHNHKuii8PwIhAPA4vXnYbhU+yhZRpfb8eCsHijr0PQauOJhH3N0rFJKr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMyONCRA9TVsSAnZWagAAXBgP/1I2z891NKCFSOUmKLv0\ngUx3mdpqVSJ1pdEcAr+XgDTKcu/pvGYqc0I9QZOFys+rdDa1eqAFNs7ZEFzg\n7bwceTUENXvPiy9Kg50B4MsUY7sJ5nnEsD79jrtH7cxDgfpUhXTswVhercbd\nmxbTWDGYQ7/NWPkJjnpJjbZPVF5b8C9FpQ32h5UEI2/AeaCsTfa2PzkTOiRD\nfss3jsVe/bR58n13cPlSsFQ7Euk8t5eM1GROGtZSzeUcWnJEXoNmmLHdkoCf\nldBo8uvlEFCwYCzTJYiRNGSKveAtgzSwDWdw8OhTjkqL5l+M20FAn9gep5h+\naXgMzGuGgnpofBWqCINCIfq7RYi9njHmd44N0zzKyM++mkDg00V7Laxg3io9\njhS3ObtVhRt2siIWTOMdaqyTPKmJfWzN2FRXDs5ZBCdh6CmnJ2O+/K9FPRjC\nwGpVWeXWTcMIA/VZq18nTZSWGExyFFGIFRaVTMhQNUDfMJRCBYgE3GSh6e8D\n0/YJ1I1U6/7M4vTluPbxLM4scyCgaqGbA8Nk3Rch8FxMvpRh41p1q5heHpPc\nOUV2fB84I0UPWaM1vnYcain7x/erhemCmSpMfU2t3VnohRsuaPhRD6ejqj4t\neYLnj2yy0Xnvw1GVn2FsD1dSj40upswoyFaAEz1clDngzAoTC895usdbr9IO\nLAku\r\n=jY8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6cc72647190fa605a7581535f2f4c462919dee26","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.13_1580409740475_0.8615769792362886","host":"s3://npm-registry-packages"}},"1.1.3-unstable.15":{"name":"aws-amplify-vue","version":"1.1.3-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a7c62265754849e6e6072191412fef44d82f4006","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.15.tgz","fileCount":47,"integrity":"sha512-MUdpNBCeJCrPodn94E2SF2M3rPAHmoMQpxkCZPp2i+c9xSekHBKifIbFkUiTJDBa+L0HiIKn9pYx3u2o44Wh2g==","signatures":[{"sig":"MEUCIHYQMXKpXSbCIKgsSI8RWCM7Bln26y6YTt/zP5TkKs4XAiEA/HX5lX1cPWA/UhBAOBqpcD5eJ8NgWAjiOIFvzRQeyL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0R1CRA9TVsSAnZWagAA4gAP/0LzT/VSgei16dHTJ+2M\nOJZhuhhWTxzExG/cPD6pyz1OA+yRRN0yjlEvoi08sHOdDEBPpOsSxT3ht+IR\nzOTAVpgXaI7HTuAd9WfUZ+qHx12byFhOdX1sFkuHIerPMKagU1tnCLVUlz6m\njhS0lnoKNpG6IvNPe76OzOCIXwNHiWqwOb0WhbNURfBhVtYXV6H0zKSW9Osz\nb7/tPamSkViRqjgakY08gi4hO6e3DWaPdNAlwCpfxlkv01KfC3vIPbsE7wwt\nDM3HmByxdILT24XvU4mEhRSTIh0eFw2Iwf8fsafaUL0KzqE1jU34iB7Xu36P\nLWNUSyXkMaM00rBskhxyS95CxYC9x43JHXHWAItyOqt4xAyAitj+mVdV4RMH\ns2r808iY7XwTKx7q0XTUiuJ+c53GlrXsFdio8usw7PHicU/RGOrwE6Ojb2O0\nNdcwZIdyQIvHRjDImxT09stUl5MS/HlX7CMYKLTAYsUTbZqgYgXNA/hdhdL+\nQpYgjktL4qY+u3cxJMoO/WF+oRALm5D3tMHjonvnJSgBD0TjZGHzjnVkj8j7\nav5n7Trn4tnYLJ79qUlIk9tXtYsdaVUEOgqEC896azbiEjxK72FJIpUAnsZ/\nA0bgg3Wax5+l+5elhwq+Qk85t2R84fHiRKYFie+E7veoJmVj8wY3chK3VeOB\nGXk9\r\n=OPkP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"16b669541e55452091db5944fd8c73503312a319","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.15_1580418164593_0.20595458132658861","host":"s3://npm-registry-packages"}},"1.1.3-unstable.16":{"name":"aws-amplify-vue","version":"1.1.3-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.16","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"42b2ac667139a19f1d74453038e1405e58935391","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.16.tgz","fileCount":47,"integrity":"sha512-XbU9Lx4GLjjw7DKmYIBkWaIuBL2lVfk1RWf1BTGaIRaeL8A5dh4rjGYfXnDDveP+t8T9hC0XtvHdviE6Ez41bA==","signatures":[{"sig":"MEYCIQCVYwlY/aivGdb8u5pkMA6cANtezh92Upa6tVGOPInAmQIhALQskA0z3PbCqJrDZp/7XLjtSeVVmimIU2MLXbGlIppe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNGyMCRA9TVsSAnZWagAAFLYQAJ5QA3gknGbQdM1mpDJV\ngNdwdJt7l8MSiF69RgEtA2PVTueN4P0Hlv74JWHFlIB7cfss9sUfvLgh2v0Y\nkpEjOc9qNX3WHzbrJRYwBNv6CTLKdYiQKyu4U1cQZlOVW7SIopQ2b1DlYLzC\nxQxtptqzbNjpeQGgkTssf3N29Gz8dhVLBJgpEGUWlp9OMcWQCwxwEcNeFVqC\n/7vOPVLODThk9k1ejuyOV96Y762bIdMFIfzXIss4jHzuyqQjG3uO9NtBwWr2\nQq+GUHbJ0+7vnsLpunXSeCg7lr+z22uhgaf8XL8jYJY5NA80nKMIdyEoD2hz\niYNnx/doOpXxZwTuwq/pzbS80DE5XVaOhl3FxZIeltRqvmMkMV6Gn60vlPWG\n61dhGDKZBu5/AMj0Fe22QD6zwDfX9kIcpnRbDWPaygRXLIlbYnhdlw9sbIQL\nvku5prkllO2W8N1exi2PVxsT4KtwtKGDGqJaIfcueXodzr5q/61TZ69syusy\nlUkKCkXOLiMN+8WvS3NPsRFueRQAWSBvTwfdMNHFvDufl7cX0G3lq/WNR5Wo\nbsu8y1Hn7uMYlTc8YNSBib8JbOLTDvN5t7/3BFVUab3wUvQC8qlYUA0RoanZ\nvNoHIB75JE7tWOGel0GJ+96TvBLOY77sekjP5i+iHj6lJhNEFuR6dR4Is3mk\nJ1kQ\r\n=4Gu1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cf8738ac5e7961a163ce158a7383bc27f693475f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.16_1580493963709_0.643420088185378","host":"s3://npm-registry-packages"}},"1.1.3-unstable.17":{"name":"aws-amplify-vue","version":"1.1.3-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ac2597a16aad23879744f3bccbd1cdf640e5467e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.17.tgz","fileCount":47,"integrity":"sha512-q3hvLY95O6/mUlkxJfxRYiDaRlXk7ZXQqSUJH7roP21bdbwJT0+qNZQG377ScNUXl/5ACEw6fN8l6SsfwVcbqg==","signatures":[{"sig":"MEYCIQCYM7PWhKN3NZW+luOiU+l7yRjrftUU58lCgTvKNXe/bQIhAMcKtzq2ITkBS7Q2xVhaqlbm61NN+jAPOVmfQTKULeU1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOKI7CRA9TVsSAnZWagAAlTIP/RGglgYVtQGmeHucIaoB\niNwn8ETVMkuyKoEdsAsYUv/3ofdHDunXDV8ZWWHj2iCqiDeqjUlr5Tbp6Gp8\nTHvjkiCs50v4a3B7HSJkOEqpRJ4Bm0r0OxB5JKgRRrI0kDESYmGvWu+2abIF\nRoPuGUoS53IyuNvv/rKBXYct3E/FnfeEHT0Ql0TU+ZC4YWFDY9u0EIVPP6Xj\nHZaAaXQC8ncqDbbGSKcSJ6o16zZXZi5K45o+F6m0PunfCzet5w//93BaoV8w\nMLl0cF4+Teqplt9kWFQJ5wmt/zU+iPLlARHH945Q3erHI3fiCnswi05Z8Vy+\ng3bU3PtoNUwIrX8ownjecdWO5Q9DcPc0nOli37opE1natS1TSs+ABBRY72Ls\nVb1j1wyFceRtfl1sXArGAZJITqiD0otiEbEO/yNc8jo4iiYdB1QCAmJR9tnt\nULVXTcl5FdLw5CSIUSK0qe7d7Mt+G/j+97o9VOZR+LggOXPxAE2yQjkWPF8a\nzlHcS/u4AqzzOe69GshvB7uMlQR5LYrLcZ+BSHs1nx8Zl75NOr6we1i5y7ZI\nhwOIBI6synbihT2DCWkIu6EkmHIhyOiZDPfAWAec7smuQmf618aVhyxeSI+z\noTnO++fMm/6EiaBcR2j/KbsmkURsZPy/h61mQDUDgtQZyHoAMYng+oDOOlFv\nE/Po\r\n=M1vA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a15730cc50692d9d31a0f586c3544b3dcdbea659","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.17_1580769851152_0.6167281382502843","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.10":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f21d26bf183dcab8b354ad790d406bd95a33c907","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.10.tgz","fileCount":47,"integrity":"sha512-hSF4fqYF19FtcomiFNwvIX3+C0FD9R0jT4JQdTlJHrgJz/V4hYO6fqWSBWXNbYyvd54xEMptPoWUdkSthGxNPA==","signatures":[{"sig":"MEQCIGk7pdTx1C7DadmU4EOobJuyt/diIuhkqzjLi3X2SLJ6AiBA9Y/7JLgzBfvs5qwwXsraeUnLkbSIqy4QCSfM86A7+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOL4YCRA9TVsSAnZWagAA9C8P/03v0BVJ5iRQRqB4XRru\neI4uy8FJkmvXvT+ffA1X0S0cJCTntD3/gRGfTAg7Po3rUQA6plj9dEv85/2S\nCoQfdpZFOqhwMWpOVg0H5+1B3fq34lkckkCywDyg/YxMOcMPfZLIhuJx/hYJ\nAJyE2+Xh6dtdHroUrIWXzCPXOAybfs1r1OX5N/Uv3SE/bMvkK+btkigKLfRB\nqgHmCHnToW/wD/vKf3FOuOnxwTi0cxYyhtl1pCg7lQGGcQst7UeIto28fFdk\nWzehSFxjjYPdwbHtBwq9k7woVNl5JXDUW/sLxvIhvvNqh8dvRiyi9calCoOh\nIf2/0wgJ3N/sNxqMSj4Ya2hkAzl9qY4w7l5oli5FlKXDYt4uOTEhZipx5j5E\n1bJT27h/4+3E/GaR5jKTy+w86u1igox/k64vJJoD72qM+XU9uAcADhPRHDoU\n30wKwK46GMqpdL07SswocuoVplyCexn5fEUVwHTgcqTpLdMtyuEElE85LXI9\nuOUWyaeQjfW/qBo59egto7JdluPeruZ0kMXV5hBcFx12B4c+rXnmvLTEusJa\nbU+QiSuwM5IXaHfCPjctCLkRgaEvP7kMOB/YLWEheJM+E9jTVYmz/DSyq0Da\nrgK9tLkBeuSxcUoNaN3qHTZ+GNsHVq0KotKIkddKnxC/0Uv7AgjSSncOf7uv\nPteX\r\n=l6hq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"15a0a2fadeb96543721a6733faeb509efc26e1e2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.10_1580776984322_0.27179112012191564","host":"s3://npm-registry-packages"}},"1.1.3-unstable.18":{"name":"aws-amplify-vue","version":"1.1.3-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"fdfc0a48cdd6bb6ede480d391a42f23de14fe6ae","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.18.tgz","fileCount":47,"integrity":"sha512-LuqeyJTX4uQSdEELH5+uu9HZZq53p0DbDqufp7WgPfElLbHSzx+oECNabMhWOgD6jLbERqHwVKMjBW5FEzHojQ==","signatures":[{"sig":"MEUCIQCFFq+eEfQemYzbkd1vlwuAus2Sk5QXvu2q1wfWFnLKKQIgTmRxr8ywYR9BwvCf6paL+2YDWmXj4P3ZM4j2hxgCPKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOeoMCRA9TVsSAnZWagAAmBgP/RWcTegrYF1oz5v9wPvM\nrRk9gUs/Q5fytKrSaeeTgDVZi6dNxkvNQWB5kYI9Dx+AB3aMpbgLIYlhWloC\nCL6hqhTUqn7ebIhymVwnp1Czp2KQs5BK3w+ovYpAOB2o2UlKIvfr72npyExC\nuHNZykd5dZsNF2poUtnpPSsL8bSj3FXh6mLOHg24NdJi9EYUrXJ/RLX6y9UE\nViQ1c3Yv2CGbBD3tKnCrdita29QCsZF/K+QPp1CzzJCMsZM/lpgMN38MlNBR\nhA1uZR6jQAjvD+c/kXxBn7nqJ4F/vNkGwDGd6sCQjK1CU7OeLl4M7AV8xJqy\njSYw3+ALRefDKQ5AfHd7zRfyG6TGOWmlc4kF6b/rE74VKdX1VBq8UOU9NEGh\n0YMc/OkiL2DVXre3CjeXlZjGF+oBZJpqdMd3A3jdm+aCGO2HXyPaQlvap1eQ\nuj8ftv4xWrybcdKyPFB97BJJZNpT2zENs0wErs9jTle9n6ogUbrdxX5Mggqu\nRUub3ftHtKw+tBEDWVj/+V7fCOAXlLhUkrgbL5c5WxGsJygoSExYjl+RTWPr\n3aPX9DOxSjivwM4wc4HDEMjEEcmwDzdYB5A61v+Eqetm5OCZXl1AFv8yNiU2\nLhw0p+jgNunOSv8wOEZwnk04qOB85mxOAaFkj3WdglW3hj/c1XhRjHKAWHX9\naZfy\r\n=E+VJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1ed9f0a5e439cfeac2b59d5bdb811f2464af3dc3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.18_1580853765268_0.4131640171401876","host":"s3://npm-registry-packages"}},"1.1.3-unstable.20":{"name":"aws-amplify-vue","version":"1.1.3-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4ca9663866f6aeeccd38e439676d51cf8a762886","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.20.tgz","fileCount":47,"integrity":"sha512-/OQp1I3dR2GT4qjULzPriIj+E2o4GsESvPz/aca206oqqC5sjHQARLyFQ8wMlbMGV+9dhUvACG7Cl6JsCYaUZw==","signatures":[{"sig":"MEYCIQChbtduDWDlR3Tp5Fqxpc4kSvvAvVxZ54NqRXTmxr7MrgIhANijckPXZGuWhM+bFCywtVG0HNFRnqZKALppLwJas8Xz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePb7HCRA9TVsSAnZWagAAI48P/ja6jxyRYXhGaeVUtLqT\nnBQSxsG3Lo1FON4qkgXUHUC7+I1fmDo6Jqhu9ICVV0Cxvpdtbxmkn4XyOTYt\nq1tUEO1JH89VofYdtm01oR8ZO1a/h1RVi8jJA2egZDLGwqczQqD1a7eGjjp1\nrnpjeknNgo0+mH4npUTRqGzoP04NompZ8Xi4XNaSjmi8Tb2gUCkfCJbL63er\nLYtbKg+ZVxsehjsgQSbVeFH9Goa78pkt3dNelcTWqyuNhmuxaePD2xo04vCi\n1t/1P+1NTSTkVPBTjOkCq5QnAu8yM0lc+xdiHVElSnmvT7oEZ/XELS0aPpQI\n1A684Cv6jAyrC8dHM3DJ/Or86DOcY+Y4HVjOD3YYJx2xsmw4Of9RHtLgf/QK\nBE6DTetaf6leqa8vLR6o4l+vabr5LKuntkJj2jhPmJ5DdFautIycDzXJtlx6\n6fcHA1XrCTgMNp52nNKniuHsqtpLwx/UHSJ3R3JD9QO0INcZNfRctDHvEUsD\nllc8DVG8iUKEPjtrC8LR6nxBm8HCdkECxER+qXCJHJLEisxUQ51a1ooBnqKL\nFoE8quOD6NkliUbwpZp7Gol+FCnwQNVGqi3tTYEsdeefdkf4ptS4Cv3a/u/j\nsAB71swhwnugAWXGoDfIgvo3jBN0ELgcAMa6dUMFcuIFm7fgHkDwfj0T9zp1\npCCD\r\n=6GN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a047ce73abe98c3bf82e888c3afb4d2f911805f3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.20_1581104838642_0.5489381732528167","host":"s3://npm-registry-packages"}},"1.1.3-unstable.21":{"name":"aws-amplify-vue","version":"1.1.3-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.3-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9812700aae8b7966d6d8d88466b180c290fc1d13","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.3-unstable.21.tgz","fileCount":47,"integrity":"sha512-vi5FeEkcq8wvmvcaHX7qjvt7/DvC+jdhunEQR8uOM3jSlP2XKGfh4x4xQkYQuoNPw6YEpEnEcE8NsKPlwL1Aqg==","signatures":[{"sig":"MEMCHzaoW+Mo2Kb7mnueVcDB5MzHuG/sPojPQMwtyQXPnZcCIGdRR3J0+4sf7FLfcC8fFwsMWcu+DOTL2AAL0uKIYy6Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3867878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePedNCRA9TVsSAnZWagAAO6IP/2PmuSlSBWOo56cK7bRB\nfj5/uUsUaUAkvglDkgBxo+TfvdlRGLoRYAMzjZd5dfvYUhsh4jIjs45/19Jn\nEhp5R+NDEJXz55slHSWNGxkW6EIbtYk/NcEfocREjh1czb3NGFbKSVCm7lli\njpzasEF0IpkB0QiK3gw6aLBDRmkUkmI/lpGJJelVoLYv1k/3lLatcoOtM7/8\nEWcx6E4ZuKv4zpikDNRIq9i3Ygt+1gDh2Q7U7Ox6zstuY4g6XRnSelCh5XCS\nbUZtLcxaGX8uGCxpX3g/D6l44oM1VMMn1/IlJUGFN06JJDgOulEA5k1zmG2W\nKZmlIBUPh9gX5ZEKd7+ZvH592HPcFSWjuBk2zH2b9VdRQPvqfvHcelDpptPL\nbCF0ccYNMXeB5MckADOgAFqbTH9cJxN8JcUr1phw8fmbhP/mPPHQ7D9vko0w\nG7IgrnrwUDk8MlPnm/BIaOh+M8q0Ut6DoVkVM8xL+MwC2PrRdYDo+hYHY78F\nVLv/Ehxp2CijuoC3cwQbmndBXdES7uE7njxSvePP20pcUmU2uSadPWb5z8/V\nh3IXpJo79yudodMT45JZuG1Tb+ncRc0XxVI30IlibjpL/a81OqFSpG+lOAHf\nlIb09vKNqL1eW1trr2ml7lt4jeEo/rOBP5O+n9f55zfv/RuBPGyhn9rexpGI\nSdl+\r\n=VqbB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"58696b4e288e887e1625f6c360f5b0d0ec113c9c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.3-unstable.21_1581115213185_0.32256445844291837","host":"s3://npm-registry-packages"}},"1.1.4":{"name":"aws-amplify-vue","version":"1.1.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b9af5d80e76332479278cbff1bb35e9b4a38570b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.4.tgz","fileCount":47,"integrity":"sha512-yOnaXTipMMkr1x+e6oLBDHUgzeQ7VCmV5Lb/w5rUH6uE2QvO4KpK+MiIEt0RMD7A3Md9ZLlRq//t/dA0BXT5Lw==","signatures":[{"sig":"MEQCIEl7jSscf11xYRiXpaoe3LIugaUQhFAHCIEjkPNx9OX5AiAqEY00st9Pym0ePANWh3grM1i961Pi+Y2cBupvjV5Akw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePe1TCRA9TVsSAnZWagAAmHMP/2/ryxMEB5bJ2plt82Mq\ndmQQseHn9ggJVuU3V0YKGHmT6xkcZr2uD8/W2b9CHXOz924h0nezJdd+Y+CU\n3mpJY3G89vQiH95jslbXBmuYl+9YVQKJUsfV22M28otA1OTKcSd1UX8AhBKu\nau1S4T5ViPSSM9JX6V3BoUi9+FJtfMVAo3zeTHwI5yoxkxrHL5/MovZ+wHsg\nzKDADnSqWemmLgHuFkhigMpyPQdcl4RGczSfNOSXj08WgJSC7w0Y3XqOnKmy\nAYiYNamVSXILkw3549WT7cBSCIYvtnc5eVoyfhnhfcUbUHzWL/K7daccAggB\nPXkJL4i/GwF161SI8Hq/Swrpm+/O1NTedvTOtjyQ/EqyaNtkdpHx5xzZinhm\nk1ZZI1BjTrzc8vF8DF7AJlCNo3fBTb+zz8jkl7USyLZWp3pgTyZ/Um1ztSBe\nN+eWQHGtvRSDaKFQgGa7QNY5me3wODw2HZP8uA4MrevHo8Z6vct1Iw48iOpZ\nTpNLeaR1dZlutOtTp+YhuMLfxZKllAc6eY603a7LBTBQKyxhYRuifMdPY7Mb\nq7fW30LmIRXPifxXoucEHoEOu3WbXCxy55U/fSd+bbP2OoZGYnsnuOPptP0c\nqJKM/nvITBHqwZFaIOeQjcvrvSWhqHf8YKVG4Yv841WHezS+p7K3TKoqy46t\nxegn\r\n=rGNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"1b081992084984d4578c9e154228da8eb1d64fa1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.4_1581116755071_0.17678529068187876","host":"s3://npm-registry-packages"}},"0.2.14-preview.104":{"name":"aws-amplify-vue","version":"0.2.14-preview.104","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.104","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3b24c66b446f3e250f39d7ac9fa015b17b2565c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.104.tgz","fileCount":47,"integrity":"sha512-Hd9mCJBj21HizRwFEurtE+jXEWfMJ30etNluEkUhb/62afmmDhfePBXk+VnUSePNBwNIVYyMi8kFuMvdbEBJuw==","signatures":[{"sig":"MEQCICLQV6lRRkRBc5fs2A30P1MZTKyel8Tvk6dZLsDQJFBxAiBGlFhOZl7B3aU5hsD25KgVAxjqIuevd90pH5DxqfDo6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQe8XCRA9TVsSAnZWagAAWTMP/3u3SisYLsJoezWoB/U6\nWJppEVlxLQ0SCENGQ8+oi5clLoUFZJyHlLS1WJLsEMXSZrPT6WOb2ePL+ayn\nZjhMGOJeFGxtouYXc8ml9JeTDUA+LLgOFVw2/PmobFdy1QSh08aVnR+JV4n1\n2Zh4/M8mrwNI89tXrImuM2tL2ntfqJQASUjnuZYTLhj3psuAcw1f42jFtml7\ntipK31i+6j96ZOEoOjFI2t3NMVjNlaFRcALpDgehxwySQ0J/BICiV6CAU9Qz\ng7SngnGVzQTTDYPNWg6hCxib2vF3C7+an6WNqws2fGBbS6/llzt66aFMKfGI\nZ47Zm24hmsaqRZjF5eH7VYuLkqQnylaawEc8O2cpUkHRITUorX028TfnsR7y\nNljC2ZukiQMKDYW69cvCFqnhE4XGIU6Lirfyp+ULSyyUYFqfvzUgnIprm+si\nhPmaZZraaw7rwSEiTreUhu4776yo1NRuLipQ79xZBR8dEqhgHtXKNZmPVCvS\nottyUxEqJyIB4AffO2v3ubA6JlAroMpe3BPVHC6dPR3k/lGsvCUdxFQy3In7\n9flKFm+MqkMu5u+5dHe4Ciz/A37bePdsWtcIY72EjlJ5H1lbwn8+Y72H/Msw\no5QukpbHxW7UTzOBglm3UfYDqzmN4ayUxLwY+pobqRz16ayTWJUEumOoQ3gR\ngZWd\r\n=2Id1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"946bfa055337a08c04d50376105bc5e6d461b222","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.104_1581379351202_0.7232896240566578","host":"s3://npm-registry-packages"}},"1.1.5-unstable.1":{"name":"aws-amplify-vue","version":"1.1.5-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e6865765f43cf2c2aa8ea3b54e56354cdb47e485","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.1.tgz","fileCount":47,"integrity":"sha512-bEjY79yw8PcR2T3QdjBItvBc9f5uy6kmWXZmIsZ7tqWP8vqusfB/djd4PNrsMmLbTna94gIdLkEI+QxelozMxQ==","signatures":[{"sig":"MEYCIQDUtxb3oOGR933OHMDtoyhsbfPqOqykK/cSj+dyrymbKAIhAP0y9D0tRnMmQUIIdRt7fO0AVEGuxNaijzQrKvjEZrEf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQtLjCRA9TVsSAnZWagAAH2MP/jEX48I14VDXWR2AE/aG\nSng0D9f+Qb0u4VuKkis0MyWZHxcezS6qkwn3kE7BJqV22cTvMPfOQfDHdT64\ntJHkCc2K8mR2h3ZOgiZ59ZPbzJZ20vABCQXMl/NA4i1EgsBaMoCkzGFT8htK\nw/IfNG4e7KUpX61BANwIiVhG9H3DtmMzUttPWJLRVvXtAPPbCmeccvh9m8rf\nxd/1MZ5pm5r5YN50vd+KiW14PEZcx8jVKA3A6npBHJnh/ds0JKR7AjIBZ1VD\nqgIKaVNDfsHv+vVmiQaSNu7A8anfVEraOLK6kkeuxopkomNz66xVlqSKxdWh\ngkVgQBy38OU7AlMxfVuIsdqCaiBi/8Um1+Y7i8Sw3MJ1DH3or3x4syiTV4Av\nKAdWJBrglOzrPonA6McRPlFAFvWyOXcreAQyGIsj3HiySiph5SZ8mS0IqQ5o\n7tea5vrpJ7EM/UJ6r6z4zvnyyy5O4vow/cqZmpL15dW+0YESTvGF1jPRGIqC\nh2tu1eQdNQfNddmHHJdysVeZ5BSiZiKzGvJZx9UnamYBbwKqJUhaOHbdSGlE\naUUj8YQCBh6RokTmUgsg4n57biitm/TP8AeARmMC9q8yZmgxF7/GHKU7N3Bs\nL66a6zOI/XHVVPdnoB3yzVcVjmKQoZA13XR2rZ8rk39bxObvBL/1VZXdjQfJ\na2Rs\r\n=lYsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"17452eb7187863fae12a9753e9f90470054ae632","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.1_1581437666982_0.7912009327435023","host":"s3://npm-registry-packages"}},"0.2.14-preview.107":{"name":"aws-amplify-vue","version":"0.2.14-preview.107","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.107","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"fabd7dfc67a89389eccc49fb6b35ca5f72b7ab00","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.107.tgz","fileCount":47,"integrity":"sha512-YF7EVQPgZNcgwSjF8gevUWrNe/5S9CItGzGW4ZEOFTtgW4nGYGIu1XUfXupgUel61TBaxPaXcpDCOHj0ZmiM5g==","signatures":[{"sig":"MEUCIQCfqdzpV0jOVD7d/UwocK5P7nOQcMx40F0XgV9Ovf0mbgIgLvt3yxJVvI1CbeFX0utmHYg7F92blG9KLTRMaeNEuV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ0lRCRA9TVsSAnZWagAAmioP/0rDSF4ayoPhfaMQN7nl\npD2ypapGtiSP/ZPo7kOX5rqKj523CYs7a9DubVKpJy9OKQGXNj1xts3e1F0v\ntanM2Xe8gsw63/WYGI2JXcMd1rUtBy8JwfQvYRavm64BH+fpCRtt+vNyA7tg\nDvX7GFnogz+Jfh+QpN174xPCQ7Kvn/OSBk/lakoyvn17hUE8kaaNM+NWOtZv\nZFbS7PTX9IM6dCaqAvGYXP1TSsQQjzVZcTGqnYI/w6tbuWPtFyj8b8pVEVKe\ncnj4Ezq1t0uWs7sQnwt+5UWEmP+/phV67jus/u0smeshavANIWWo/uvRZqCm\nHQBegxeWP9f4MPzgtnKqqsbBpiL4t32bPSBHz7ovf08F0QDVDZ0RH4iNcWKK\nKADmEsohtCOBTiMylRg3Mki29Ci4sFKqQ8Sjw14f15g9VOBdLmHi3DRZD6pT\neOYyCB8mYjRVtVmXN7lJb6LKwBQY1opfYLsrB3y41AtHdMegcwuEqUiWMUHR\nTJONsUq8KhjrZ0DuZ2RhO7XhGTK50r5Qlsf1NHfSWXLRqfBjgIAClWaQ1Znm\n5S4EM9de8gQ30E6f3p9KbmUTC4T6bHbPN4gjuDZevUyv0egfUkFsQHPtfMW7\n8NP/rWSSP2qu5XuIcQKbZocQSFVwXtAkL0AM8L/GP3mTWqUOLX/MeoivBgkJ\nJa1i\r\n=Mq22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"02ff9ef64c5449463b5c17bb903d2174c7829b4f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.107_1581467985430_0.17173808139354474","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.12":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.12","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"769907cf10b886e442809f4e5fbbb4089ac4869b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.12.tgz","fileCount":47,"integrity":"sha512-BUrnOzsZoeL7mKhVVOykigPEwSWlkv1EcmJciWT9cmFsUq548ug+ANOnPc0FIz4ckmtNfvgOM44YUN6OhRrYWg==","signatures":[{"sig":"MEYCIQC+UkOc4JEMQkgBOoSBk8gjrHI9+kCUdfZSn2NwQ6GKYgIhAOyQZYoAmRyTsD47gDUJUVTv9jXBivLXzEZ57j/HMZJS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ0laCRA9TVsSAnZWagAAGdgP/3XMEuiB/sBt8eQLibuQ\nt+mHv/06t+rhk9ZGqqE3XhE2Ja9Y563TcAgG6Ka4b9Y+da59njSp6p6KJF8/\nDYtfGvZgoHfSWcfMdmwIShM2roDGWz5d61miNA0y1JOIkODrN2fxYQTWRxho\ncrhUyLxZp88XHXBTTAfUbOwuNBi7wpV1EnGSHs7Wwbtp2IAormdzxXRiqkKp\nsrcDVDI6fsGE7Qo5vHRk70WmHAra3pZGVJqtRnSyOcojiG/SMIwwjKEl3W7v\n3jjrn6Novhv+3IW1QlQCf+8kI0QZBrTFlLo3HwAwg/vTC83TWgQt4TLKeLr7\nYTqI+H+pS8NsxEEq7gJL5H7ge8dpCqD87l7ZaLNjURipvUsaBubleyLHouGw\n5rEz1Ax1aUN54Apj6ovBq59sColBL7jOfnmc84TvUrZkao2Qd/3qQ1oL8LMV\nR/IdpvPkxf9sU0PfgEm/ewY45JT5m6q9Cy7Odnn1W+xA2KT+VhC97edSGxhZ\nWmC2JjZ4xKlW45q8AX4yBXgpk/6B5uhEo7otKJi9EDlGRxfwhVE94SwU5H6v\nS9n24BBS1eQZ6zO86lVwJqwyHLvLqlhPqk2A7ZDi8utT8VEIiijgrGGhFh+v\n1lnrHUGyoRjX9Z/xbyP4zxkmBrBWfpeCXSMujG36QHjg7kVjzbh+IQ+aL+WV\nYcDK\r\n=96rg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4008e25b7b63bf7650c7ffb39c12fcc8c0b05fd2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.19.0/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.12_1581467994022_0.5983775850547777","host":"s3://npm-registry-packages"}},"1.1.5-unstable.2":{"name":"aws-amplify-vue","version":"1.1.5-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c730244d899048b3ab5d2a26920249610758acf1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.2.tgz","fileCount":47,"integrity":"sha512-klbcgGpMcz0BgSabzKhpBFbB770NRm98MkPxOvoG63zYQFY/BLqJje1W14EM4c9jGX21bM3kpM41Wu0/aBS3Xg==","signatures":[{"sig":"MEYCIQCm2zLC9BpW/Vtdytpx28ta29Av5hcMqXl1KIjvWzZh1QIhALmLMxdaCzCiqx1oAShTUzb5rsv6ybVR1uvSm8SzBWwL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRCmiCRA9TVsSAnZWagAAE0IP/1V1oo1DHZOLwv55buwP\nAWmk/rcdpGKDo/xljd+oPbmIwZwx15jRVJ/0f73kHLNpq5NDmQO12P1U+fhb\nvIXvPuaERHH5ieIkGnNe4+pmPngb+QuX2mmfAYW6MWjXX0X9zBXBb5qnH6dm\nBY5GirpxofKLZhXYD6EDDuje45VWhbxNQgh1hE5QFZwU8rWu1Pta99LPfrN1\nuxAJZLc9YwzFiX3EiyG8ptyQf3SrnD2Jg76WAXlhPQty5DTerg0iVmYoYhIf\nWW/OmVrnkhqjwh54mKOA1GeLvD+h8a8fHvBPRHObdzILdN+RX9OBTWfE8RIb\nuuJnXcg5YvKbpf1TGdjPvL7PB8zHvXF9bn8bKWnwWW5bjk/YWHH6Rpk4TYmF\nD17y+/ii+YfXSQwAT6/s3uf6DOUOBdk5EUS71sZ+cC3G391L7r5Ov6WOKMFa\n8wHed0tvUnHEKohEHdOqQGoVVdGn/Ln8I7UD3Y9aroono4w7vdStQrl0zLkZ\nT2UgBvHCiCE9HA85h7uOHRczhppsn2PfwvAGwMb+AA6n8+T/neqe2uoo89qW\nkpTx04f4oXnecRE2bUXEV/IIZGqPOFJN1tL7X8EuVUdbmKzYFJSP6hw9cWG+\ninKcTw90WImAPcTZ4ldluGoBTk5Ia14L3MZK6qWxqY6D6AWRR+lb9SCFW+5t\nqxbm\r\n=20U0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0c336ef5895401be365b2b22db4aecdbf7f81b8a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.2_1581525409735_0.5406837410915888","host":"s3://npm-registry-packages"}},"1.1.5-rn-datastore.3":{"name":"aws-amplify-vue","version":"1.1.5-rn-datastore.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-rn-datastore.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"959bcf72c1c11e8dca76c09c1b6ba31a1134b01e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-rn-datastore.3.tgz","fileCount":47,"integrity":"sha512-PeX0alz71Tewbuw+6c+lyt1H+yymHINGrzmFhnnDP6pwkU+vMjfcKCfjr6RS0aN+dlqybLIgj4WZg4LBoOfRFw==","signatures":[{"sig":"MEUCIQDy+jvjqFjvounMIJM/Wn+eqQwBUI/wS1/JoTS3fsHkxgIgEMKXVyr3TTN/H6ObIXT835AR+ms6oWIw/gU18bC3Cs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRDMdCRA9TVsSAnZWagAAaV4P/ifyxR14yNehpw4FQF+r\nxniPHUTjGrrQmKKD8xiNCljrI+6LH6q5MajUN1r6rjkkT/ENaR8MNpcj/T1G\nDlgi5teRUb4y64ClpAvakv8WnN4CAjVnMYS+zizlQ7IUKE32DThH/twBID6D\nwE+LB4ghgSBByPTNGU8F/3B/QURX5A6OXdpFUB8vazfl8bHFDHA3+r3VenE/\nMMXsBhuye1ya0xYlF0K36du8P/hc7lj7qrsHmmSJwf53JPtiAi/HvpDNKQso\nIcmIVKp0/NatePAf+7RU/yTd1GfRRXb82YDOfpdQ0l11rsSFl9OE2OG0htM2\noeGwJEXPR3SgpKpEn4jqRpfW/xrccJCmrxVgFKNtbWR7fBTwE8PDQG/n8bkz\nqpR/HKHSn3MREmk+Qf3qfbjNbmOTob3JlyCdCdTDEagV58Lu4zq13oPd670p\nDq+7zznHC8DlMvC8JsXaobILtsm3dr4NX1x4DVkHtc1GfrwiczTpcNVHcPkZ\nuE8Db2GEdz08LU4TzxJ9094coIcx96p/PeoRIbxwx/mysRbzV5tO081V/VYN\nvC32AXHECtL/4dRAFrunsKX7Pe7BFgs4DsLmuXfcJqbTlUf7kilY3oJnh3zu\nugiizmoglhxTBAnWHWq5c4U0qh1xD7sUzWNYE6hld0FPluFIc55Mqm1P1XV6\nLWLv\r\n=XxJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0d78e1660c96e5d8f568f303e3ff4e26b9dd7d39","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-rn-datastore.3_1581527836206_0.5612431816314558","host":"s3://npm-registry-packages"}},"0.2.14-preview.108":{"name":"aws-amplify-vue","version":"0.2.14-preview.108","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.108","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2148781d724000561e223c897463620709eadba6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.108.tgz","fileCount":47,"integrity":"sha512-WeXMeaJOFa5l9c8Cwe4fuTuApx2Q3E01l3H5HtU03Km4J+TRQgsD4XKd5f9E9Xoof8n8cSFgkszFpKC56tDnoA==","signatures":[{"sig":"MEQCIHgWJtG+LhaV3GDfRvLjWJojCwVEBCMtUfGV0GIB5D1HAiBCA5XrzvfJuJcVxOCwIP/JBa67u02dbePXC4Wcy9czgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRIfXCRA9TVsSAnZWagAAyjUP+wTCVZN3ldhkJTEm5llE\nnJpA7lbgIK8TPWv7EEyIwno3zjEZddqJXbmpRu5qUh9zCvnvYft0dxpLsoYm\nz5R035Bl8CYbuJC4aG9tUXevwB5Hb6kmfYJQnQC5GGUFbYd5OTC8cRHfCwZk\n1Rg7quQBhkc8ncL5v9K/3OONqcM1EpvCnne/yIuedOfSbB06J763nY8ThOW2\nJ7mPQjZ0acYTUdaBsl//cMzzHq+KRkF8ys8zcV4224BXN76BRDgfh5QsknRP\nPohtE84f9O0ncVjUwUaJAzMj7IPfM5aO1PCpxLX6hNlEDZL4hv+C64AWrndz\nitNTQ2gqIBBjQwtB6B7CmADZfZNjFBLZHJPYZgYOq6RUzCc4aN8V62zyRPMQ\nSAUqVmtyGwGqISPNpFio6o87JpUw6rziA+QyXxCCeqFjC3u5Q/mfeFzbfom/\nvaHyyOuhCWUbgErx/u85+ghFcne0DrO+7o3ooLjBZVCOtGvjARIYRaZ8eA6n\n3a8cyJFcTq8tJ41C1zjKV38eJiTm8m/7O3YNPkHGlmI0YNxnqWkAadzOgcEz\nZzm7Hzlsj/7yT3MtA/9+7t+iU6yG7dZdUgPVPW0iTy5RK0PfEfHDlwrcSSzB\nSZtYVCtZVT3n3klRGesxLU9H7Mhb+8HQI2gYhAQ1eOMC+PfMihEqG/up37fb\nHB7u\r\n=w8k9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ae8e7b8cdbe5c6429872f949128f27856e599ce7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.108_1581549526857_0.5017913538747316","host":"s3://npm-registry-packages"}},"0.2.14-preview.109":{"name":"aws-amplify-vue","version":"0.2.14-preview.109","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.109","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"de6a68474952c5b1afcb7ef19c1132e4bce66856","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.109.tgz","fileCount":47,"integrity":"sha512-p2II/9pYH8l5dEErLQf0SmLawT0b8BPVxN13VzjOHdqINtS79gLAA8mu+mBHWzwmk+ac25SQVlLkGDamVwQFOg==","signatures":[{"sig":"MEQCIC3umzep7v8hXIRKcX39pJXj+AswOnylbhhUSMV0XTeFAiASyPAoHyHtaRCKO2wi8FN35VkiYr6/nLoZzYLUYkTjFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRIriCRA9TVsSAnZWagAACxIP/3xYIB5R38//Om1w/keK\nlozqCNwn5/1Zwx3m6VewfB8/HeE5lWYacJcO7jMxuSqBv4PjOQvgNPEwSsOZ\n4d2oRTIPiVeYwsI7Hm20tHH5YDV0TIIZBTwStUpdK/oyPCto04KbEONvW4oI\nmhrWp+3Iq232NNPqmIBKETXlkddDj3iw7neCLwctd+LRlOjsn1YS8W+Y6sfb\n0nrJk9XEJSuerQMyDQwE+svQTuiwD6uGmKy0RQRXoAL7U2gv9smRpa3G7lMX\nskZoYnUCxtY9GxYi4xPft/pemB/BPkXc1ckRhxerzH7Z2/QI0Qm1c5KVviws\nghab52WzZkHCjGcQlBHN2WikqznLwaK2Jl5SNltXILALHqwdkYtnRdbalJ/D\nSGL0ewo5OgBKxb/xzwgNBXm/rI+GTewefyKXrsUTg/De9xYcmdKUetdXspnO\nNQ2tgVAMLXrThPvyDNwskrSaTJLPWvrS45tcsiYI0VgdXcoZZbLWwdV9Oa2z\ngdeuiWVPf6ImQysFEpcaThD9bhzIBK8RbcyPudd5Z2iVbtViK6n5Q8rS/VaA\nhdtLjGWc9ukHdg1lfCVFg9svoBl7h1YZvxAsnoMUyn3UHFQNQmQ/yog5MjNY\nONq32kxrSJnmzebpXYr8g2WIjJvkgYaYqZQWTrV7aeGpMuAX25e81AuS69/J\nwaQ2\r\n=WMBV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8a3528ce4e97f52baf23bb3a122fa1fc4859af9f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.109_1581550306238_0.02548848716160057","host":"s3://npm-registry-packages"}},"0.2.14-preview.110":{"name":"aws-amplify-vue","version":"0.2.14-preview.110","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.110","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6ee43cda73d5f1062b5ae4c94a340dfa87ef091d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.110.tgz","fileCount":47,"integrity":"sha512-98+wDexVM5tOaSyYYgQwdfHC74S3oZej/KlnclX8nHvvkQOJpXbWbF9o/qzz5IgXDtPWvg1XpH+XFMIQCCAMZg==","signatures":[{"sig":"MEUCIC5e5VyFh/AK5/H7K1YRa3t510LCeRvM1mBRIbmCJugqAiEAgVsyOpn07oMmLAYurFVkWLWP3K95jjIyrPTbUnZ0AVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRKz5CRA9TVsSAnZWagAANrwP/j/A/GvqgsgO48lRh/f+\nB50P2ydtrp6WMzKa2I6l0FKIH7pV7SJFyvelD0Z84xmzYeCY5MdM7jSqrcnB\nK3zBduxS25jj0JPXp5P1bM95t0N1fTNx+qXNha2Qb+j5Gs4HXdcvleurag0L\nFWx1lKL2qMw/k9rgu84hangOS5NLG4IcP42XktUzO9ipy7osSJESu74rDb1n\n1lFbz5OzP/mj9yyoipUK2Oiw1dSWDP7rVRD/QxV8ytyyKevpYs/N+EWt+WG4\ntxVagROIx7Oq1JZPVUN01ZjHkeMdenMNmZakPTE4epP+vuVLUyVi/uFV/gCg\nfG+JeSFZ1tLHOjaemsEPv3GPnwzcGsKqqWL2oU0zFf7A1Fkh6ovOyxVeY8aS\n0xzpsXTifGtmT6wRZx+eO5ldnY4TcMfLvXJxuKqPpgR1l7Wnl+9SAYMHHzcZ\nEfxNPtnLqgSrOvb0RwDWoIz+L5JTC/dsMczS1QSxYBZm/18kELJCa6KfaKzp\nzQHGeCsYcUqQMQUFpx+iX+iQXeeCnj7pxJmcUGpqW2P5lN2WKDVV1XASYh6B\ntDJ9imwKo/dRxati1S9lvLu4yw6e9bruRM8k7N+JVN9h6yvi10atXKh7uaFU\n2I88g+U6cV1SinIwGptLh7FGIRE8XFGsaIB6dVVqaIPs7d6WT/ASpF19vErI\n0NM8\r\n=UN2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"64b0bec958c7d31b1b82208e397b3013a98de625","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.110_1581559032855_0.47565179362349275","host":"s3://npm-registry-packages"}},"1.1.5-unstable.3":{"name":"aws-amplify-vue","version":"1.1.5-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8138e3321f3e9cfc619ad67d14186948ee398584","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.3.tgz","fileCount":47,"integrity":"sha512-drOo3bf1BqT+Eth5BPTOl7jfyhZsFcmWGd9MpaOo69CCKXUdaZyVJxuGHU0WoGAP0KekbwOiZPiTAxKqXnUP6A==","signatures":[{"sig":"MEQCIAYEfcev4sRXbE5I6nkv6FKP0Aqc6tD2bV2nbU8q3poHAiA/I3lFolmgGBem2TYxr6UAgn6EYOJNBCIClYgF8C+CFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRL+MCRA9TVsSAnZWagAANVkQAIptqhmABjiOa7sB6jQ7\nzZgtoTLrICSNv50xaIW/N7qKc0+F5aSyNdcLniuXIaNAQSFVyYoJUFuazSjS\nqd9o2hHt/pxgU8eJootaSY/AYBdIHDpd+fQZnmurjlPX6w+VBr+BA1LJ98vm\n4H2WUt7/uWw77ysZpBTyc5XywFCO0+Ce/vk29Rf+ykL73UjksxryKoWFDnY8\nLDkhM++X6ViWESuX2ipsT92fKAAfNm8Hpcs6EMooZsQdjgdLaXo18tpBMfa+\nEQeAyoG+O6Y2Ox5ukgZX/pmVQ1GOHRIlSZxPei6EwqTd5Re7EMyhW/ZPYd/a\nTzwL3oMYuxNvAja7fky3khP9tTrtljMEfncl5yK+SKQvXVBeex/8FSz70sSQ\n8Oq2WvoYB5TTc4jPz3jKXQq0mX11Fj2CvRpPjL7TLhIMQUvrWQZ0f2SteMGB\n63KHwzLuT+EQlRcGWYuyeGLhSYfzH1ghvgg94vdcsAdUXWcQxQolFTvwgCpn\nj4bAo5IXvycdTt9N52HMzhhheGqzS228A3+xsQcv2fgMhliVtC93M4/E2Api\nfSv+QgTZ9htsupFtrlfHO7LlF+1+dTPViW6cbqX3AseCC1up+gv5OIUvv2o1\nRND/ncHTuDqLHyHbxhl+8NGBKjk/NlW5Z0IYqdOpeOGZtPng0lXZ8beCFGF0\nSHYD\r\n=soOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"40021a3daa046745146fc9337e56ece8d4fa5b85","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.3_1581563787699_0.19983365372573902","host":"s3://npm-registry-packages"}},"1.1.5-unstable.4":{"name":"aws-amplify-vue","version":"1.1.5-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9ce75e5b897b242d9a70917d3930ab23ead8af0e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.4.tgz","fileCount":47,"integrity":"sha512-uB7iMtBteThaq7qOSCBrZMNJPdOLzGMBdG0SxY9DkSv3UEQpzQfy6QXlXOoaFlOyyRl7esOL1nDiClUHuSmZug==","signatures":[{"sig":"MEQCIE+8N3oWwLjtUUR5QyBgL4HmeY2thHH7c8426crGm9fWAiAlRp6FYn3tZVwhbnduU+Hsd1Db5viPkCIyyIJDsgvKaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReozCRA9TVsSAnZWagAARi8P/3nPwxhtRGwVq3u8sRb5\nbtmGVpKGjWR6EwP4uB9UdsWRHlv6V74DqR1TJxFYK9SHYpNN8QzKqwssM0Ul\nvbfuVCNKNzGGJPKK+MYwFMis2tLiJt0nPb/49RzYD4tD758KDAJWA4Bp+aoi\nY4dqock4Tn1lus17avTyleRrC23nCBrdvXSu1zfnvTjPjleviNCDUzsYtjl4\niczI9YKvj8cpt0tutgNzZHVH5ayZD/nRfnqzqFa61iYg0dSEb/5kovftQ9KY\nGFY2jghYWRF4gK6xjllCbXjF//VTEE00vCZ8RjeC/bPG8Swa0QJ9olOrVJ6+\nSDBz9Hz1oYgjPWOznXnxTBSJnEJ8K2PDGqnhr0fhfKadDs3ADjVvdHjQIMPA\ny4Jk2R0NyKr/GppmD3VhlBcyE7O/lR1SQFssbdzB+sz0NY9eDRlewt9OltPu\nNC3YmXriXC+2V2OrHlAvgf5s9QCjeCzqKMpmCInQISzSv2zt0RBFBuxoZTDi\ndDZu5X1mNNNVJaqC4vBOa7Z6liJm+Rfa8Cs8y6S7KFyrcXKQafiDASd1pmNp\nbFfizXiqRjcZbeNNyrUOM2Dox/WIeyXan3vDmbi80FEXnzZTIvp7rXZ29zgu\nOx/6W4avGGVJBbBe5fKgGlCfC8KjHf/JOJUQct0ASyqAYQz7KZVpD49xraiB\nooai\r\n=zu0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e03dd517e09280349f2fb3501f43b90fec741895","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.4_1581640242566_0.18296046624716955","host":"s3://npm-registry-packages"}},"0.2.14-preview.112":{"name":"aws-amplify-vue","version":"0.2.14-preview.112","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.112","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a1011b0939d1879895e88165b1d4d13d26e84514","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.112.tgz","fileCount":47,"integrity":"sha512-5DdNpOMAnn1J76ZmDJIr2qlZnPo+gXpUCV0/8SqfXXXXMgjF9Gl+NpxQrmINyHZDT5Yw8j/er88jdXZ9xPJlGQ==","signatures":[{"sig":"MEYCIQD/FFOM0uWIytuLyP+ujrpuJhQ4zhE5jNpC+ieh1VH6VgIhAPRtqTRFRMnZG7varRnrtNy2dRjaC+Ose4K5SeycvhHJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRwSvCRA9TVsSAnZWagAAjpoP/R8S+2PVPNUzyDOrppVE\n9cphTzLWuk8aysJ6PI+c5nMpDgC9jmBXlkEPu7WlEqaZSW5ALyvyInI4C41x\nAZXUWb5cztIAI2+10IK/RtrfgUwDzaI6OF1zkV4WQmw7EN33IPMQbjDj9Etr\nx6q70OaJF1qD3XbDdowGtJbWnPGgrPEQPJnZJ0dz3rKyhWz3HemumoxronVB\nYCa4Fxn8vc8jXxHs5mvZabcJ3/wtsZCnjZg6R6NtvBNpAnJOTXSQXF0ChIsB\ntH9+Rr86qNSy+CrTrz2gAKsixqzo1Ndw9iMA2HRDehuHNv3GebDRnSBgsnxX\nfqo8oxO2WpG7TLfVB/DkKno7Xno+P2olHKMAfGdfQ3MCNimymM7Zim/K/VYy\ndjwMXS8FPq9wlt7FsZv36xnUwxCnB2rFjSdyEKMFiuSTYp9LNIkSQC/mtRwP\nk5TPWrz1PiUlYn6LebWilhnEuDmV1wlUdSLJAadm7NZeS22Hvg02vFC641+E\nNsO0RtAyq+VSBMEJqhsHugfaVmDONp89CZZ7+tkrk5DTwHfrB08Kq/35eKl3\nOdau7moSBR34cEfv8ZVQrz5pUL2xz4FfmRBWX4ma9ueJxuvilPENWt4IFGI1\nSiOL1R+8Wrun51nL0geIZ5HjSYoiznl0VKo8F31y5JfruxSdxC8yfVq8ll7i\naPO6\r\n=YNfl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0b91b56c2a8709964b7f326f81e5ad4831a75764","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.112_1581712558812_0.8822923793643165","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.18":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b44d26c122f1c12142436e88f22ae2b0af6654cb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.18.tgz","fileCount":47,"integrity":"sha512-ZF0no8ZPh/O/LQ2FA8yhmFIyHKHPfA7+tcFEeym+LOAGIg7/XIiMtLJGzfMrUPQRisAbHoqAvUwkZBkKA+FuSQ==","signatures":[{"sig":"MEUCIGKDdk2A5qRpFf4QzffzUXu+wBlNouDys4HqvkbsfnD3AiEAtTSkzFXZcCieQls+4SLk70crMWYh7MkWDqnOsQuhZ9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRxRDCRA9TVsSAnZWagAArN4P/j0TwtTEvGLVF6x5Yzpf\n4Hn0fAeBfn/2lzMr9zwh8y1Agr17oXnPqzOKj/EhAKzwurk47r+tPs5JfVjE\nIqxClVbvesTZDh+ZrvViyAvrdopgfthQhyS9b507VWHKpGS482xyuEHODD2F\ny4jMqPNj/KUxykaHL7dLaZZz0GvPSBfDezmLikUMJFYkfq0MWGsAB4kLe7Gx\n8575tIr+oTthuk2QkYOfO6GHWYYzeJUApblVWtCJUHcXjYjXh6YqL13wpEKy\nVbesCAQKuXrC5guUxPY+NXutebI1CjZVSZqgfUocBo8oM10vKH4b/qzeFlIv\nFX5nVJzYXb7byGQNJb1VGT2uC1J32yIaoXDYoAzimNo7ZCC+YAt8KPxwpmfe\nwr2b+rdp0XcvWuMOVb2W1En11y+15TY0mJkZNKNfENYW/dHMSCk16Hn0vmaR\n2UHaIRLgsjAr+y9OrWuHiBEIPluPV1AhJTqj5kKKV5+d5ZLApSh4WCkQHVMK\nEpvkYqwQQK6SCEtegAy8OJkM4xv/LejnmiMXx6G2kEGbOunJ6oKaHZ6DRRtd\nT41XmKjjDZ9xIo0xAjzqzv/WDCZJ/dSt73CTrV87IYFLJIEfinDkzskOhedZ\nYqTEDEIGy7cbL0Y7BOx7tvZFuPQt8aa9C9l1lF0Hd/nC+t1PqGx8blrQ0nGN\n05vn\r\n=ZyUl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"38c9c5cc0f18c75760006d60d75faf9d6725449b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.18_1581716546643_0.14468719183521972","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.19":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"88fa82a2be3daeb13a3bb37d17c5043854e1dd7b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.19.tgz","fileCount":47,"integrity":"sha512-xqqQHO6sTaMDgVrojfbWC5TQw0vFE1Yzq03YN2dCtobLqgOXZ3Op9KAQeE4R1TNJMITCQ0KAhxhlxsxjpNKJhA==","signatures":[{"sig":"MEUCICzsio1Z5d/YdBgZ1UW1cGyPXbLEHfMhQaVDW8X+6tXWAiEAux8mNJvoz1kzYZaddF4KWAogQfeyge6Bxy02/XETlvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSDUACRA9TVsSAnZWagAATXUP/A3rtOv63Okucne/KNDc\nJmCNmVLeRMrWWeCGEonLQtfL/aR/KrG7tuRq8gjXXuHnOiys1KGrhNMqCgLn\nmW8X5prxEP6wMOYW9QmnenCJ/ZAcB2avZYmXTt+YKPRa+jjvrSqBJ62tdsXD\nI/WKIYyJl8CmD/H8cTK9LZodtDOJbaui7RyldIg59kKFAjEmiFm8igJaUgvK\ncQVf1BXWh4G1EGd5a6eiyPBLLSUrXjuWRyobXIjqpRRFyGtZtQKw3D+9JKWr\nvkAP9SahGoOoAvgE8q/RMGa+Dv9sud3U4FsxXaRElPBlCrmWvyorEPphZ0T8\nhlRHK9lyrwcq6wqT3HjRFmiSQS4QZ3y+iG37i7kHIHA8dwdGbvly9rgArcfc\n1rElxEgoQnPXaKdn4p0l0NA8rkXnpZKD2RSB92HsEsBouX7FapufbxInqKDd\nR0skLpAqCs4Gha9kLpymm5OKslUQDRKV/ZkbhA+1ijN3twnqksCt/TgSvM9+\nDf06vOD72c3IfUrqHa6jFDFUqV/AUGfrvKgxkJ9wsghiZVA+QLkJzcd4/bhX\nuxdLds2RQecfJQrSjrIRTsNP68lgB6Rtks9a1RFU1Nhau3Bp6z4O3Es+rGV/\nAJGWAgG1rWRyxyiKmcLj6UE5gJfVTFghFls63JTna9QjMzoBVo9AS+uoQrje\n4YhC\r\n=67Dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ec7a8c9db1b4b140230624fed8b420b45ed43fc4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.19_1581790464288_0.3671474940927366","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.20":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"79e5254dcfed11956ae34abf8bdc7e1cb64e4788","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.20.tgz","fileCount":47,"integrity":"sha512-0m3kbC39DcMsoSvhcb41PzH/oIvUiC44313hSuyFJLmGz5CaE/zRmUvrWaBwQdMhEAu8QIw82bEOi04laukZoA==","signatures":[{"sig":"MEUCIDsjcW+TlxdlfxTdmv/u9vJJRxkGVS2wNaF/o4DCWtQMAiEAvUFbYqU5YSgIxPQYvFEhe+yy4fMm+2IJqEevSiwc0pY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSwizCRA9TVsSAnZWagAAi5QP/2ZzkgYm1yNi9EIxUJ3b\nwygVqbD82xyBiRpZOLO5kF5SpRE+4mzTuXqkTWjpJ187PiG+eL62NinkPah5\nBogUgTm0BykWfVkibPN425yv7zNOENiz591/d2O/M4cMTyDcNLKU1+h24Y2x\nrPwAjWWQBW4ssLNWvWciCP9Dxfi91985dr40qn8DlFAOEGLHgNRLvnHrx+rF\nTsd4dWQEnPam7B5ZDeXq0NLNH0LMchnrbdIfYSHe+LYbqRI9l1sQtOwQm9CK\nC6H0ntWal07+506RLAkquRkrUYDtgRThENxgufZbv5pafw1MMTPOzM0K4T9z\nZ49vPm1TFb2w/LwcwmH5cCWOVONYe29NyDO0gaks5iF4EsOWwu1Tbib120AX\n7yZe2QDYWyZmhYW6TrgHyMrjztKaDyccAKCQt80eNhOkeC8KlnXTP+VqaMr6\nzhASqZgQCq92dE1PsyqrDSxhQU/VkzALDGxmIbo1vYC3pWWu59ovtQjU4XO5\nfO5Lj7TM1su6w91zCAOyPx2183Y5vQFB9hRf4yNe3VkIBuI74KbTlNtSZlXL\n7gH5Jle6ca8DOLdmTGS79XZWPrmfIvejBYiAz+IzLThYkJejNWRsyffBkBgC\nzH4eqCdYIQCxzseXxXCkDHs+wcWX/LYZ5MKD/s+7e2X4ntPckqVsMN7MYTGi\n1zTU\r\n=+N/U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8383e4a6d32b3c9f17d8235597fea32c44688504","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.20_1581975730716_0.08023807139554862","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.21":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f28b39c7de947700e699c2447f975f9ce00ea757","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.21.tgz","fileCount":47,"integrity":"sha512-2jNxs8bQZfupPw++96cJQWYIy9Z7V6/GlPyXKG1uNJYB7ncw6pSxw83H94A7DQrLF2VnQx9tzoWT6Bc2T9GnCw==","signatures":[{"sig":"MEUCIB0CXhTzU5rVm3dxwWtDVz51VL6uUPr/DHXYuGqTFOCvAiEA7mCC3CdW8S4C8WffUpUg4kJDFOuJGc1Edd4IUP0AczA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS0U2CRA9TVsSAnZWagAANGgP/RNggMm9GWd4lXO0ziwV\nW0XZ4E7ea67cWWR3TuJB8kOX/4Q9rwjPfElEhVQW8ssw1+mE8r/02FgUR3/8\nfpFqkAez/wtlCPpnxpW2TZg26TzXSPKtZUTfro8OXYh55ddMB/jBB0JfTSf/\nb7/pauhMKvG0ps0dyQ9zUyZzpqlKVe5G7WZT2pfBNPO+GFBhhsY8vui5SbWX\npSoiaVwVw2WTDeOJvyPbkU/1udw0VFSxGzsdj2lSyEf1pL2fxsLO8ugwQB5y\nUeXycQaDPXWbXche7o2KDVS91uk/jPjnI8lJZSskLVCYLYhnFjQuOuS/ifpq\n9xqytcJ55kjBPTYaT4yVjAh/DZNh7G+hiYYGJyVqnBGDK9LqlkYQHV2iaqOp\nHVzWX0VP7RbygRlYBQtp6aH6YOj33wijd8WFO+chxNGLN43HVG+9PEBc7pYC\nHS55GkM/C4zRvzz4l3K4jay2qCkHDtyrQj4dPgtJdYGduAKINOuo988w0oNL\nnF0Drz/oCxXFp9PZbNGnK2oVUSBclS5oWmV8wFKGK0ueO87CTb+WYB1RITpL\nknYw+s4iHaxJzMpe/uVy8cKZymS2R7A1hsD3EdIAbvc7ILger/U4QsibKC2v\nAHfBU4ReAXNZpMk/sCEpHhVG1aBIHfoIy0UyGRI15kGU3vuJ7p1xNGyW90Sg\nGKLQ\r\n=W+8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"affb49d4aa9fe4b0ad92efe1d07ac646107b6d4e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.21_1581991221579_0.8765821324572576","host":"s3://npm-registry-packages"}},"0.2.14-preview.113":{"name":"aws-amplify-vue","version":"0.2.14-preview.113","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.113","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c9516d73a9d634f6f6577369de57e64f8e83ffe4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.113.tgz","fileCount":47,"integrity":"sha512-Nn7bAdOSFigrF4J40s1y6m0zpKxb4389rwtJVVwsvyBIo9GJN88EN8fWbxrWGhMY2huRYqjScUxr5gDJ3mNOOQ==","signatures":[{"sig":"MEYCIQC/0d2i2DjZuq/TKeS4RhYBovOhS05mHWua6wTvgI7o0gIhAPy9rQiR6KKELlSctVEMh3s+QRsR+T+IHVwoDj9xatDc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS0jcCRA9TVsSAnZWagAABmIQAJkoEdcq6URIp/VGWili\nETgPWLgLiXWBvLzGDF33LUIFa4jVOB63rD1jAeOgRNFwlrTl0WrtAqMYBUz5\nfFd8taq2vzun4d8DfhZO15Hs7egj7lnYbGKmAavaAyA4Wixbta5hxlL0O/KV\naFm4OKLwCLD+h7ribwtQpJ+1BZM4/9+O87WwJ1LrHD82PJ5GASjkd1F64OVV\nZv8EExUogYk1UY4dwW2qfZYKNS7cp+06HDayW3N+YsdwneOVDoRl6SMK6Ujl\nurQjIb1lzuElDwJ/1rIpxma25exECuHsda2z5prU6Y39DQpBbghTV1S8ee1d\n8q/Fp8BfR6G3ZTnASuHfG43ivw50evfzbu3rQzPuUZw1y9lhlR/mC/xEmwIL\nd2yJwo0jiUp/glZR4aIGudc2TsMPAb07T/ENEzx5wN1je4cooTgeUPJ/9ABS\nii8zNpP53UI2xIXvbMYYgQPrIAH2rmOoTDcju9XyKsNO8QUJUlmdQ56r2+++\n+i/EsavYTD8abOZR7497VWuvlkqaS7V18aVQoZ4oBQcRqeOthQsjO6eKZN6s\nZeTc2CaIfdR87CcxeHLbSQWrpqkiJG+jtlwbpGn9l8lNe3n3+1daTfxrcJHi\nj3JYJDeQyfBQMbXkMjca7uxwKDaRBghbgxjdmkP+UakZ4zO5ee3h1+Rwp5dR\niBmh\r\n=DS4J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1bb2055dadbf406ccd6de7b89a73d8f0ebca6c4d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.113_1581992155641_0.8162329960843928","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.22":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"600a9c029922233c194c567b9e6759a88ac755f6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.22.tgz","fileCount":47,"integrity":"sha512-xvmCLy0F4L5saOklEvz3VeLfEvwFKWK/CRQTRuwABOYptC+30jeFa7s+rrZ0Z5Y5h4lnjMUPo5Pq6EoNrKL1Dg==","signatures":[{"sig":"MEYCIQCuEEk8m+vgmOkNpxau5/mWxYxef93rc+o7KsPcX13gQQIhAMbnmcta7asGukp03zCF8aO8T+2gBbi1TbBp3vJmE8NI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTCNFCRA9TVsSAnZWagAAZX0P/1+mxCrOAq29BbxXpGyY\nSHaQ1dgcNY51dNEGGeTcxWRDjYf0NJ7RGfzd74IC6CHGTeV9RWj/8eOymI85\nkn92ZtPMsWd4dtD6wvLwVfqux+oKe2/UghQnCjA8OPTdsyLGaA5UVIRAUPRZ\nGt/vC65AHpY+ooexij+CFaQgFc+8jXjCAiDUJQXh791mf8RiqR2M/e9efA05\nndw06BLKxDAwsrrtQ7vpLoXj7/GJ9nyRY3S0AKXXjNoO8aOby6QLuCZw5IYe\nn1rnH+yed5ksp4pUkSQLlf+f10i7zt1zzBu2QoWPnH5EmMCAKdPZxxzgsApP\nW3DJKWtfvIxfw7khyPgl1w5NJKcERUxjFtNkzxAa0Mi/o3G4cxgxtXuBvy6P\nFqBVyVhjVpMQm51MZXoMVF5SIpZVNWKkQpogF6eAA0MjlzwH2ADz1M5uAdNS\nIDq6kxfOM6vL0PCVijWM3BHcx9LIwwiGz7dT4kT6E5phf4tXrYSgzSloDZQ9\nZ5jBESxI9ehno7pHyHYWH7oTfYKXWpHT7qnlXC4/GBZIofvl7fcNau9bGxI/\nlO7dBWx/vK9VSm10+cqNnwvUUoUcSD946sFbi18Il4bv65EBX3CTKwgy1oZX\nlSX1TicMzGqY5Td6vB4F7G5rUmElQd3aUkMSrbRF+/3EGN/vz4REx4EJMCRN\n3CHX\r\n=k4Mx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bd37a7cff285e87f3098f9552a2c9025059a8b3b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.22_1582048068843_0.6256227405716146","host":"s3://npm-registry-packages"}},"1.1.5-unstable.7":{"name":"aws-amplify-vue","version":"1.1.5-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6d055f079d7938625b48b9814ed6ee7ad3e5e1e7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.7.tgz","fileCount":47,"integrity":"sha512-xnucjtGLGWsmTg3Z5VKQhJyKpTSYJBkoWTuRZ/Mjb3IRhYzHq6R+KEc83nmdzqzgIYymSxyMV524/dm0p2Av0A==","signatures":[{"sig":"MEUCIBmdB6+B0xOBj8Ofwk5eXnMN1bifmJuW3h1h0gR9aiNrAiEAmH1zwkAV1CyOGU8rVrE0vwHsv3SYnFJoLvO7y3za74s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZIXCRA9TVsSAnZWagAAgYoP/2j+YYt+NPdWNuFKIl1M\nkphvSfUzqAh0SaEZrfOfIYDUWNL77g4LGvCWZgFtTjG9NUh1ay/U6YhiexNY\nbfnZi1xi4uC/HF8GWdVoyMs4KtxqmMtdua4Asuhj4MtIfeNR4Kt5drIHFfMY\nYByRSRtEePlctXGNE+l/CPJq1VczWvoqd6lFMtlIjMlEws558M2LwTZqMXsu\nSW53sCZCamQllGPSe5JEdFoe3qNZ/uU24QHELpLd4QLP7YMMrSfIM6N/bH0s\nKuahEHZoy6VT1Iqtf8vxjfXUN7z9s6w0A5Qx1xecrZnXO3qUpt1YvuwY5347\nlJHXpfzGk3k8fBlLK6HMr2sNRbYckV65u1pVGPws3ovt3x8JVt3PmxcbWLR+\n/3/AUW1ll5bNZDuoKx5GDyeeGyLvzexr3tPx1DB3wfzMaO3RNegE9b/Yg00h\nG0HyJiPJQwQSQB8QhR4OVug4NnkkgVKmytQK8+23X4ygMgxk3AExKe86pKAr\nCdx9vgi6yMN6l4ZyYmBh+PKNA/cokVa1xPwCM/engt1TKZl3HfukAR6YxdSZ\nVO9f4gr3HDetYoya2zNFM3xIGLEbGRx0091wKnAehaVGoYNaXrLhDcexaC+H\nFaKH7v1cp/Aibcl5OD/tznKq652hxdvM6xan0OPIdBoQkGocD+vNyD+rwH5A\nP26a\r\n=4vMQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3744cc918a8e99afd92ec6b99a0d93e48ee12ec8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.7_1582141975068_0.9961240008424699","host":"s3://npm-registry-packages"}},"1.1.5-unstable.8":{"name":"aws-amplify-vue","version":"1.1.5-unstable.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ea9470195bdcd431b7836d19238abc01fce74228","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.8.tgz","fileCount":47,"integrity":"sha512-OD6NeKzGeYpWvoOp4ur6PHGv9UX7vNKqedoCVyTXBVfUk4xzruVvW01Tdq9liCSQk5ZSeEKHDf2nxc1eYwK6cA==","signatures":[{"sig":"MEQCICscw9HU5AJuQVQPTshGwBA+4nLT0dH7/ZbZRUQTI5axAiBP3p0rakBnnWmGkgEjeu/9IGmYzziclRDLRfpESORnwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTtOQCRA9TVsSAnZWagAAuVUQAJY0JKtVNvuJ4pMKYt3M\nuQNg4W/eEXAmOO98RAaYxyp7LudZhFEUMNIqItMD1uRes5tQQLm0vX8/T95N\nHPJ0LViTl59IVNliMfD0Dp7XAOjbjz4CMXZBpTUDpsQ+WIn6iS4FDWlqqCmS\nm2oks7gbBifEshpwzIh5etHIG8HgEIiToYleWi5uA6F4CwCn3ie7z68QCW2/\nUI6C26tMx1fppZ/evN/FBy8b+Ecunz5CWA6BGZlc3ksURE0aAz71doefi9y7\nVFss87vHjBzULqnPrjTgdp83wnirxCnDlTAoVumtSErgHdp687NDVfDKPIOs\nDLCNMHNNyguQ4y4nzgkmgpuNGEDlo9SMMtKcl7SLOakPVd07NQKBXJJnZ+ie\nJpF6CqDrFCECNyoiAOoEKrINqmlxIT54X011KccG9IOkvWSG8V/I9GnNauiq\nEWT0JhW/Ctx7Nl2AjjFs2jeEXC12mgQpH7pS6jxkUSuNc4zFYRyzBwv0f/gO\n+OjZSd3RG+n/i0lO6sEjXYtEMEos3p9nTt2rXvXWaBgxfAiehNqSPkusU9lx\nE8D99TvWouTPCu4vJWLOspzZ0GaSQ8hRgIOpKFPOzYmOVlFlYmUtdKg3Dbm0\n1G0P0NU68JYA7jRcdifGlz6r+59naPeow6KUIL+hBDreQBT51ac2vxaaP3ws\nWlt0\r\n=dKhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a577935c9e3128edac8004e36b9a200c4f9d101d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.8_1582224271690_0.16435761177139607","host":"s3://npm-registry-packages"}},"1.1.5-rn-datastore.4":{"name":"aws-amplify-vue","version":"1.1.5-rn-datastore.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-rn-datastore.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b1ba2732e77376beb36f8daf095b3df814b196ef","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-rn-datastore.4.tgz","fileCount":47,"integrity":"sha512-IeLFlS5TnHHYnrt1vApN1qEjDeW3Rgc0MplkGOMKluvpGaZsVUnjK9ABEvvxBqX14+O+s5xlP3g8Cp2pUX7uzg==","signatures":[{"sig":"MEUCIDMyP4SnVU4+U3JOyQJ9Jgd41w6vGK7Sh2UonrN/IZ5qAiEAugVmBFDUXJ6StxUWEMJmJggacfU95Jrgs6XWWwiYIXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTx4oCRA9TVsSAnZWagAAXcYP/30ucXKqzV0HTYAztJnI\nBDoVxQ8Np5dg+v3xPov5/gihZ1NN+aRQswuXpKTLjZmAKGSj+5WUFJaJyCuu\nCysJfS4pRkDYHz3xQprRW4MicSFY6cPuaiwkYk/NwQtHvCiiu9r5hgZbRcSq\nmLuMlFcF3iiWedUJDxqnzdCBwRdd9uZuHS6Gd9ZoKXHNZDnHhydI6Te8eim2\nBUHPGhRaeZ36AnfBucngiXYOiama/ZTxBYX299xiY9IkYaqaJR7r3YjovZkz\nTdh4BsvB1BdtEwahZztlCV6b2g8mVhy3OyWpZfT+N9qWHxTfjJTY4ehNbJwe\nFlenyukreh0mNO8NIGA7RKzeDY/nbsyMuHFTVa7MhP579Yw8n6bNCDI5Q0TL\nqhWp/RRur5s08gPHDf0J/SkFvKjy0P8JA58//TN82tjUImEexQFTiq82zsJL\nU5LrEXma0K4HTfEgIi6jZqj8usenK2VGYXZ8Xu/J9/ee1xwFk/QHfav2B/1v\nSx9YfLnGTKR2mORDamxfO5wtACNiieMiG+/ITs8CrblMxhdalRlTREGaIL5D\ni7tVsoHExYUK6YDyqpT+gcHOdNOqMSP3bEkbY2uwQq7LBBDJmvQKNazBTz7V\nYtr2atH7m1LtWWftif9KZhFBj2wl5axvOnKiIoLWtegV5fZkH34ozwRstiEl\nQrh0\r\n=VmN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ef6a3659dec67218425b850254d08f3e24ef8586","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-rn-datastore.4_1582243367958_0.34645980271570687","host":"s3://npm-registry-packages"}},"0.2.14-preview.114":{"name":"aws-amplify-vue","version":"0.2.14-preview.114","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.114","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"96836b1033be5e8f15d605624577eb8e3dc326a6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.114.tgz","fileCount":47,"integrity":"sha512-hlRuvZIYzcZS8o36fwP+bIkg61C53mS1lzWocjvjs1G2nqA0Rsmxh4q0q2WaEShHxzLJwFDU6qizehcpFpJ+/g==","signatures":[{"sig":"MEYCIQDjAVxgjuEJ9An8liWPSjIOYeWlzjNRKWfA5e4YISxE8AIhAKqPDfR3DfWL079+eCFtQEXeYH4kzkK3T4821Yn6AKF1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3866354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUGUgCRA9TVsSAnZWagAA2psP/14a5BhP7b4cWetI7pyA\nqtX2O3cJYfm3B8Am7iqQPHdoo3qtthkrwCa4DorO81vlLzcrtbz3b7qMPW4y\n6C3vEvX7oK94YCckXCbHkiu2sOi82oAcZEpX4vThpFWzYkuwnlcOjCEiZ3Ye\nHNqAbD1ySosXrPe9YQNVNBySUhikwFX1YxvgIwv1B5TBP4DihQi/Nd4pkS4P\nt10pPvsKwUEcXNwhzR260/zGYhCPftzt0QZK9QcN2NG4fj46sZ934hDdd9XV\n4h8/YbmghdorXwpidOg5mNdB8+KktFylbzW2c9cA6BrmaAimVW+qq4R/gn6M\n7JdnZMlZjwTBr9Y8SL9dgdZHxFsbWa/buDAIegx1ahaVW8gMVFSKYJ1d/19+\n4MYEtUDxVAyPrCZqJ4fi7K6o2uMjJtedhpdEdw1Yt5kFwPWax6LfXm9veP9f\n9lZDWQ5rPm9Nn6IQOwjREiWK/TuvhhZIeGlPE1mkcaa+voTriEdd6mWfB6SA\n6k6NYfZW43d5iVdYZwbU2kWHEfSRQUpSGuwssDtABAy841/+nBgqGKYEy1cp\nFiQj1wj6Qw4ogmz0fA0Zh43sx0xRClIi9mJxa2uQBEf25W8Eb/C9kyWFWpVs\n/Db1cIVptvO2zSuVK87od+VX2Dk8MQZZpTpu8KuoL9Zl6JuWluulW79wFcvQ\nKVhg\r\n=SCCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"966ab576a078e62c8517a9572fdc4c8c815c9337","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.114_1582327071636_0.4684549142189547","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.26":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.26","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.26","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f61993413100c0eca157ffd4a69203dd4d82c898","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.26.tgz","fileCount":47,"integrity":"sha512-DrBuJWiXbHIrPsIYNPClR301dOUN8xMeeiiqNMp4aucBiB3JB+d7FCTyImziWDEvbm6ZMxpdADqRkfalHNycTg==","signatures":[{"sig":"MEUCIDwHefO3QUiIhHnEwc5O1s6maN61f9nMk4JMCsFu53nrAiEAtFabKd3zZcH5p7MO8j5qhb1TiKq8UWCAmEAO1updiYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUGeuCRA9TVsSAnZWagAAp6IP/3EGgryUD/Xb3WELn+/k\n7b95htCo/r91t7mtvgd6xagGzN2cpW8b5V9CTS4XwXVS2e8sbxqrrmG2dWyS\nenh7oBd17ygT/YhmfRqGJgyKEkLHg9wcpXXCbRALpNpWiS9r97as0mTAwhep\n+5/ouFlE9bTPGXMEJNm/MwPg8oxXHbkrwzmCdCN48NSLbS1WYtocp4O+iHNy\nvmGw2ho/QvD88nwsTfyuoTX6WRnwqmDfd4aRCuWnh4Q5u2i4hHehIcdRn35y\n0zk+Amu6tKya9v/7/PAlEDOZa7RccWg/qNFv6OAAxR7sIMgvUmXjxIyTs40X\nvFgN8b2ii2pHVryEBTGnaZGPe4Ul6dHHmmDG88LcAnq6Nrib87j/RH3ylhpo\nY4VUAM2uxTE6c3h0nQij8swa9B12LDamzeVH5ubN1qlQfVALPJ6TTnxGLWuT\nb/WrvFJ6p2YkK3mxrxaypCiiqaUZZa5e/MXh2CnK/8hmWqkqRjyMHk/VPgxe\n4ROPTohexi3WLYcDa7B/P0N1AXl6XnWWziEk7VldUx3EdyhbILTM/oVK47gg\nDd3tayT3asv32ls719kQck/QEWrSBXsq9oXc0NI0c9/OrPEwVtRrU/uZKba7\nNJASpbPB8LhAWz5HFuWueKdFZhnT5YucBE17s++nL/6qZKvAZg9N/xh+NdhI\nnZ29\r\n=aPvQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"18deb1ef91dd92b6047636b3ac714d1b8f756072","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.26_1582327726062_0.1299372811935573","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.27":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.27","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.27","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"704a5089ba512ce364a7e9736ac2c45b7519fef9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.27.tgz","fileCount":47,"integrity":"sha512-kzWLllHnSLyhDpSgyryupN1aCYfmrj13sD05dFF+6OYHYj7GjYIRcnOwzm3ejTOOblAODhfeuaJLL160epvPgA==","signatures":[{"sig":"MEUCIFTk4oWZQ6uk6M9pKQCBRh2L0Rs6ADSzfm1vF8IRildVAiEAw2OtkKSoAHkNnmMhY2f4FF6XbHsB7HCXmgG6/A7r8ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUHSICRA9TVsSAnZWagAAuTYP/2ivRrb2INjFEy0Yf/qw\nxAnJm7xKwBwP5OlzQxN20y6SqIYTkB5PPf2AgdnkRxBIC49g9xw3vlhFv5HA\nZlKkf0IKrgzM6TIzffKt9ClGZDXckN+5efOVoYufuxv9jVaLeKY5HtzzHFkg\n6+M7HVR6Af1TEkX+n1YE70yL9JIYIX9NPOIYC8VVrgU8sBNsZdzNig42f1Yu\njCDzMb14fNd3a0XnJccuu5BS4Tvyis6JgvUZHFFbs1NMdyrWw9BD70TIzgJt\nhhR0FcY+Nda3P3hk7O744Q5JxHosDdV6qEGR84roCuK89NQSLtVIryWryi/P\n43AGg5QJjZuAs7SVh7QeDygBECg8EzZtVEMa10XKNMMvpWXJ7Op1p8zHITp2\ninPZMgk1wNncEx6Trxreupc82W09OGubFNyUcj5ZxI+1eui/PQgZCVfgnyUc\nPrSoSeJEmP9P6G2IH0i7glr/umWiCY9xCqaX25BI/LPtKkqONbvD/Ap0Criu\nVqytsU9PO3fbogX6GvNwbqFgREum+wvnhiHu+TId4Eyiz5HWtV87iX0xfpeb\nYE78parx+5+XO2L1MW3tdgWdqc0wM2m3JAFhMLVV4MCQBAMoRRHyVgPxgW/U\nq3lBe41t9+EKef39IPdKAhZOG87ZuWnf07SlW4/W1tLKmN6pWV5OIx7OkkZw\nd40l\r\n=ygWh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"aeecc47a91fce4de175e6e07fbf9516199f3f4ea","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.27_1582331015545_0.15884877290886323","host":"s3://npm-registry-packages"}},"1.1.5-rn-datastore.5":{"name":"aws-amplify-vue","version":"1.1.5-rn-datastore.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-rn-datastore.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ee0087eb632b614235dc231a13b85857db8f33ec","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-rn-datastore.5.tgz","fileCount":47,"integrity":"sha512-Aff4YuRRKf7E/xPE9sqSHWii2WUfDRMMTy2Pdmx2YprUHOKx+ZeYr1nvE7sO/YQK+mOaLYqiIG0jAX1jXzpiFw==","signatures":[{"sig":"MEUCIEt5W2ji0lHXCaJpg2vbJgITqhmVvDK9hxF1i5uY1uenAiEA6VIilNY9EDlPRDgwWodJcArz5DIhL6uPmj36F/jjddo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeU8ysCRA9TVsSAnZWagAAGEUP+QADHvWEyPiAl6QK4IX3\n0RnW9rlPNNxhfao6MGcHZ41M/+TLm49xWMRFOT8OgORabwGJaJpEwChODowS\n46CfJe3HqZjUldZemPJTqsm1luqmKupCRtePQvkbLTrG+c9E2NHoeYQXLFhm\n8o3P+1zNv6qnst2oy+B8CjD3saJG38IlWCH+zS9ARImcSEf33X3hfh8drR21\n2+91uFIyDMSK4wPFdrYG9U+vl7Z5uvdgnNEOYMZS6nJwpJAz2zxo51Gvbc81\nK9hOuW+hvQ2RVHmiuV8oqnHS/upK88XVbPPzJAYLYOHCOBvokEfb87yvY7VV\nC2bOYMBx1Gf0Qj55xP/ITvAIs2gu8bCYRWoZ6yAlTlf6wvK3bTUVV/etEJ3D\nsZilHT33e94Eixg/SjzgCUSKbAq5SkCBbnIKzdxlTLCRDI/sif7nGxHFYzLR\nKVFzsY4RKSUnKK1Uufn2lVe7IZJteKwUyuOaIPG2igO+99SAb0iuqk0vK53C\nI+3LDY4iZvTuUxT/kxb6+lmbVybHYJQnLLcdSAdP6ZD4IHMZkMu/YQjP3dNn\n1Iza55FUGrXr6BIAljK2c7GRRPds8LGVTgFBLS67bN+ShinP7SqYauXT1NOB\n13WAjLHyUXtq749JznHPwFLg5f113ys+cy2DytpTwQ11zL7hmBrkx/No+aef\nZfd1\r\n=ZgkF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7f60396fd47255be13ff499a65624914ea8a46f3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-rn-datastore.5_1582550187762_0.1263292932875042","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.28":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.28","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.28","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"07e84337db050fb440079434bddb5fafc4abb421","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.28.tgz","fileCount":47,"integrity":"sha512-Wgj47ORwcxGQXJwVFPWi7ZvtJoLhkyp+rEXG0L4JkCWCtweqnkr4edHOp2twKOmY/aF8juOrD8S7ICHKh47+WQ==","signatures":[{"sig":"MEYCIQDDFUcMA+SESJ6+meZMvoe2RyrfORdoyPJHa4vNoKYTLAIhAO+cl1i8rpSrJlTmFqFxm2oyTDf3aqnC2aSgNoiTK6M2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVDEqCRA9TVsSAnZWagAAouQP/0LDcTbcHHxvkJwSHuME\nFDkw0Y4AWBGWCf1zqKAQNmx/npaPiElwdI9RuZ9dw48YohqGjthKmCoJzXMH\nt2hqXwsDHpR2S+ha5Wpn8VnarFU9YVqklCDNeoiwvg1xRehTwgyf5OhNT2Gx\nra3ZEByxXPUPJq/NeAP0l/P3+YeDRfa3s4K0DKGwWT/BnvvBpMCwcWMGURNf\n++keUlAsy2Aj86DdRL0pht909dlb8DOXdJwdW433g8wM796Yz+syFkcRHE7e\nDF0kB2oDFTGvCZYh+8gRX20dKAUA3N4AuIjSnU+5ttrIOYrIXKdsiqJuUKR2\npDjZVMXNq4LoDMVtQ6nLKgb2NslhRClHRtnUpFDIFWvvjIuqA+uZDeI+ttg2\n2TDZvFfPmx+Lyhwqh/gCzQC9roqNlLzu8nPRucPPdIdcbKQg2IH2FNl+oxls\nBotPofGtPuEeOjtySjYaGxbVZnk2xkAc0JsdO6Scph5aQr6UdyNcvwXh9e/2\nBqlxi3RFn5cYx66LPNsxXVICXMSoG7ntGvPJC/RHFzYGPSzM6+prp5DaAd5v\nqff5/WkVZmiVgHwWSItVC7Q6GniF0ZSjDOE0XgKuqs4RYT1Gc0E4udX9wZMd\n/x51CU9XMtfyDmJg9jE2fsHouW1Rd5pf0xz0BsZ0EZ1CPM8JQGuEg7Z9LmyZ\naShi\r\n=lshP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"73ef849cb6fde32a63d1ddef7a535d4ad02f98a5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.28_1582575913578_0.4517963345605964","host":"s3://npm-registry-packages"}},"1.1.5-unstable.9":{"name":"aws-amplify-vue","version":"1.1.5-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1495fa344a13c04ecc1b6418f38863623d3c4422","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.9.tgz","fileCount":47,"integrity":"sha512-5et80zTbQMWp4MHv2NVWe8/oKbepwd0JrAeyKOmVZN45md18GdlWswm0ERGgBUzHTnlJYBE1n4DGjY4BPCc5VQ==","signatures":[{"sig":"MEUCIB5P6OtoT+PZ51lbXoP9qJfL+7KLAjd+1rBXIVNEoQXaAiEAnShqHBCwuPfD+xt1x0umMiixeS8bKgvHX1zAGZ0wZA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3868057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVS46CRA9TVsSAnZWagAAjNwP/1Fx6U4dKa50uxqJ6sc2\nS830SGqZRAlnPxr6ZBM7d5uTg4GGV5P/DaNRlVKdtSAgNyEu6bxSIo/IB04K\na2XZZpLvhHihSQjUPjbW73TdHrX7cl8wULqEJ4UXCvTjyBgXJDdAzP+3HxfR\nA8CR1ga8IKBVdNY7vMbAEt5pEE8X4id4ELEFINXOrEOrIo+9SPgSqJCdpssb\nevbfTUg1vpoTSEPuHs3TpW3tF59kUwE23CGOGSq5CIXf8sUMI3kK4C3XRHv1\nr3dYAHA1tyG30YntXp/FA1xYel61sGslP0USNGStb5kmwKFjafEAgcTtHRr9\noOmsFn7VaJxT5KrJfZcHA0lYlmUUE+12VNEb9JVKLQxM0qmSMOt3rO8ZYHFH\nVmshmxHKjh6PB/uUPNmFDq7ezjeBuvHnHfgWRaIs5LHXI/26EIaw6I7vi52q\nVeV2dSbfEkDlNivGf3g2MBBkwaItKXlipjkqph+iVLzV6QercKVxjA7u18jT\ngYZa6oqQOPNki4B2V8WhXeiqKtTWiv0bgE1Rm+ogICmoGD3kAtb4tSBxrhc2\nvwqe8/6UqDMmgYVdN61lglUf0FyayOTDkR90LqW4z/ankncnoEYTjXH2bYJY\n14pU6nzakw55WUKYZ2Y2xOugPfTgz7LdzPPsE3G7aWtDNN8YN7uTXSz1Jo4L\nZY6h\r\n=pT16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ce7ca96dd59ca90455d17898a205b5dab05bbfff","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.9_1582640698004_0.8038472210704597","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.30":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.30","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"64c885363ff7f1789d814099c084691008d38b38","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.30.tgz","fileCount":47,"integrity":"sha512-jvTWD2CW0qRV5Z/JcfT6lkc/9r4aReUGP2Olcj74KDghrNfKUNZk8Eps7/DqiLx6qBOIiivsN56uroLbuCflMA==","signatures":[{"sig":"MEUCIGZUNAiNyzfRcsZyp3VbzKAPu221lcYEShEA1rfjlNNEAiEA5lyXLuEic9e6UyVvJCFP9XolpjdAAOijGs+8rtxUpIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWDw1CRA9TVsSAnZWagAAZc8P+gMhRNaL0E4eYnhHPYUu\nT8kdbM60yivDnKxtA6Qa6IM6/PrLRUYAWvKJOp87nwVaXKzaI6yuMA7ORp/W\nO8N3qvr0qSnO+DC5GTOQoIc4Ql5BuRBqXP1/mpW0OlkqxqKzfb2G3GZcopPa\n0fugBt4X2CiW2mfVkNW50V/pnm85uajNKfxH79KjDMTY6MjV6Gu0b7vxmqes\nwb9owlzBINU80kB8OsX1fYHRa49RmKiUgVEnb5//JGsxFlV/DPoHsKFTAA52\n9BULQ6DjKD3Wwcm+Vj88Ghi25fzvyk2bxrzEqi2yjJJ82db+k7V/eazb3rMr\njlW34a+AQYcq3kMhcNQwJjx+evDptPmaN/dH3iDw9CjPe3jtPrt1aCjoBa5F\n3R+Sm/88tbsOOZ5gRDaIXvxFi4KpiUFo6pxq/IC7+BimgQiFFf+11TT6t79x\n2HWVgnjIfuqQoRoqz7IwnDAE+yVqtr4NuAmHvafDUz2w7gQEJ4tISuDDcBn1\nc6Kw3qaSiQwAJpOdRpDKvudQIsJNbwEAH9v6LsM1cJIWbhD0sLqS0rhmcu+P\nOPm93qpBR1aWrg3NJlKfhbsdMy79BE+JnOGJahz7LsL9uNyzn8J5fsOnZhS/\nUdSNN4uVOjE/tGKxcdKfvW8j8LdZETdIwHv4rxao8toT4ybeBtO8doxEAAGI\npZVg\r\n=YlMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ace9dbd062d243e188eb72a4a121e20ad55a14c0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.30_1582840884803_0.9345438043846563","host":"s3://npm-registry-packages"}},"1.1.5-rn-datastore.6":{"name":"aws-amplify-vue","version":"1.1.5-rn-datastore.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-rn-datastore.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ced31adc9e3025156217f4d78de204f2bd0769c2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-rn-datastore.6.tgz","fileCount":47,"integrity":"sha512-LNmdF8/C+cXh15jQPtkkpdE6M85mw7PGbmxaZlq8mHIN7tUcDxxYji/bABh/y5zOx8t5dwvi2jCyqsW8abz9Gw==","signatures":[{"sig":"MEUCIHpiYBPdT/D3ZcpQoIz47iMbPhjnsjt0V6cZuPz2lMLTAiEA4/dMvI7YoN5Xe4xGDezEOBbhQWc+pQw5ZY/iWKl/XPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWD1HCRA9TVsSAnZWagAATQkP/iU2KWBLAAP47u14UNGT\nqEG+UuVYSCJIyTo/iMsU7mf16xoeE3NFjLgvTJuzLg6E9NrzOurffwkLNh26\n8HBE0fCBHM2hvbF3f602SwEPoiupRXeQv86flW2LLe92rqNThNcWSz8IG0ob\nhX6R8H/40Ih0hlPJgmkve+O1GFBDHTXdKeFk5K+tQl+wLBQGBU1lpSNEcqhk\nfKBKSCqYCYtLkSpD6bSIyfvH1sVkBr7D/ekixiwVC3j4IxoYr+Q+wmixgg3J\n1I0u+qv37wRRf4BaBnviMrK05MinylXqKp6wRvmjLkssZWjEHw9syiqifbV2\nY7qXPIopMHHHLjdXIKgAv+55XbBg1Xjff87iMir4DK9FodunOWk6fMyffTTS\nnepBZl8Q6XpEJKJJRnINsXbm3cPC4bPytLc6dF0a0RcAdZEGcvcufDhJr6Br\nmhIuIjAs1A/0Ktkz9J2FTC+5bI6qeIQsT3JB6V0WXBkfbYfWKCU1keUIcla/\nGYRFHR6VEypFF5NzAgqd7MwxzRkAQmB/7wF/Ul+hNqCxWQX+10aZq5oSOgQG\nHZc/Fth8GNJEKCSDQ/6MvvugvuhZidP/Ws9Z/jNJsgCrEdDm5EhTXu3yBd+9\nsF4XYAqu83NyY/Z1H6JH9uvmOLYVG32Kh+EmDFqX8TnauZpI6l5nfMzTt3Il\n39eV\r\n=S7Wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3cd2468dd0a278a31e6065cc9c6590b5a016069f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-rn-datastore.6_1582841158905_0.10046861208679525","host":"s3://npm-registry-packages"}},"1.1.5-unstable.10":{"name":"aws-amplify-vue","version":"1.1.5-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d0ad3b927bcee2b2673c5a9e5d9a3a26b93b4ce7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.10.tgz","fileCount":47,"integrity":"sha512-T3LwwyAFaJIAEvSpCpn6SO8IQfnvIlYrg/ZclH84bUExsdL2FNQ+c+43eO7Jo6rpiCAk12Qh4PppO/3tc2cNRg==","signatures":[{"sig":"MEYCIQD/M+bR85GR40WWqrW8ZABdj3xaiG9IZtaYOS/deGAhswIhAJ1KULEurDOkoSkd2Va+ke5qz3pk01vXOC6n+MX4DOpO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWG+tCRA9TVsSAnZWagAAPBkP/1QnOXl5Aisl8RXHpUDZ\ng4hwg/SwX87NgUJW7rrtvrZ1vRWwj+p7T5vry2YauPZ3EoA+GDU42DRDgK5C\nM8Hd8YEWGLV4ervbKvvGJ9sFvgh4CJbvsbghNMLqIrBa1pHOuzSJMqqjNweq\ngVOscSeWhQI5cI+0enn+sXcX9uz9Iwa7VzhVovLdcAbOV94Q1SXEkXUv1xki\nSSkitaFV3C3GV7Iwem+71Et63cRTQ7+UEAowzEMfibX8mru7uhm4/PCmIOwn\ncpXoxuBjgH6rhCM1Bm7YtO8NzE2rTH67MZvZYeGrVy9tLwnMU8evJsv4GPe0\nJ2LvOyaGUgqAogT3apJsF0A7dj5SubBLeZDT9JpVXH8wuKdApz0xdWBbqkB+\nNE4CAhOuZI7+ILIJSF0dZRVJ3okQWC1i309fbOLQWVE4ZQubTCuFl+buk7wZ\nrIDcQ5aGKPQbvDqpZkis/UI4RXKJxsHKLmrTEgA7xH/oMOGoaQSqFycj4wG5\nP4LvGFYZO6vOHEL40+eGkzj4offCgM7K7CzBhstxYlb9WtR+SWbdNvKxXY//\n3Iau8KfCAvt/c331HNuehyQt1AwbofUp1mlo/3hDJsEUDdwovbqu20/7lmYN\nk8Ma+CU/3/VgWiZ/burq0PAK7Aq1yeWxm9YhXBMKMkECVq0spPaUDJLbBNrZ\nZs7l\r\n=dyt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"14157f7c7d3e6aaea43fba0705c9c8346755dc50","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.10_1582854060875_0.7768391927666918","host":"s3://npm-registry-packages"}},"1.1.5-unstable.13":{"name":"aws-amplify-vue","version":"1.1.5-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.13","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1e69eab0417bd0c201da142abd7434b5dbbefb2a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.13.tgz","fileCount":47,"integrity":"sha512-E6vR9Vt7hHuXkYZnYqfdzCalfX+uhzO5CIO2l9c5xO5tlOHdgHkw6Zjdt273cbqIcOH0TDKHqods7QkCKdXAfQ==","signatures":[{"sig":"MEUCIQDjgMOMW42WD16wCeiqPD0ossb3JVYlOoh/za0JPHmOZgIgOU/WbwxIthTYe71OX2fkOFjl0tesdDmSoSJRx2Ebt1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWTecCRA9TVsSAnZWagAAmNcP/0L+21JqR5Oc+qIvG9fc\nq8C4WNubYWC3eNFMNVRsxG4vsI6CTl5uiHpZEyY8n3ZzpxUcZi/eNIk1Tu0Z\nwKEqT1bHCf3Zv+d6fdSGJxlT6ikYETKlKSEnEvEFU1lQiBKmyhN7tRkEYtyV\n8Cg1sE5O6Y/thi0Lhr3S7Yfij7kUtUDKQAr7hslPqiH1r/gdH613xMT8XvuN\nn8efEMyhBCwlXE8Fnjy53qZBf/CYTXkKVJ+hbrrH1Fuhw7ZNpczX20PmXffD\ndgAWKTU/60iWRHTztcpFsdlmh5Qj+PsSGJncp0MnatzN3oHkUuUkZ0UMw0bU\nSnVDPvZpT+UyahfsVZ8wnmuSv+Vuu01RcXvldfi8G3kUrPcmu184EH851gfU\n16tpzBRVPZxkCKvGiULmHW0AveOto512/ns2LocP5yu/xcQAy07poqBpNH9O\nIJhFrmwS9EWqJWexSabsRJ7fxFnVtQ01znQuo9MCp+W0pICMPafr0qGZKgxy\n0IXcV7ZnJOwWNzlufGUU4GjDzZlP4jAY06/xXBB+ncbqRNSUD1PUbSPo6Mdo\nooZueJpTRX3J0vfzawoLFLCehCX71gntRNczu9KfpN/2wxQyVan73JQKXJGt\nDcHfeXsIV+O3jTKublwQy8IaA0XefUl4XFl71GKnVWL9FdiPvrD647pyPaev\nljR/\r\n=7YKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fedf0b331cb8e2263f0c7b7ae57bac5d8f69c888","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.13_1582905243494_0.18888459247526002","host":"s3://npm-registry-packages"}},"1.1.5-unstable.14":{"name":"aws-amplify-vue","version":"1.1.5-unstable.14","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.14","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"72a4709f63241b34ef39991fcb2754a649950328","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.14.tgz","fileCount":47,"integrity":"sha512-dooubt+gqPmy1DF5D+ZD3Wn/AiJltYgIZy63igQtoeQPc/h0c7sSNtKGlk9OjpjDdiW85WlvS6JOnDJtCh7LLA==","signatures":[{"sig":"MEQCIGeHj2Sw9ttxStHMCEsjoBk441PwIsW8qZRVK40Eo0e8AiBLne50xF7rHcCJ8GFdR9yeahdUi73BgzeK/aCOViSLoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWVbMCRA9TVsSAnZWagAACsUQAJgF0VZnhI/RWaxILZEn\nSCzhjg6e88fmMyxsMeDzanYVyOoVR1u//S1/1qjrhh44PzhPlnVBDoztWjHx\n3g5pe3gxjWVrpekyi6t9QdRlme5Q1+b6yrbQFLRgr9yWBwutVYfyxiW12uQx\na6TOqvZht1nHOqBR+jaKDrlArW8n+gmPTrzNsq/JCDn9o6nue4ZzYSB+2yRN\ndNAojAkI6WuFBEvraO8ZmfKxU8FF38PUlPLLxzMvwowbEiylJzPcGFQb0oFH\n50hUih7cagBQ4Gh8DuWHHGGH6s1x8J2dL6BULgAcJh3k9Z2sHTPkYMkHmNZ7\nJWwqvk4aCGf9aAAerkz+HyE3hhtPMC7tyb5kfR+KMA7DpnNfM4XaBlkSJ4op\neQgny7KJAO8qMC7T/8BCX4LsSGD4nmvqls+l9KIr63HoQ3jUrO6n5niamzB0\noIZ+02MMCHyk5JBxwSO9+rS8pgaG5CITNVlHWMeMdwf61IdUP9mibi3zTz8t\n2IF+a+E3pLr2FE3m12Cv6STqG7LsOYkBCcGQLwnpgBOsXA8zxvjM8q76aQjG\nc3zd0XfNtaCqH/3jTt2qxMq/sj5zxlpWqcDfCmU7IUDSKTNY11K40GzdHXg4\n0yIjBAVF/QNJPiwWruamRZwKonXn88C0fMmcLY4ForodSVrCAYXBdGwL2u0B\nBRrt\r\n=ITJV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b2a22e53532663328b200761ce1ecf35495acbd1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.14_1582913227650_0.7923353171146277","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.31":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.31","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.31","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6631b8d3012c138c12e38bb54b56fd636850bbda","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.31.tgz","fileCount":47,"integrity":"sha512-7vFSpUlI+ETbWa+GoxaYr+eN+FaViMqJvt9Qy1JRZfKk7xbiHew+retEQ2KyU/yD9VMLH6tBpsTGQ65RX83R1g==","signatures":[{"sig":"MEUCIQCrtK+DbGAWVrCVQjTLwUlLsNT6CLTCi1OioOd4y+D1wAIgX2TPynzaCJUraiiOTE82lIAFv5uk6ByZ3incm+TKIoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY3YCRA9TVsSAnZWagAAp04P/jHhMLHNJFe/78poDiWo\nYto/uxy8nVMr12KrTj6/ngWcwAC7OB9eUw8a0a5B73b/iZ2WGo3fzuAwwE3o\ntmS+he2z2b4ggi2TJfg+bY/nzorcdMTuP4DG0c7DoImxMps7kiRXI3m72MRQ\ns8ksz2kFMlBVquGmA8VqL6qWsWMBPnuek1OCQq1QNrjo/XaGJkBOqlSQfooU\njt8oRg/Thth9H7pVcUtypRgotgIUkP9yEDB+YJKAXplLb9tibr7a+MzeptNE\nUi11pPQWPbVTyfOJPADISXyLnd7DevMOanNmTMuVE+BkQVUw5Jy3f4YyfhXH\n+2NFNDiTjvxxHQ9DKBAgzIUuZXCxdrPrREzilVP7SMu3GRiMAi5dfO3Vi7WQ\nNulqxMp6laK3ltSkmff0CnNw27rfNByN3Hv3v4XnUufOB1iqOyrZK/JOUOw+\nSSI5VB1Eo21LDcAl3cx4NS7LWas0WnQM1r6M5pFN7L/X0YC1HLEWwbBuPqPU\ngGnG22WFGOxoXM6flJLBPe7BPcIsr7maS5Edaxv0C1cz35BJWaLSbWi19KI5\nV0Iwjo++8CH9/VIbPvBdWYTfyQSZwQd8STUq5j1ygpNkCxRrQpwtCi1F7OOT\n0aD7nYQWVhQshxqaT4LPPckrtIybfTBj8TuAJvsdVt/ZyNkysfmEs9FVcnyI\n/Oar\r\n=Fu72\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6e3805b600a5c8dd4eb1c09f000a660504003e8c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.31_1582927319483_0.7730859105495684","host":"s3://npm-registry-packages"}},"1.1.5-unstable.15":{"name":"aws-amplify-vue","version":"1.1.5-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e82a4477f638db10f99646acd9f52165db2b54c2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.15.tgz","fileCount":47,"integrity":"sha512-wnGIE/oFj951o5Ph/VKqzHbJNYJQzMNmyo8c37zRBbqKBF0R2F686Ds/QcYHPRkkte1kGojdwQeyrAGDbWtTsw==","signatures":[{"sig":"MEUCIQCjbOWDRRFhfaxj0Ev/ubwHp+kw7iB+1D7gm7SNZVoeNQIgTPrgosIsBQNHm4v6RHE0t1rarK7+TEJZ46IY4q4ruVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZsGCRA9TVsSAnZWagAA8vgP/jWtgp6HNKfIRncluXjA\nkKuJV5vSLnfvF746OeHXA7rCXnUv/5YL8U+rSKa+Otc+njKkNY4X8sUI5IRG\n6doTVun+pNPhwrHxMlmhDOHSN4YAM3xAAwOjqLKADAEVV9z3IRdWNhjaTzze\nsA5cgYvK294v2qjXR6PIRMH2lICu2ijt770mEFV0ey4676M2LTuC+Wvzbj+6\n1Jdk2H3lXmITXvG+G9u6dWFJxaEldgRRMCKxWAz5x4Ef7gShqTu9+3vBjlUY\np4LN2fbmSGN8IBXfhTv1zs8RXcmfHHEG7gxDq4E/FLXSYr6PDQOx2Q0Up9bR\n6Mem6fnnkR+BHBBeM8fVJGnZecJYg0ojKbiTXFzioDXF7RSULY5EuzqJZNpB\nmlIxXo3LoYW6lbiUr4//YUKsYAdtnVpGSTwGfdcX2UdFV3pEnEBUgMFbNCV4\nD5pdSOEsX0eBzS7hn/YlIVHkpRbNMN0lc0v22ZQVhvwpjgI7T/31YEGXdCC5\nop8Hu3x5gOJKAhNfYB8mtqOhhon+ORI8QFqONQPV2p2kpcgX48xN7hToh3fm\nlLIXnVJ329jeYtVGekRCyxEA6QsFTdEjsCsLYDHYLMes+KgWiQW8xwu6yO6k\nYKEcCgLT+yXVe66wYV01GPnVcIyd1A9YOL5vm5Ckbdi6sZka7aAyMfI1Nc9t\nepbc\r\n=hUVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bbd02714aa84dc6bfcd8b3c4b05dbb285b0bda2c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.15_1582930694165_0.8590178964935842","host":"s3://npm-registry-packages"}},"1.1.5-unstable.16":{"name":"aws-amplify-vue","version":"1.1.5-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.16","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9122e1a971d0bc434641499f79039cf6240f1ca2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.16.tgz","fileCount":47,"integrity":"sha512-pjob4nMH3D6ZecUN/0sb2pssuCik3dzG3dK8HFfViKhnkRNK+w3Y3WZOUKC6oGnzPaEetfiduxhsihcVD3LJOQ==","signatures":[{"sig":"MEQCIHUzNUYU4rU3a9Lme6LYbUZSH9t5+hohqnDZGVIibJnuAiAM9GGIOR5BkJmuGWPczJCAIKF8oZFaANFTDZcJ6nmnOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaPTCRA9TVsSAnZWagAAa+wP/3cm/mjCIkqhWB53GoaS\norhQwSBoFfc4KBgQzEq9csEsWdpBErQcyWEDDlr1FUn5p/Ush1x0n/k0WLFR\njrU7sLLKm+yzvq20CIfEOhhwn2bLzqzzi6HKjyXMUbAeZTb2J9qi0yIUx6Ea\n2rlN4Oo5UzD0jal5EglEpW1StpFytKd0pvEsJ98bxemgoUCnAYyaTW0DLVB5\nMR/eqEKPVl1IJti6BRBt3IGoG/MhAK6zV+6n5GCRwp/Qxku3Bj/8oZz8u9kO\n5WsKl2E7+5zMupm3qkasW1wZI66NeF5HXDkossxHr9GULU4CnNEdgG5tHPBv\nI2ory6MqDAJqIiiFpNHBM8oDWp/qluBATmVf7GRBKpx8f/XjvZckA64uDwpz\npej4R8Lx4Nga1mDaCKmRs7fmYXTfJ586f0WXW1zdlaifFbPF78JB7/0CX4pj\nH3mEs/H2hzDDWAl7kVP+cTcR5XANGFQnjKQdiUgK3eRWaVTjBlRxGiRZPyGU\n9+5mikgtfXTnH3oM0I9PsuZzjlOTkdVqBZ/U96VzWXQI+GJlAEUmDioOTy7Q\nvJJAtTtvxz5qNl8ShPibwpXw44JBi/mYMaPIXXVGMNCQb1Gt/HNKh4kQ6s3T\nlQ1jN2qw6ljIPR4oaUBiTqNOQkGcQ+zm77XQswd9TaMu1LEjeWJGMZvKZIrc\nqi70\r\n=TfW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8f6acca5fd1da33dced154d6286700668fb83106","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.16_1582932946762_0.577160807928091","host":"s3://npm-registry-packages"}},"1.1.5-unstable.17":{"name":"aws-amplify-vue","version":"1.1.5-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"60418ac881d84293502717987c2408688cb060af","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.17.tgz","fileCount":47,"integrity":"sha512-hBmN3nKR/+0s+1zLkY44EKWPu8nxPUsrbE1ieHtbh1glU23U6K88RMCMHcP1lczbPG2pofH2ML3QFR4kAZvCNw==","signatures":[{"sig":"MEQCIAwqoxcB5W5zoBvV4kQRKEglVtdvtDBYVwfGNE9zEdVVAiB5puy6vuhfgZ9YjnWigWZ2AQQTEv1EWOJlechpAuhU2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXuPYCRA9TVsSAnZWagAA6LQP/Rt/pVpXI74aGgHheLP4\n2WKiG29+A/EYT3QWAVsp7kGV9oApFEs38LRBCUuHObi2MvpDBFCqco1uFFPB\n0RNbmLSrBsg5RdcidOzzDxdMquoPXjWRPEbyR35DT4/NdkUWJDey7vYpy7Or\ngZLJFCl8WPQ5jCBkwoNCCpUvkPYDx/7qRCNKY92ItLcC3Nn1xE+a4euDq9vG\n7oImCgz7BwZ3ipDp3WhExtZVhwIJK8jcFSibJkSoz+EkPkW65FmY64tOzSvY\nGzwDtIKs5DORRKYs1KpGgQLmdNpX7AyFGWWI7GyDajDPhaCmyl8aV2ZIOUXY\nXCKhfVtEupZM88VLmxgDO3nzAvMePan81WkXoLz4GtipuBOC0e7zf4IHmVej\nXjVU6AMWgwK5lW0ywipieahLnbL497xbgmUrA8xBFCz9/z2KmgHZAvo5QD2M\nnroPvRntHpQHmS335BonmjA4s37s5r5yerKByn5BnOxpCuzXTaLm9izOndCp\nYkQ3lGoQ4992wbeH1W0FMRbesMcnTpuAfq7Fh1L8Pyd4UumVjsDND41XVACS\njNkD3oePn9eSzbwW0RPphnq41SEpW0O1lojhbOS8bpdFQSYcDGyZU903D6kv\n2WSZKVEdAyQXUDnDpaQHjMNek2c1xSNxWKWS+K22W/8KEx8zT6rU7LuNPY69\nrGfA\r\n=qasi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"44b4faf294088cee533c8a5a6ff3b3d1334162c3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.17_1583277015845_0.07628605803027644","host":"s3://npm-registry-packages"}},"1.1.5-unstable.19":{"name":"aws-amplify-vue","version":"1.1.5-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"dc44341694313806a286e06aa730dee38fa78f3c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.19.tgz","fileCount":47,"integrity":"sha512-5+woiFBOnIyi0YEGSg176E54ZD6BAEr1ccSYBlKCAWEEAislWfgPJu6rtJBXfc6NlVZZ8W5MzQeVDcKx9C6vpg==","signatures":[{"sig":"MEUCIBx1meLu6QEPAf2v8mfmdCUBXzpUbEOEsAWExvzkqG2aAiEAsBCFSsw+q84+yt/nyam5vk/sQ25xu5uZ6+ZzkcUHkfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvdICRA9TVsSAnZWagAADYIP/itEcpXpH/LiK7gbRHfM\nVTFSgnX2WDQCLXevcMXwikMJ3fsziEs9p0bHWH5yzEtArMMxoO4v1oT4SqF5\nWz7bHzlWl2x8+xL264Vgiza0A5z9Zc5OuBxS9WwJVGH/PLdqeXcP39DJ+Tqa\nJvJElqW26wfw6QAe7zvkzDDsqBbYQEuddpft8nhxQiCxybYDRC+IjBuIk14X\n1ICQaZn/2gUq66n00XgyjXJzd05Cr/TcgDCm0Rpn6FoDLR4DZeEz8GKmtFxN\ntrTZ23JvKgt/HaSMtjTDGw0JR93JydEOiRnxpRLyaXcsgyaFqPj+rhdBDsJB\nioQrhd07BFJ+DauItGLh0xQG618+ZYqL4ysrjolPp1i6R6ACFpRdUhETopjo\nHKVfW6GXa/crHLT4AFh2baDiv63ZFT7E+H0ATLi4yOrcuaqT3jej+pZp+ciA\nyYh5LdGpHD8+IJU2tDkij3618XNyM8WMNOIG0Aa3aYb05w1iOOI+EnIn6Apm\n5/eKCJ+g/neXWGMtXKPUJXmz1dISF6w5BawH/F3XGN+VouT69qPbeUdBgvKs\n2S6Ld5iyjA+SVb7XswOOgzfsl43mUpWr9lU9MB5Cp2ogKLuZlQ2sldP47+n4\nf4g9i/Z/lyWShqJJjnZ8LUapPoVgAn2P28e0UqamlQ4dgA86m9FB8mGWk4vE\nTsfG\r\n=d7Cx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fdca5541372662ffa1d932b665c481a78e4ccdc7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.19_1583281992384_0.5057397112486595","host":"s3://npm-registry-packages"}},"1.1.5-unstable.18":{"name":"aws-amplify-vue","version":"1.1.5-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2c9a9de2dfd6f7dbf5045c73e6ed5f01cfc43abc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.18.tgz","fileCount":47,"integrity":"sha512-WsMtE93tuwvd2XYad6WBjgQ8ubkLmh5l9FRQOHd903ZOP6W4hadnhq97/gVphiCXIbUO1cZQqlKskKgxKbFAAw==","signatures":[{"sig":"MEUCIQDfHm/fsGTYcSplBO2iLIfuWmiEfJq37W3clDvxQyJMkwIgW99MjNWJUNhN21rgnRpUrJtxTGgFdbj/0KDmZgbxWOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvj9CRA9TVsSAnZWagAA/t8P/0sTPVRhnWo0l+fwnLmf\n3BApnNV4T9cxbPogdNlW70onfMBTHtRdPTe4P6ErLLp0svdlX1MEiiXArCut\nHwRLPO7on9C8hezSKEQ1ApGUBWpF5PZU+h2jbs56Cgw6xMjPtCHNBBaQTIz1\nln8oxbQpzEg4/+xgDgQTBgdX92pD6RyZPQDFq1+iclgsz6nRydw9+LeL8Lb4\ncNlvF6fgohdsL0H8Gztiled1ocu2MyU3RYPWSQm2COc4OmQb2ExwmwkNNlv/\nFWAl13w/w0XGEOJ4b9qZ0UcitQDWwJe88T7ujWBoKqLVLAqKWqD2RdyaA57o\nO7gFAUmNe9MpDzERg3tvgWmaIfePl5KynCyS166GZHbvOq7iWOXZLakf2aKl\nqxK5+Hfx55B64eLJaTMOGcqR3FrmNBaQIpqT+yRFIGx6yzWCamot/PkCIUmD\nGAHeB29c39+3igXTxeyp+4Sjm7vlZ+Ge0moK2CuSkPhjaEyVL9/5PDGoEJYJ\nmNW2BWsJh2NIaKyUvQve9tp7Pt8j7wMGa36sqP8Zl45FFoxGEAmhNGy01d70\nOadaMEdwyDztYEsr5LdGr0BoINnWCRwQaIwUCITdm0wfimNTgLWGSmuoDq2p\nLRaRvb3ES4n0Plda69POuFBhcxFH2F4HyllkrINZXgxdCx+U8FhIChPqLSFn\nAo8q\r\n=aAMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"69d9fd46d4f935cb6568f10d6598a94b36b1a51f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.18_1583282429290_0.19541644072880038","host":"s3://npm-registry-packages"}},"1.1.5-unstable.20":{"name":"aws-amplify-vue","version":"1.1.5-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"779a536457d156f9471d06634c55998624e7e08a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.20.tgz","fileCount":47,"integrity":"sha512-7qw/xZwO7dguXLFJam3jh6wITyIeKI4BoRNnb3JYsNgB82EWe8eaQ6ZQGZneaTtCQT2fKbclP16k5kBRDi6+zw==","signatures":[{"sig":"MEUCIQDFIoH+Xi0tJCgidhIErg+0HsIc4Brx9TeK8JiBdLWpFwIgHQO9xCiQu2TUWfzJ5di4d8wShcCzaQbwwZdTyr+6kyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYENKCRA9TVsSAnZWagAAtjUP/3xq3bU5qIL46Q5hkhBj\njlfK6SBDUSKF5vrmRRdAbgAE3P4xIuQ0cwxhqJ4nreDNNRIFBMRQabuU7wtu\nhUqtrlYzLobbQcqnPXJk8ogXWmDpSZbMFic0sAwKn3XReSYZ7uCS+FUsGqKy\nDQ98WPIam3DIhpYIonGZ0P0PteGOjYpPIGvG23NbFcy0Hv1pVsgSMi5Lsyi/\n0dvjyg4K0oHcQHFzGLQyqw/K9TVXaQ2NxhJOgYz1p1YTjcvR98qssu1vMEF8\nO5vz8DI8GchmcLcJAB95bDcubVxKKEegUPbeJLomP37XcrY6OXz533U4meeY\ntFG9ugsu/yt5biiEuujqxMP9kujRmZm1HyeyBcrKzlQ+nCKqkVaay7SGArgl\nT40uQlQuYFN5NfcrK3xzUR6iO9JojOMHcd2EOK52D+mDpQ1ToSCPJC6DTprS\n7C3lL3TlWWgIVf330VTMwh1/Y4qV66AuBs+AtJe0aK21SC+NvSC2rCQsx6Km\nHGjMydWdlB2W8SnznmgfJZWvmizQu5BTiQdx+zR+DUe8tbQtm342KHm61IbA\nijngaHoP6nalkZL+PM3Z2+dMkYh9asps2+uJEqEsckPGDflBhxvxDCaLCVGU\nhVGFVrOrHlJiqUOOHz9T5im4RSUk2A2lslA+0c7vs9RyLdiV8yqDbgsSSkIc\nec/i\r\n=uZJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dae4824055dce2112c0815750eb19a241f2b39e3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.20_1583366985874_0.03262877095920902","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.32":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.32","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.32","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7592554425ecc5d76016502fd5748cc498d31ddc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.32.tgz","fileCount":47,"integrity":"sha512-Ix+hsIB14NDDGFcU0Gs8FX+uW17uQYkB4RORSClvd0tS/TO/HSmvASL9OT9FUjWw/UJZtTbLn6sr8ivfUpx/qQ==","signatures":[{"sig":"MEUCIAu8ki/Ln3a1izdaVMpFOwCKyA1JtH2la9ExZwxlV4+jAiEAn8NB5tFQk5+RDklzNhFM40v4NwCbFOG+H52qvxVATnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtD5CRA9TVsSAnZWagAAXrEQAInCihfkVsqpC5Dvx2Of\nR88sM++Typi0sr1vKTv5v5naKj+a8Xd/wNDwg2rC3KxSaZJ2vWBgagAypnS0\nEvEALQfPqcnJRBov8DcpRZdHaIMRpQAKs9NnsHW0bzpFubwJOxR8ObHA2L7l\nTh+uM2XZD5oylHvCKgerfKRBYKYY6cSADK8BO916xoFwPrGT643Zc5FuEule\nFOZFP9bgSpr5Wf3WnUQyzv5U/FDCJztM5VAFL83g9a0nHmttB+VDts26qYDh\nFFSlh1OdON/IV3vYH6sY/HUcwT6LQB3OWF1nb1/ZqV1hEgFLmk34OR+pLwqP\nM2rzS4p264sUTzmmMo8D0Cl3eZEs80wf6HWNxB2YzqUqmnRU9kJee88iUjn1\npRapJI38F/0n7aG8k6AqqyAsmwZhu1YKwOvEsAX+eSgb7sHV8HyQ05K4KQtp\nK5N1xJ8LGKcXd4x5YkL+lzlFj9byYiqKLPck+1EpJ+iFvLjTj6eCU1cPS7qa\nzXyPpFsM8Go+MxJ4KuVD4rwTWMSww+C3FSAnkLHnwUdUm1JohYoepmr9UQmG\n8Hv90Wxo/6KxEbC3D8YpRXgjBGIdiEuz3jTTpKwctKnI4MqlISRzZGMLPpN9\nxtE9wbCWp1VoCGnKHejCTEvXtg3ynDS6G5JqFXnCWs8pjHVqNRUhCK5bjt1q\nE44u\r\n=HqCK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bfbb46af6be247a9aebd934e0f88227f621d7d8a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.32_1583534328760_0.9967977357681113","host":"s3://npm-registry-packages"}},"0.2.14-preview.115":{"name":"aws-amplify-vue","version":"0.2.14-preview.115","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.115","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7261dd94390136685594a58435ad4b528f3886b4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.115.tgz","fileCount":47,"integrity":"sha512-QwH9FrO63rRKpEn9JgA2AyxxpScFAoSCUvg6gM6ZGmCa5eqdjbO94ntbRox8Ck+BSPOrwjUsTM+0WVQffvC36w==","signatures":[{"sig":"MEUCIGvHFPqT322XlTJfhy3HNU0Lo1lUPpB4YJTYLO24rgtjAiEA0UxcGnICFzdZzndIOUukP8/DqHskla2c03ymoMfcgxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaTp1CRA9TVsSAnZWagAAvdsP/3zeCS5Jw7whxrzzJH0+\nmoIqNLu5qxrMxO79cC1UAxm7CZw1eEiXUhzHpYXw9vWI2jZh96lZG59k3SON\naHq8MGRBGWcS0lY/lyNIYcNCltemOJlgEcOaEDrmn+SvxXU8xm4nKdBYYpir\nvwsNWLRVcR45y1M29Q5nh0IGH/RJ4mEXq+b+jR6V3oMEFdMX3qZDXmiDtL3A\nA3ubW7dpTxaJKHdgp9DF7CaKl7HX/LhZkTaAP5dGIZTUhJ9n8ZQjTYLVL1xI\njQPzsNmb8oHAyOd3mUXBAc0G/jRxXZkxFkogLuHCjNrNWjM8Cz8XTJShU6Xf\nfjEmR9AEUNo6gVmUMTUWSTtWVOIKHrI+p1mdq4IE/rKmOTx/3SSI99wz3avR\nZS3oXiaPwz98fSK+Z/QpH+5+SnK9c67w6FsOHdZsyjCiDBitZiUn3MaETNdO\nrv8TmkYyLUfC462Xd2F15aBzhpBncq9so4NVSsk5QhgDQrPY/kv7LPQ6bfN5\nWSSkM/BH6TS3o9BqC3/oExLSV9wz7qQWBmQJz2pKnZ6lkOnV6+IugKmXfD4l\n05Uz2GAuEy23U1v4muQwTtUBDZTl5vVYF6n1co0scObdjPyuCieX48i3kPCr\nPFYUbpIn+i7o7ca+xY8teFWox6fj+ayVXsUZ5TdKwEDmMAoXdT1DfA7yXQee\nT9G+\r\n=CF2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f31cc78b93ad9e5785246fdb8ce7fe0bcbdff34f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.115_1583954549322_0.17072599879843064","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.34":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.34","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.34","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2080bd3b43a260cad24994275e5d9aab20fd357d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.34.tgz","fileCount":47,"integrity":"sha512-wN4zJQeJrl0q9z3D8dQhd42UpS2bgwvHhbtVoAENwJ8IVXsUgaZG3gXd7BKm9oxYPBY88Ak9AzLfUS9NGhgi1Q==","signatures":[{"sig":"MEUCIQCQQrGkeUyYjPNEU0WUWKOBUd3ZusS8Qgx5w3DMIYpsHwIgR9F4f1m4LyrdmThMFq3+Y/FEcy2hyVwoDTUE5WM1Bx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaVR6CRA9TVsSAnZWagAAIU4P/ihR/jbZBuM0YPA4IlIP\nqCPQ9rya+qA9gXpe4Z5XGGcdCvrui6ZYlR7YZxLUWq8+Cnj5OBa5l4Dl+N8a\nZXYYrAZpYCJpC2laHcO1DzKS9zr8VwxJ4S+AFZJGsOFzg5ceUX9azkj7uq/U\nQUebwQmLFSkK6z2LHtp1VjZYVaY2GRDzg2YkgssDv2e3IrVO+634mOPo75BO\ndLwl00gJfFHd3BsIioIx17aJhfn6SW7EYmY2K/rgSKvd5+18KMKFDF4lsa5b\nfQX3K2wZLC43t96gEOfZOJ6IsQR9kJXMgA8qwxKTVnm9KBsoNPBmBc2B67C5\nWBNuoJBIoI94lXjvE8bxXdkPYTttmFIH+tsKPri1oBZIm88vNpedY1zhuyd5\nyVVFUAGLSqThIekYuML55u8QClsG9NbPWdrUarPqsrxlwWYq2ouO02QcAxxw\nJl5l91VpS+8hDbg6sNI1z35iALKWEDtfE3jMSVVDEEeU6X7+Gw/O7icGmCD2\nSP5OpvXMvANZyZMRbMl3difx969HrdBbXzzfPORLbL05OD5qDMAS9bk5YCUB\n3cCr9bRnyzl4WQm5bYmkSxJyvgGBS1COMqGMXge2aTe4zk2aL8uDiJcV38P9\nu7Tval97Zps27za2LJBJHM/RqYX4+rJ9jXt4rZUxQEzZ6R3JMwTw+2SWZTAp\n1yz2\r\n=x5xN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3a5322afecd47737be385c441091ed0fdb1db05d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.34_1583961210143_0.3353688976995224","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.35":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.35","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.35","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d40efad9e7c80bb2a995f0d5ade25da6acb3cc82","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.35.tgz","fileCount":47,"integrity":"sha512-0KBOhvHlLIDytGFhjPIIhtYUvRUZHxWjGT2sqHNApftrFymd383nm1Tp4/LaU+c4OGLHoN/GZgtmmVVp/0sBog==","signatures":[{"sig":"MEYCIQCWMlN87lH+MBqDFjn3kdIyD8VAJDAGd+oheS7DR670aAIhAN+T6ekJAGIric/XaXPGaLbStggS5A/BZg06xb6F7e1V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeatGLCRA9TVsSAnZWagAABAEP/1D7clUImRSt46dWLkQn\nofRePoELmeMlezP2Vn0KbteLZjeNkp3fZ8jU9zVVCkl3UqkIl6u7wwu9RqVp\nsssyaWg1KeC5c/7mx5f+r0XOewEZSw9KyjIPo60mBldZE8uIimhCMlnxXWRn\nKjPl/ZrJxqaqOlRFJZiPhWOM7BMWoqsew/kfQoLPjm7p3ra7yb1s56Kbi8M9\nCAUkj4ojm8UT62fxJ7UAiq6l3PWhnWwzRWatYWwJEhzxloEP06XHgp3sw1ki\nsiY0p5uqKTIcVCci1QEJEFOzgKyWs383LO3dxFJhf20tSKWj9npWj0rsoSTf\njTNCs+UXK4YGw0n5z9EtGKyZWAi4vroZO07kTTkuQInIf0pzmoVbxNGQTp81\ntpmP55Ph5ZNXBhu/yrLxA9GF8hk4gsd6pBqEO6cCMCeY1n+tvynHcnlLJ49I\np7Rw/SD5buY7gNhIPjGd2llrDv2HQQNSGPcFXDm89MN584Miz3ZXecsSvONY\n8xWbbcFQPIaD8mMIz+bY302bJ6ji3gFi5SriWcCWmUx5dUuUQ0LONq1VeSCN\nC+V7r05J5Dt0LR480weBE7mOT4maXMKqFiEgwMENxkL9OyBRefS+PNv+3VCf\n/84OWEKaFlg3VhX7a+tvCDVofan+sYYri5LdHsYQiP5DuOH9k6RZ24Ewm/Do\nk2dQ\r\n=qiOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"342639b16d36ffec6ecd171d7714d5f93d51db33","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.35_1584058762027_0.1828714364513795","host":"s3://npm-registry-packages"}},"1.1.5-unstable.21":{"name":"aws-amplify-vue","version":"1.1.5-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"173311fa9360b8cf72faced75e78df89221b23c1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.21.tgz","fileCount":47,"integrity":"sha512-W+xOOVgAxSZ/vUHA6oiTZs7NdvxJ7Pc4qCR1QrZ/cgpHIs0M9DYGsOGHpJMH6ZSO4U5FwWhwlqLkO5LljPBwMA==","signatures":[{"sig":"MEQCICyEK4Bf+Cl0p1duwNksF7HegrYV2lJzblHf5HwG7wVxAiBX+HnX9OSsh+Qc3WHiw6EW4lhOI5vJXtCzeNLvIVcI/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaxP9CRA9TVsSAnZWagAAPBUP/R5VMthGiVHko6iu6VNu\n/9kIqRK/z20AcBoe6T9qs5RglE7qtc6sZLP4gcCdAnipZN/k/WaDd6e6IP+g\nurPGH7D34F9nXr1qXXY6halrpykEcvOG/wyS45CO2yjKrTDmtb6novzRzFFP\n0vW+wIf8yj0hCMES6qEgkFMX2psvdlPOvAemKXHE49ER02QcMmKXvAQqZucv\nctFSl8V6/vA4HLpXo5xTk6gWzJiOb3W9Ymo3gqDwVE8bP0piih2KtXlK+0DV\nLBb5/JSCpyYX9TRqwdu9I/vAmjdNFY9mEi/Sr+ZdiT0FYVpLOBBOfQWrB9th\nOOeCfCeiF7ZRT42tTIRgESptGCdJ6hbHhFAhTQwKFVSL1+07WHTvyVCMYjnA\nOvfllzsq5YxGRlqzsXM+gVwDAeT0r/WJ9OOgbb4wpp8AkhFR5AQJ5ph4DhxC\n+9iCRLarJN7xZhqYVLxtYzX24uoQ4V4D7uMtKMjRiPxr0rDOhj6qHHysgtDX\n/+2110EN5HZqkturmPey9IqfTcGbCquMo4nhn0lJMlX2QRltQd9neaHBL2k7\ngB2q7OuD6uuLSTbux/3lHXT9hP9Aue2o9Lvs0Ppn1krRReWIq95Wi6pT3AlZ\nzaCFmpHa+P2x45qsN54CtUUKiQxwirIg+GK5W0l8LFrabZL2BQCUMyoQYhHZ\nXID2\r\n=mDah\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"28ff4c95968fef5e56b7b1a81c454187e0e7dc62","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.21_1584075773088_0.8896794403428852","host":"s3://npm-registry-packages"}},"1.1.5-unstable.22":{"name":"aws-amplify-vue","version":"1.1.5-unstable.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"932139c43ad09f9b999f2279b716c28bd3c45b13","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.22.tgz","fileCount":47,"integrity":"sha512-uqFqrT4DHqkfKQO5zzmWy7408A+JCcsCxvZgjOhJ0X0BhysM+IsmuqN1K8GJ7ShLSnH62XPWo5k7X64BmcraWA==","signatures":[{"sig":"MEUCIQD6NCNrxck0PymAVqZoO4Fim9Ow5CJ49gfHA5DOeWonrgIgLlLLZJXagzvWV4Ra/FUGkrSv3+CPOGPbzuMQJJYCNYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea+SuCRA9TVsSAnZWagAA4Q8P/iOeUGleORxhxFuAjbzv\nFSvYZLwo8sh7LcPQVYgO0UZtkIhhQdrfhNsKW17Sc4omiORfmatzp7O18DHJ\naokdhkTXuVcV6EqwDDe5cM4Druhis1R+XA966BIdreUPaXFLK4iO1/d2zOTF\nMpooV7J1fTY35S7UQidAZNLS5Wjlt3JrtKZw7KGgmWaeLJRHdei9E8UBV0A+\neHDvwSRxF5+rkLI2kDa99N9TGZzrCFOMkv5eUCKuzYM1gDOlMQ5WMu3oIwbG\n9fK8eV4cLZDdTPKSOLokXfmNBRq2BVBwIGBOv1dWMvba1QW4wVBMgDwVBRwM\n/p7xpBL32qQBSI8gb44YkSnywVURx5rzwsDksd7t4QslMr6kqKmV/iHPveJl\nNwiHDdeIw/nS8oEuHiyF4I9wwLd1lVoJaUVINWSexpNh48idlM+vet6GX/jE\na7kTOlLqYTW6yhEylG5ye72cDOfjrpgmu6623thKGmX+qMYSiJ+yr5pvMEoj\nrOholS/NyoM5PuCNfz8wGtXtW0gqX0/WeqWOSnkokR2V148gYxNdpNlwClVm\nA9qplmsNR4O/SrltMmKVFOT+gA1wMG5eiQcLP4s+7tLDL9W6Q/nTpDLoDRnM\nybHYgedUehJJJc94izEFuFEVeO+z/U/pb13cufM96v0JXMpe+4MrO4Esesgw\nN7nY\r\n=u/jH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fbbe244257694ce0697ff6cae930480c4012973a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.22_1584129198213_0.30463033418884566","host":"s3://npm-registry-packages"}},"0.2.14-preview.116":{"name":"aws-amplify-vue","version":"0.2.14-preview.116","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.116","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"bb5b00c2880bf086e5095177efdbd1a45c8f1e7e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.116.tgz","fileCount":47,"integrity":"sha512-7lcB2hXv/OGaVNPnR0yxCgTQH7EDNW7j1B2Vdnvv9sw7X0iKTeigpTCCd0wKQhh1z2ttoVcRUw1HLKzk1gxlqQ==","signatures":[{"sig":"MEYCIQCkI3pY0u4ECja3L06X389TIySxqztp/f+nPZh2B7z7SgIhAJTFS0Df2Vix+XLIrcGs/AWg8N/Sxf9yUvxbywEBR8Zh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebBuxCRA9TVsSAnZWagAAIeUQAI1ObW9vHPkft6kySmwt\nVSaYXjLjyOpqo52xyEouyYmVVg3WpjEMK7q0O0Y+MZDHbS7a8LIbzxGaKUi7\ns/0vrVtFHtPM/98e+yvs1VFyWzSJIm4ZqkCwfxQvLlCVS1SGsHcne+4Y2Ybi\nUmwNqeoFYI/6rr8qWyPTpP0WLgz4c7p4Sl3AdPHZvtsrTmsO/s9FUbPzOm41\nHn4OYcEViv+J5F2JfFINjcsjAJzfZ9w490HEbsXsW/WUYlr24BdboEpqTw03\nh1HmxeFpoSy8qmp8Y3y+MLHi8ayvCgbYLsD9Ab4laQnvlsMCNvMcCGqtEQRc\nKX21hMT4tiRD6Lc8BW2TOIXQO+0YHeotpE9OkblvolhGZmXkHjtwUANxqKV3\naI2gldrA2cjfb1k/sfdiSl3pShCEoufbtRF68mX9/dRzO4Tsa3iHIS7YQwss\nWgRPvRfdOjcwi/SD4Klg6vQeyuKlpVM22o163stl8UW2BQqA4FXniWUW/vgp\n5olFdI7cmqRtjQCYye3bumCVJOnAqzux95x1+j3B4XeC+C1IcG+tx21Qb2UF\nSQEiHhyp6fL12oln800iLepLSdUaVYihFDAtpwMDIiVTjJjbTxaKq5Qmp6Df\nTGAwj6kXoMLR9Co48fTCGJqs9mu9+UruHOUMyGmtrR/zidSBZIBMqrbM9UcB\nNtE7\r\n=M9Xr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6ad01c60ba48375f335542d7044cfd2c6cceedf5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.116_1584143280600_0.8849349500148187","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.36":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.36","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.36","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0f0b505e158c24ffaf79dde885c6cdea394a0828","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.36.tgz","fileCount":47,"integrity":"sha512-N/VVqco1xNVBO+Cg16PpQsMX9McQcGnKmWFW17U9GQ+zQ2IG4AnGzCWGsH/5SJl9rwljKM4bnRzbAS1mvrV8FQ==","signatures":[{"sig":"MEUCIHG2dsTygVOFeAGU7TvXfgQB5/wNLhdbuSnJIuuepkPFAiEAksYLq5U0IxRzgPsj4AqbMgVhotJ3eQ5EWeXklXNUj8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb7rNCRA9TVsSAnZWagAA4dAP/2UDNRJT72De/fS7MQw3\nivTh3ihVTE6y7pJ3kumtXe0IT6bBoxl8bM3yJN/IzRE91Ez6/G5Cn1M4C1p8\nyOTZtwcymCeIRpPtAmQ5CCGD3+DyUIpq8+Wkug5m/XWRHlkphv/oIn1FK499\nGZ5wKuqgTldlkVRCDAkIMEtbW/mjBGWL0ChWZE/AqnKbBLA5c61mcHYDY2FF\nuuzzKaD8VGiCbqdRR7hP0SQkrxq5fd/sqoHbFI2w6P4DOvLrP2/dC0oIjz4C\n8em4VIBiuyo08itk/ITrHQNGUTWWare0qC4H5qQALPsNHsCjrMV3s/1W2wmj\n0amM6DNX30VtAYQYEFwEF5ugvEcwdh5X+DiA36I2YSUtrQg0g6ysTHbNw6lM\nZ70sbnPqFCgiDfqyilIskAzspoGJDTVh0u163oo9O1tQwPDUkKLaO8iIkfS+\ngvvV44rwIoay2krNUsIlxf61DfzNl2cVTuf0zZzvtoCZ+z44L6L2f3Q00aOc\nSoA0RoELKEQK7SapAp+zDyY84nsSQYDW2aWT/YeqB2SV93BB2uKttfLmT+Cw\nWOAe5MDellJ0wsLJLEJHzEJYM3HBiYRo1LCL3R0zhxFZsWJfPsWQ75uKWi2A\nmvo73HAgXmqAmJ+bGON9f7MbtEITppmSsANR/y009TeKeJzU1psot5WX6WS5\nU9CN\r\n=xAGu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6a4556f51b28c863182bd5ff549a5ff15b02a00f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.36_1584380621107_0.8840026560592475","host":"s3://npm-registry-packages"}},"1.1.5-unstable.23":{"name":"aws-amplify-vue","version":"1.1.5-unstable.23","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.23","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1a65f13123dcb8e15ea66c6c284f88f1b4b76ab7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.23.tgz","fileCount":47,"integrity":"sha512-zAmgaxXO5Flmq/ZD+X2U94qX4wnqYV0+aCaWfB73shdI9HjK/0RPlI/FgMSNBdNW7+r9Te8teLYrqbClDRU7rg==","signatures":[{"sig":"MEUCIH1UgHl5dpZQ41IbUm9XNlS84/3BkZXrn1uCqciPsDT7AiEA2fdQrs4asDjSnZOroCDCDymcNsSP/YtdgDWr3d1Cg0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb/ggCRA9TVsSAnZWagAABVcP+QG9EseVv5z69xomGQri\nb8aMc4Np5VyECI+f8weWBfm4vb0//ZP66MzufanF4wp3WCGmhJ47lybFBOdd\nmhsiGatpnItBW0DFt755yJCO6/QvdF//Ydk13ktC2yEGmf20rocoxxYzAaka\nfsNuOiPp4k8/yc5UeE6TrFsz1QsesvXvbJ2iCxZfCq7ur+mEy4xG663fB1JA\nvupUjA+r5Td8L52OFhNOy57z8GB/ebKhPmXjJmwVmq6+BhjrHdfJaR6mR3zu\nN3S5iRRxrIlj+NFwrJKwSsXmwpMOmW15I3t+Eiv8A0zdPHRHyCY7Sk3Ih6X4\n+o8QfrI2efQYmEvMARfLs9tRtQH7xTMBoKgF8dPuikLH15OCGIlnubx0saI8\n7tt5Kz1S8HdgNhvFgIHYMivZGuJGvBt/EjYciex6yBd15Y9OoFUG6z2i7rV5\n3Kwrmt870nhQjDhP/Ye00b8UqspaG+sA+Yk48jmT6vAqX+J+a9izbYRWKr9U\nAmsvrZBN6/yKTC2A+ZyU1trGXkUVCWsODDVWUeUmOaI4AL0AtqUP63Lfzf3J\n87oihg2G6fcDJdnVLmMZvYsjSWNoFfRYQ8HHmzOZKv7uAYMpK1xJX13kuF6p\nnlBo4ffkySqC+OG9NNLui+jf+qPtIxzKm5lvIW/spIBg9leYX1Y7i/Yhw/Ox\noFZI\r\n=CmXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"49f8bfeebea845779ef232d83295bd33ebb22fb2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.23_1584396319959_0.7555817353371699","host":"s3://npm-registry-packages"}},"0.2.14-preview.117":{"name":"aws-amplify-vue","version":"0.2.14-preview.117","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.117","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"62385bcfc2d015340151de3aad5067596f8554fd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.117.tgz","fileCount":47,"integrity":"sha512-3yntbHPEK0Z4PPaBJ94THzARg5iG/vd5m0BzCbLPZC4LqWjE9QNaFQU70EeFX5w7A9jGYr1M68jwpiChUt5waQ==","signatures":[{"sig":"MEYCIQDDRgAwHc9vns2DzG/EVL2mKXL6t8gw6SaJBSICoQYJOgIhAPVmRNaQn89ZoH8ExHJquEDfPrHbc6GvGLgVMkHSs71F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecRqXCRA9TVsSAnZWagAAa4MP/0g5MWfXGJar8j0iophn\nkArkbfKbJ1y8Dx7FVBdHDeeCgGrBC2UNnfq2vX2M5QAMF5gdGAIJhX9PKgAr\npkphp7MykFGT42gglSxeRVHMRN6pcXAuLQRA54ntYv9N3i2U4yLqJ4gXBmvO\nhFvE0gaqBqOy6DsyJyKZIOSm0BPyNhBUgWVjJeWTdU/6U+772X7gvwPOP/Oe\nvFER4CUX31eLlLndU4he/G+IdcnmIZkhF1fdWMrueEEIFsCw8RZZbhgSIhXg\nFyWUsMTzYCIWdGmZmOp5mOZUmA7o8pUO/ga1tqMsbfdAwVvNdVwQMt8Q5fkt\nRLGyRFU8ny8ZwTc+P72F3kWYVi9WUShhF2rNAY2KEd5FZ20K1xMjeqbu0oAW\nJNbLN44dgU//NNIw8egcP1e1DKMZzcWCNIhYzLDxycAjdjjbU8cHnzTf9/M8\nWEI+zpu5nD7Gup13nO0tfUxdFjqhJ0oJEAR7ReTSIdJ9IdIdOr6ecG/xgY27\nDj848g2zWO2aWRY8XHdNkCPcwGtcXmNcTpi7OVL31pfPpRB2L1+Id6insTcM\nthnLq7rPzGtxexDRO9t4emGgXkcc5BD/6uPkGPD6mI3YfdiKBi54XPvCHCBG\nqpzxvolTMalXFsnuGTtt4fzPywEC09I90EKre7wzsqX9aZcRnKzrFVfEmLgA\nDxV6\r\n=e31n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d46fe992f1e2a2630e65df1d737ba1bc99d0177f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.117_1584470679014_0.2672912815598181","host":"s3://npm-registry-packages"}},"1.1.5-unstable.24":{"name":"aws-amplify-vue","version":"1.1.5-unstable.24","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.24","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"80f793930dc1d85719a96a0395a006a3acfe5b8a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.24.tgz","fileCount":47,"integrity":"sha512-TDRGicX7QttNjNSJQBZDc3zdzB26Os15zSPXrBy9trwr1XBAwNbmovKcD9L6WyLLN7WQZVBmoVbSyL5oaY/Q/A==","signatures":[{"sig":"MEYCIQCSi2WpcTflro2I/YCa0a52rrqNXhB0G2at0Hh15DTpCwIhAMz5Bis88+4NRizCUv1euahszddN3KBIhsaa3nV9j1H/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecTZNCRA9TVsSAnZWagAA3m8P/iElDZzW1VDQwj2LeKkT\nYS/Jkk7YJoPdN7tjKtTkthtJP/9cvoJok3xvZceAUMksRSwe1F2ncuz3a5Lz\nsP925ETuslSst2m1/jfMyryippW7quveVd1CTG73ekeESmjsN5ki9r4b2rdw\nxhsP2BczO7rbDKdyMj3aIaY64A55Le6XdEOX5zN9XJ7I/ksA+uQBuHFajBkF\nLE2cw1keBwHxx6IgcPcVppp9WW7kzKMjY55/WNWQg7R3v5vZd8mEToNrnUyS\ntlPkjp7OlK3HVvsSMAszMg/0OT7ytz5s1G+tfp2BSbQYxpbX8GAt/OfNWAuT\n55z20gGAYbf1pUHwD25ck6hM45vgnxwe18u7wloZ8NVD44chNsOrH8kOSJqt\n/fdxarjh91bz/kRF4GOq0toV9VN1GPfRJ1sjRW4j+IRlFGKMbwyU9MmrmkHv\n0E3kYwD9QjJIN5TlnjXTWLS7EMJe/+EZyqgwLwgTcgF9Ocpne/LdD5EKlHlT\nX3vHWfC3ILNjfP8pvwFGZo3jJA2pRe8rAMzbFMbwMR1x29cF7bG1/aYndMVs\nQ3M9fMh8+2grHVjOph8awwQuZM1beTRJ+hmm2UB5Cw/K9PcFJT3+vpRSFqh6\nj+P11v3ip8c2z7ixn/VHXKEACs3509as/eB5UGKzCdZ4IKIwSUPxnJ3RIGmt\nehsl\r\n=ZHem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"97b3186da32d6ef542270c68fe3a1e291e2d1e32","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.24_1584477773175_0.06284680958568822","host":"s3://npm-registry-packages"}},"0.2.14-preview.118":{"name":"aws-amplify-vue","version":"0.2.14-preview.118","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.118","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"aa2f262b844fa23c6daaf0dd213c94e242be4ccd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.118.tgz","fileCount":47,"integrity":"sha512-rrcZ66k20EMUPciUqYycZ7I62jSSXEVw1b6fYkAOW6rThLhEn80EekoAQTtsb1BR4jx4SZtMod5RVAYnGpZxVQ==","signatures":[{"sig":"MEYCIQCGK7hmaC9/DtgomdY9RjW6EI7EXq9j6enkVjpOPKFQewIhAOKedx0kkxRSPOcomCJV2v/Ip/jCAgEXJtpqSJi16JfO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecTzDCRA9TVsSAnZWagAAq7YP/3SIBM+su1iJtFmET/xT\nKSWnh08KLs91U2K/80tY9cVr1c7H9CuFgb5XNzw7Pgf8IYzJIuCn90kqpjEb\nTtMFT973WOxBZ/xV+FID86s3eqPpgUJNrQ9TrnrML+StbHJfE7gKd4R9eHqR\nE7YJMTkXL3D3tZT3aSZ3TzALy3aAfjRf48LfNSl6Qeu6Mw6IdPqz1cbsCGOL\nNgQ/ud23lAPfCBTWBIOOCHzxfXXK7r6ShG5tXDujaRbx08Uba+3uX731s+op\nH6JrpgrqUOCIbsUAjhy0AvpmAw1Q4EwnSgXzlsUQd+756rQeBMiDq76Jkn7O\nU72nrGcXvO6eRx+VeaCx+xatYUdRxAqdO09auCgoDKvR44ctXp7erne3yGc2\nbWtnDCzH+qieSWX/mAYaRkb5kO+2gJ4dX4WzXVu48t3evwfIocySw8dvzBHF\n4aHbM8gqet64O4cBqZBuWFc8muo3ru2mu24nKd9wfBAqExjxdCqmm5xm/HS9\ntAdk7fVEvJqmgICKfisg6KleDKrEW818x2RfMZkEtiiNFnhOWQ+N6GRf/VD4\n11yXPzgr0MOXKi1zBZnF0Bl9nXXwIcRkAVNWWHeq31ONRGcWgUDqx23FHI7F\n1SglyTUV0TyR1CbTMX1x/+FZlEX9pIi9sU+jLIGLzGkrxXQ4jzLM1Ot1H5dM\n+McM\r\n=TLxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a81cdd7992784c9e5f27be734e23ab0c24cd772f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.118_1584479427102_0.10012432948134875","host":"s3://npm-registry-packages"}},"1.1.5-unstable.25":{"name":"aws-amplify-vue","version":"1.1.5-unstable.25","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.25","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0af08c59b78f430244c418629415d6b1fb63344e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.25.tgz","fileCount":47,"integrity":"sha512-sxPAhR82eVLDuf1f0cQc4qIstCUaUAX+niRToI7XfdaerKjvSr3S/SnovgahA/OTS1lnfl3yTfT3LaUUFltCgQ==","signatures":[{"sig":"MEUCIGyjivuXejMcBovG9yfdn2io0A9l8ul96rMyrIJBcdzvAiEA4bEC3wBfaIGL2toIVb0YIpIOf7FYpcyIIS9gFCD7E0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecZNKCRA9TVsSAnZWagAAQMQQAIhmia951QPTJHPAqaRG\nejDPiBsHZVP3KjHHgEyGHrJwpYkQUxLyTUmYCOZC8mEcMHqa6QVfCBUZPrtf\n8cVzlL0+lXwe6IMmVd+qFJ2JnvCLghXMAj6J5TSAX3KCY7oyFIK+DqqvEGvt\n+5A6CT+QIQRy32m5IHTUGU/bv6z0VZid06DRsCczmyThKBOdraPNC/qWaf6f\nBq/TVe1gdBEeJ7En4C2zs+tgkvRnWfBF3keat+rx2H0xAgfDvIrOL7AuiRA3\neDzhI50RcP7VLUmGPVdx4+zbzMRkHCx4rn1vdgJwUncnVZZua18tcj9A+CND\nFb1WgTfqvJdm+j6sFElrNjzxiD2FoFUnLV23gWYnO7Ocm+RpUSEB7smCpdtN\neLV9JiCF13qxWgOVTT5KV8saigmnFw0S1euvqoY2X1dR1ZirrQT2hYuhH9DX\nvzvEzsoNmjZdS/8fign+r4GajghB2umMKebICxrltmsbWNSwXV3aGpTecRH1\nNw6xvCJuLEnNYox+PZLzeHgIzMHlR7OEUe+s7GeIwLuCHI0aDXmdVGg30WGJ\nN5EusmNZb9mHeXR256VmRE9bCBNNn2sK/xsDEYhbHNgwPdHq9PhfytvfaLaD\n1n5DZfBoiMAXwHEit97bPtgfS/kvqtjpXCUBmUoDcG51rlsNlGHy2wCSJQ+K\nGgNe\r\n=1f2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0ddb6af3163fc624cc4f320ecf2b2463d7d6b102","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.25_1584501577945_0.8551046148568087","host":"s3://npm-registry-packages"}},"0.2.14-preview.119":{"name":"aws-amplify-vue","version":"0.2.14-preview.119","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.119","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"bbb51eb1dd6c5dd1b3eeccc8c3dcbfc2c201fa94","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.119.tgz","fileCount":47,"integrity":"sha512-J43XPyyX2OpZrVkBXHbgxL979i3EDH0D+EcJDjOwWl7yejZ1zi5oePCjYaDQ9IreQbrc6C8rWiJ0g82cm4iK6A==","signatures":[{"sig":"MEYCIQD5lT6pPCCvV3xCm/NNpViEsFdfC39JL/0d7Hg633c7CQIhAPoj/sflCms/w2PLtnul4uJ/zRPmKdUzbQ/zkm8zSC/y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecp4VCRA9TVsSAnZWagAAGvQP/iUqROkd48MA4jJqGzcq\nWRBMipdgmJOJqd88mIe7YHsnKcg/lMnPvxfkNkIQDc+FAUH5Ytf//lUAXqkZ\n9by9TOG6NP67B36XP3rrNL4u/fBw/S3Xqqvm1opBf7l1GdXRdaNvJ5/6xv4w\nmAoW0iULVdtXzSGM27D7/1NWJgLbicu0gKgzs589jvQoybbYLft7DdN25HZK\nmNClERE6CFCDzeUHgZP7mSLnPnIStfEKM8hKBbJmY3B7OrXjoeCG9CqGZVWa\nSEr9tG6crIhiBPxeXAuWorvNwtDpXsMJtEViTdI1gPFdDVHVqV86qMKg4Lsw\nTpKsPPLBqku1xYFvDsXkFPM7VXq03xqVF4AZ7puOvhp+80GOJQmy9j1ZZHX+\nuBZt1fVZK5kF1lbTCE+Gp3nq6bS4uXcNY7b9M2XYut+GeGrSSAH3NIdg/J5R\neWcmP7uee7SanPaxwFvPIW6eSejdkurBvvV+1SOHk2Dj9iG3tDEHWN/ljjti\nGu2XNp6h9/JU2XvAev/BlP7JjjzdJj8rVx0lcu87f3kiLuVnjJ5apU6V884D\nrWV2tsUTXgX6aUFbsk+umRftET/z4s46dd/wzL28HQ3Fa0LQRCuGkVSugT3a\nbp+VJ0MNYsfotU+KhuuqLSE8CeKDwaZmkhMKoUj+MzNvSnvle5tPBoRn5WXG\n/eYg\r\n=AALZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1cad8b9214ff798eedefeee1b07fdfc2e020fc05","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.119_1584569877089_0.20464631654549947","host":"s3://npm-registry-packages"}},"1.1.5-unstable.27":{"name":"aws-amplify-vue","version":"1.1.5-unstable.27","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.27","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9560bf51b6570c7769dd6e6cc11453c21e3bccd8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.27.tgz","fileCount":47,"integrity":"sha512-j7y4WqbRmhsPj0BM85iDWu15zEkpOhIDUPBmVyT7ZpZRAlRpFA3OhcY8Bmw0pFsYLwqVrrmPzQI36Zf93Bbm3Q==","signatures":[{"sig":"MEYCIQDWJj4ma7lkMTORs/CiV4UE9OStg9vhMkldotj/xb170gIhAOkexO68O063F935S67H0Rma63ktA0/OMdFkQKJnrbgf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJectH0CRA9TVsSAnZWagAAMPMQAJA+BQ8/KIIIbCrgkSHm\n2Ugdarhu/kZbsYhIii2sn2fNGp5JhpN3NkVG0/teMYxkgyxV+xUooAi/wYeZ\ntQjaf7Q7lymA678CxLpLyCvbubR59b8JMf1oQcfujZ3GKx192gZE/Da2AMpB\nI8dvkDdoUvrDG19kG/v2bDfTpFQRGUWZWy/cMx7KYGYMjVLwh3P49kTa0SZ3\nkAyY0YKs0ihlFjjMzKH5qIDctwecqifOTwEg+m88zWeF95LQwRkooayfdO+e\nPyubH5jIpihMlcvtXoqql6KNAUPFflLHV+3yIubpgp1E10szAVd0oZbF9Sz7\nZC/VZp6lp0Lzaa8XFN5DJGHp25ZhyjcGGeXA173Y4AiSlWfk+65ymuWzPydl\nHpPt3+3j8cZXL/ceUYe6q0ohS26PjUxZZATh4y4RMyrLKQ9CFNROFPkjm5vA\n2YpOVOkSZXuaWT2osEfjxmeZeL4xsXBGgvsemiyNdDVPeEvAeXk9Dg63a7Cm\nTGzSOmQluskGQLW3+4YJQo4FUVKgbO65f/g9syKPx2FbntLWfUfXa9TwLflA\n5T6r4XvjnaG7icwXTlJCDoJDsx8LX7i+E++X9pqgFcJLjf9fJDMIGLl1bmyI\nAduPQjLiby1vde87g1KboKzGbXoKmdSzDhqxEQzcpCdHSS2TuKxMIwaUdjXt\nOtoX\r\n=5ZQW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ab08e38e22801e3a212f299057ecc9670fae5633","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.27_1584583155506_0.597062549207974","host":"s3://npm-registry-packages"}},"0.2.14-preview.123":{"name":"aws-amplify-vue","version":"0.2.14-preview.123","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.123","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"314f71a3353141f6b9bfea7aa367a0036c3fd666","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.123.tgz","fileCount":47,"integrity":"sha512-uVQmRPFKgC9zICq+MBTslTEBxlXAtHLdp78pJgvzrhUedglXQeMTnBK+fDp4OrEEZsWcsm26FTKVHmSsAO3+Pg==","signatures":[{"sig":"MEUCIQDp7u+Fm+4bPRKIN0nT5oQl6Qxmrtii1j45/eMuEf/0egIgJNhtyVgYJahIUBOsfwX6K2U/qd5wThkUt3TXyEz24+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3863597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec7fiCRA9TVsSAnZWagAAVlUP/0ImP8BXBDRMqJ8ILRaL\nZXyAWRm6uvutvM5j8CmYkM1aGoi4J96Ppqw03/jCGX9yE4tSBgCSxRmoFbxP\nhARwmbTMSoUglnLGGvYdTncdfpa9tRurtricQGFkQbntYHFlrPunpqQ+A49p\nocaq8WlQZ/VPQXC04qmMyo9hRzjZQW+OV7R7nhkRSgG8qboAe7sRgnNrHxbW\nbIea1jzC7ZpvgG50riq9HsjiGQSopIlICxRhQEqGnHfhU+5luV66hwDHGZQA\nlzOwcsBvjog2ThXfI//ZgCjS55LriX/PXWOEGXb9s7p21k2Tkp9NZIppG/rQ\np4zi+cfRMGDAs28OEHhG7n+ujuWEjpKuTlKvWhcxcY8FiJma82T5pu57eCnp\np33kyAIvCy0NiwUWkpXaP2JXY393oiB/6rVCEqbWwDqJ5zZm8+mQ+Lkhjpdh\n6CL6ND6aWrooWBZV3UfxXv7PycC7ziaksillebWcuDdT6avtm0TjJSZ7eboY\nOpN0OzEuebr6AEUFmMZPjaWhAcSHlFg3tZ3DBU7EjV09iJPuDCjYLVZCChDV\nIDm/WoJotbYw2EMiHyJmXVCeRJjSr9UdzEJHAxXDZWuGuahBYAf5ehtO4aZ3\n+29tfw49dq1Qot/+9e9qu24BoTh6NVYOdJQ2NvtNCnM8fnkXkIP9fPDWODrn\nVhbW\r\n=oU+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"22406f12fa68d6a6c980881624e4b1090c5be35f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.123_1584642017568_0.8761677200757945","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.38":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.38","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.38","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5a7bfa23513e152ee56903f05fd9721a667646bf","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.38.tgz","fileCount":47,"integrity":"sha512-93kZmWNXVDVUjFIzbQza9fGrazlGn79kvNaL81TNlRL5buYtmrlxxZqO9P3wfs6R+ITauAVvMYue3Nujm8Y16A==","signatures":[{"sig":"MEUCIQC6QWhn2vo0lsidVyrKuJvSCsz2fLJACPFhslHkQCfC/AIgIj4gYFvmGN5K+QUH98Qsw6EXiJfHB6uEfxRCLTTn2Pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/f8CRA9TVsSAnZWagAAob0P/j1ZJq5pMB1GtM7gZh2u\n1s7c1DtcAsGyO8zrLliviEUBPFuGrU++M/ZmxRPFpG+ztuTNNKK+NvzVuWc8\nc8DKSq+xGDOLLGEaX6z3mAJBV88cxIZNrMZnNTa8StRd75WzZWoyWF/E0fKS\nPBhwD1Qm7x9Z6GU+asQKXuyZHkGMJL3rsOkxubt34GqFy6vtHYsgaJzyyiwO\nwV5W8jBXsIqMJDKEVA+GxxVVvnaiuAX7inKUoQ9o+DUJYuzRloPFFmzvIzzG\nCP+Ng5GbH67C5DdPwAd89x7ro64QFKhxdSM7GOb85P7t1l6pr+86iBlN2GYy\nAsC0Jl/IaHXoJYWBFs4tHk3LBSO/E+Cu5Z3MD0cmKcoMPmJdU8ELjikW9OaF\nQM3WD1DoB7UHAfgvqRbOraTtVhWqfaDwlt/3x+h/NddWhCGnPBfPt9jS5amw\nC1uBnNhUeLEGP5aH22oaFAX6w0WeT1tvPqgD0cFGUWcfGA1t3ZYp9ZP3gUec\nr3tW9GHRij2Rig+dRxhr0ZOSJS8vhED9gW2Clq7prUM6F582SGUpux6yY8n6\nje08obJXTw5cUUj13MRuzb+10OdvuQvAwoF5d+1bKcF1qldoyxFwUPITNaUi\nWuPpWvk1HFnJKQG0LO8nkm4LRXkSSQtPJHCeNNWnrnj2Ztiv5KDsiu1VyYfa\ndQzl\r\n=q+jK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8cb188b705b0d56f59fb1a5f43b04e79742e6bff","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.38_1584658426748_0.07422030984290418","host":"s3://npm-registry-packages"}},"0.2.14-preview.124":{"name":"aws-amplify-vue","version":"0.2.14-preview.124","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.124","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6249b8820239a77b16b044d03f54cccad8084586","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.124.tgz","fileCount":47,"integrity":"sha512-+EgC7zfUPo1nDU8X3W2IE3NotsCOs683/OyvcY31965YdeH4o1ZNWrB0xonfMOMyyM9uiUPt3ZDgIFC2kGqakQ==","signatures":[{"sig":"MEUCIAhpQsXzd8yxrujXxDyMtEOn3ump3oLREofYcvHowCvJAiEA1d5WT3/YcyGhnmFAdIEfKhkwTgkCL1CmdXK0+JDJtTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3863597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUAJCRA9TVsSAnZWagAAbzYP/A2Pw6Rzke5Y/T2H+D3J\nLQa4NS5ItcHm7k8VDoI4hk0RVeH+K1hqWy1V08WsPoDjeJj1SOql7jOCStNH\nx7h57JnhTnKOOoI0e063UZvvzS0yP7DxNoPGAIYJ6MXxCO9uJght1FxYPTFf\nYZDCCoX+TCnc5JdgSCmWgahGF+x+aNnaKsAS5kkMGQXeA+6xUvRx1/VTzSK5\nFgcoBBsN9hfEqdn4kjspgqj8NSpKHG67MjE4yyCimwoCpHWyNKNadHkPI3F7\n5jXdWCnFQgsXAVjcMsMvQSfnFIBnfCEMK1YFoJKpR1UN+S0vvxryowHMqaOy\n/omeM3MTbcyNn2QsDLYxkOB953Vz+BsLUazLDhcyzr8ZYjjvIsXYaS4k+Vqg\nkitktLeXJJJmAw9VRnTcn6puTqM+otX4hb4mIorD+iFdiklNDjwtEwlg4CtL\nM0g/eeV5CNyOI2sJ5icYL2A98k0edh/lX+pg8mmkpfMuOzjymVXq80daCbxh\nOdk+hEVLsPfeF5I12wII1oz5QRMWrsfLxU3D0opXqWD1UUpGrBIeOtVP5086\nF75xQZsvTp0/EGMRqg/jUi5TPhlefEie/9r2QJL0ne9fvIjhShUA274lKQw0\nCDRq/FTeev6v6y55lKO9mqS3FZYpcijYtc2+HE3x/3JAeBgitJ1z5Uv4lMWz\nVtx+\r\n=COz5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"49d295eee25d287ad705d878facf07bd6a3cfab9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.124_1584742408618_0.8159999881906472","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.39":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.39","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.39","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1baa6a361f88b71d88dde92ac02eb48bebad0c36","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.39.tgz","fileCount":47,"integrity":"sha512-Ur5tJU3LTR/pHaKubuSpVApBvAqeN4kJLWc7ZfSalV6shi0U4buLgIshL+dwQOCbmepudFfSqkwo+JSisFFWlQ==","signatures":[{"sig":"MEQCIFx4hMcOkfCJ69+GfGW7j3wdBN0VETXrvK9CQ6uTrY2vAiAQmnM68h3lMp2ZFiw2ymfzRDBjh7xO1d5Um0m4u6i0Fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedXhkCRA9TVsSAnZWagAA9b4P/jtnAU29Fi0LBVuCz4Ow\n5gzMivpydYXevunR59RU31Q7cddRLf/HLkIW4O4J0Jkvc6ZCqenrp3sOYsvS\nLVljSg+5lsIuvOkGXrS2wAaXhLblbhCr5VkcynH5tddo0KokqPszUzs01wNl\nbPx03lDiGADmNNKMiAX4e4Gx1nXPiwZKOfKZvps9jcjaUDiKTOhWpkvl8IrM\nunRmP/RgcJP0RSnUioisdFrUts0nyc+lfdGu0l/eg58rShkE7mfJLzgw/hCW\n8J1qfWa6NiW/6Zt1EhQihzj4PqhGb7UfH5QdLUpymdrI8gF5AOyclEbK/pNC\nlxqfVwb7v4MHQigucA09TR0vLBW4K7dOQx/rEVXI5jPoCg5dpYkis8y8JdVm\nmO24SYU9NJPBbXQiPVO3UfBG5G2/YFcrFV2bt0e9gUdz8XVoZkgDeynuf4II\nCtHKlJJhsTOgm8CxTB7CFcyEJL4CUnt2AcCxkZ+5wCO7lcasZgtdfxbSzX6N\ndxESTwYkLggd710bVdaLTa6lHw1gAeRbnwEsNUVv+wQliHVl/boZqQao+Ai1\nhUROnXNrj5WXORvLPJa1z4vQiQUHhDheXFwarknUw5Qcnh3ZBQGFZAg2EbCi\n6KwpIuYUll6ObHlmXoehJAMlnqX7c3MhqWDg38IQDQsmsWmFblQdM/50FRWc\nkSXJ\r\n=TK3K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"766c5ac5bdcf22f772340f78f5d45790f3142b71","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.39_1584756836240_0.6503305166294646","host":"s3://npm-registry-packages"}},"0.2.14-preview.125":{"name":"aws-amplify-vue","version":"0.2.14-preview.125","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.125","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e6b4e882214a292e7aebc09687120d2a9c7bde25","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.125.tgz","fileCount":47,"integrity":"sha512-X0zEx8rVYsgkTIqBzpLvgzvr/xDmCKFLi6FwNPzejgQnuok8/2qH7itS9j1wsouGn5eeKXX85kRjzQu4TWa4Hw==","signatures":[{"sig":"MEQCIEeJg93n2f+R4g8dZTCwJDhW9GlY93sSWODb1REOD19fAiA1FKmPpVTHk4mWhpQkOrcGekpFq74FLvfhnPAwQBe7RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3863597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePuaCRA9TVsSAnZWagAAT9kP/RjQtG2ODSZcJbzzrQwp\nWpgTuVG9Y2KNDDwfknI6tX5GD5n15FYB7K0tR3L6yhoJj7vyGyQWDzPqh2MB\np7hkHIA5Bu2QosE3q6k+M5ns0ot3r8bRgGZkbR2zYuF2k8sPIwIMSI0PRZ8r\nl89spmpmyYyN8HCgUUsysPHqAppr8OJj325n9rfhhc9ziPsF+FtJ8xcM6SWi\nYuBK/VhXjVh/ZICv6jbGSw+sre0QhUqoINHYvFbVat7g8kLvTo52F5NIbVH0\n6SQnxIxeKA4eiMGsIoX8xpsJYlh81TrcxFBD0fSef3vyv1m9+j5Aw5N0QsIe\nhF42PS2XCNAJESxfAWBz4qcdMC6Ovs9t/PQDVTbXcjdWXB8E4GiPYLLtg6qw\nX4kE97iGiQI3FUEbj7KJVZVKOkVG4TR2C7cRJTplyNiT4neeUHv2+Cc+Uc5D\ntLQnBOIzhDIkECo/jqPmYjZOSuv0iggFlC+qPxFpfkmriWNGCM6CpJJEWq16\n+Ud8ArR6/vPCgo87tGAdKxa8sgWdlnPL+jjqYmYCUvbnSkjurImHOWcESFQY\n2ywwIIIqvWTHFrdn17rKU7VIxMQFJ6Ww8uVqBpr3wnj4U6m+4eoEaHEJm85L\ngXyFV2Qqg+d4flfCkUyFll+BOyl7TvKBAGngyzDlS2MYSNf2k2P3nR50HrQG\njiCY\r\n=xLEb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"68cfdf6e76bf3b9d370e1ac3454302cd4041730e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.125_1584987034101_0.4892182768544384","host":"s3://npm-registry-packages"}},"1.1.5-unstable.28":{"name":"aws-amplify-vue","version":"1.1.5-unstable.28","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.28","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a77f7e01e3d4ebf119e297a04cb6446f4a855cb6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.28.tgz","fileCount":47,"integrity":"sha512-dCJGncsw/5v7zaaIhMlq5TTu6OlDuOQ/iJPkwbmRdlSepIgQr5gUIasbh62yLkhYPaE+y5ycp3LDgWDa1/uYjw==","signatures":[{"sig":"MEUCIQD4QOSWJm54qlfXd2e1r0Stjo8xstrSBzd8k07Kn6vLXQIgXD4UfEPqWhqCUWBjdAjZEX6GqewSAolPI7jewgLIvV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelznCRA9TVsSAnZWagAAsiIP/iPbNFBbtQZmGMGlDaEG\n+j8W1if/fhMJkgvIorp7iPfmxz7qY3UcRrqNQzrMSlXk5iXMQauFDoFMqu1a\n2WR1TypHQyBluT3O7rSOx45n4IVbeJ8hRLSU+ZoTJxnfefzpksZwNOekILJp\n21/hpVD3cb6fJ6Y8T1OF3hEhEE474g34chUEcErzdItm8DgodlVPRTS0etqV\nogdY9YsglgMCd0AHcSZxLCW2mEwx2vj1als3F5BxGgoYg4kgrHNoz0Zwp0+W\nWJdoiDdsAopK5apyLJk5gip3X4hlaEXki+2gsc+Hwoyw2s4YSeScdLGh5uvf\noJmznQXrwDP1YDzX8vNT9gfq6mAuV/1zwBjig/aqxy/4ffzxMTJVVWfBtF9x\nXU9Cm1S1Q7Tzkz4WBNjjqImq/UX6OV6UgvGgz9mPx/oLawNddhCdr4bEKzXN\nJF/7Cn8whjlMep4r6EVY3brEpLDX0Kt4CwzwBc598LG1odtyZUPzyzzFGQ7K\nxJda/cTh6TwsIXKqd9wkkxBO3uMx7BdwYXjD2+j8eYjoKj2+Nv6lkuzRy8lB\nohSGQAgRnuI7H7CrQi/l+JYX7pzF1NiyrfO33rZvqpYNxLT6cuQglYgRk4gE\nYz6mrgpf3Tj59BAib35UAtC6k4dut2IPHlSkWmwM913CqQpPBJ7GGvjsNvV6\nza0y\r\n=afor\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"07292b1447ff3edab7c97bae733e30f1c0e1e5b7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.28_1585077479151_0.31943140948911286","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.40":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.40","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.40","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5f50b292b23774a33a191e9c04347017c73f6a77","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.40.tgz","fileCount":47,"integrity":"sha512-PFs9CIInyyvfp09ZwDYBke+QgJH+KikdokHgAet2GE/BKccj9Dw9N8t1W3PmTDGpEonvZLLeP0kofS/eiIfydA==","signatures":[{"sig":"MEYCIQDRkCBld/IGCa1nuwsc+BlahFPDJJM6y+wEYGNar6pX8AIhAPfgOiXiuZ7ECZNQafZQxXnMq52WJMGs13BByEp7kp8o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeqZDCRA9TVsSAnZWagAAHuMP/A9rJ2Twy4aTPs9bF9t8\nRc3V5ej8SyhyuVyqG2yAmkiBuBf86NGxG156rNDJUApfpDrozVm0lOGxdmBN\nuJ9h5SGIdUeg74e3XkEe2Y/t0EUVjK9M+E02UG7Y6brxJqPxwK+5SOzvTzBS\nQnDEaWs3t/9B0H+tgIb/yPnxN/KYifGU/G08gCxZScq+LhvLkhxpXQ1YjiM2\n+nzhD9V4QeeL8AFc+wvL1hcH5Bj/ARKnAR6VDcZMa/WH9rmLwiiqpWmhGAyo\nVlK5OeWFEX7gLccPXxxNxAzlKQyPsItSvEIJ9HfB2cO7gvt8U37UZTZ/bsfQ\ntCwG2edJ/gaKGeLyC1qibW3n0742HNa6Y0x7e7zHzdzlD6SI28BUknvIOsou\n4AhNFn7HBUjdP3boeTnrEp/NgGhObicnyLT6vDsWu+k1j+a8Texhoo3bm6zg\n/WJ+Gzv6oNfQwIqfDO+WJxw5BWD4t7W/meBAUfKYdCBGKEx2gX3WYRWmani/\npH9HaXMW/Oa5NZnUnjgD6t7V/yFGdaMo+D/lA+NlUOMRvJ1zbfzbaQYZ/zfK\nGHlM+wcmgOZ0wzlN4fyW3lTPErbREnqs/okihQwgmCSJ9mbouY9uqR2F24Cy\nmQ0/WZk4zMf8E1sQdH/YSyr6o1s8CuigO0K7uFHyD89nL08wHsmhhn40Jsx5\nUNy5\r\n=yTly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6aae9f44e086ce0e7c986cec4c94bf47ce2b7770","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.40_1585096259308_0.5569503826961917","host":"s3://npm-registry-packages"}},"1.1.5-unstable.31":{"name":"aws-amplify-vue","version":"1.1.5-unstable.31","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.31","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"61f334daf62be028ff8a2348d2bfb1d1ab5e5da5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.31.tgz","fileCount":47,"integrity":"sha512-kNrt5GQSQRhgDB+MoP/PWaeKDtFC6d8lZcujVsi0XtAwEga9oiIeyZGHS6CmBBA5vcm5R4H7vYPRuLsGStJLyQ==","signatures":[{"sig":"MEYCIQDZyYCz0djnWZ0ASfhn2A19JEGoEYx8p9HbebGxrCWV6wIhALGXBQ9siqygyUGBhWjsUZOivTH2jGOv/MQqIERBfmlW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefB00CRA9TVsSAnZWagAAEisP/2ey9CjZMvnXPBsc6TwF\nOQxS1R8xNKti/sPsOS/lNCwHStHNwpfkrkBPiI1QfGBoA+K8jDJV19RTgB5/\ndkaaQlh5U9Jj2FDLGnHrhbdxIj812h94c00Rz5o9Vc4K9CUe4VL/GHt6yO/E\nWNWOVPbZn0S5bMIGIQGfaa37UtbShdPgi1IJFYlS7q9p1PFMiOUAn7C3+CSU\nN51H4YNjHraHcs7RRsSURo4v7uBZqD35DqrxQ5FI/YC/7RFLPoXm8c8XmXJk\nsXJ2kwr3MuCUGMr8Oz87RSgWQ/eN7/JuU9fBxQXZT4Yb/ZrvdkonInclrtPn\nQbrDWW1hPTL2Pe+A5tqugtpsSnVkRXuEYgO5IpTeeKvc3NL9fVkE0iQriazs\nYwyGWGIvwZtDyryZGuZk2jBXZthYxtsKND0DftBsxVLjrvroAby3CR5JrIgV\ng6dEgZ3t8h1ETx6oF/IkEhsXpo6JDeOW/LBmza+mDZAhc69f5dxMEmaip4Nb\nG13LajHdTEc5fY9mAxgkCNcpCSDH2huk79XI2tc62dVRSBxHsKzpstdEwvvE\nTuRDHVyZpGcmv+8gJirThHZ3A3kn7rIYQr1ULLi66FK99QhaCviMWeDFj88D\nSzPkirgST5wW7PBF1eAMQ3zvTde0/rU3CY7oxhTBdGyFxMjAeWgIIwMPbsPM\nPD3U\r\n=B+h5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cb902b0f6ff02df656a0306599c5cd11d66150fb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.31_1585192243580_0.9373580349853792","host":"s3://npm-registry-packages"}},"1.1.5-unstable.32":{"name":"aws-amplify-vue","version":"1.1.5-unstable.32","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.32","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"powerful23","email":"wenzhuo235@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8fcf9c20e9f466df078e399de214f2bc91bd21fb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.32.tgz","fileCount":47,"integrity":"sha512-bpVoEu6bi49uP0/CjPtKBJlpSvOQ/161VnDLO6bIZ6KUpgTTfg+387CZTAV8APFxEK2WvgQNQdg47U7NbGYmWQ==","signatures":[{"sig":"MEQCICW8OBetOEjfFZBNbiOF2Ji8Nr4T7v47SFLmelzLApbSAiA4UfPvcTxwboV7KHoFl9/Rbntg1/yt/DFJdlTHBFTwQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefN2jCRA9TVsSAnZWagAAOXgQAJI8VxEwTd/cCf7gU4xk\nuTJdZPLlHN61a9h9G71Cg5t0lddNkqsOCLM4Vyo5docvJ2XXEqPy/jIEuFzr\nnTJh4o3MBtsSeTk8y97kqkEsn654xQvg1Q+6j/MjrcEi9UDrpZPiGRm/YwK1\ndkD950mqyq5XkKyOdGgH0eMGprF+41ZsaLVEKBVexpdcDEdeUAri50Oo3780\nmtl+UL0mXWYlZmvsIEMaWLCQmpDsoinEbrMT47pI9Px8LIouLltxI3WwrALm\nu+onruHG28jjn1zhjAWx74Fd0JQzYCsfx5cwzPBehcsM5seOdrEH/5HssJ/X\n51rEpr4KP7EHr5f8EJ58+fOxAa+eq/f/Ob1yM5W3bNDmFyu6LpWMmzK7VO9e\nEXkU+V2ZdU1gyY+BmHvmbBeAzsFv9kMqkQDNrZdB85bCR219SSOH0Di+O/uw\nLg8NnDyteHACTrb1zOtKC1Jx7iiyPGB8DNLfkcQnwEWRBl7h6c14lQuXpJrB\ndvbGXr4yjugZ9Ew8RsBJytzKW+xQ7BAKM8xhhiP4sWi0OXrWuLgf+T9+j3oz\n+6WYewoMyAv1nzflp7FOoTUh4GZTXSKZBhoCQ8Jjv0WFSrImHeGsnEmVhJ8e\nBfvemPaaHbYueXMA6PS96z6Br9XR0n467tiVZD9dmB4nO6LL/wSGaa6/v1IM\nXLuN\r\n=P0v5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"05f1b547e3381eceebaf23cd8716e2701a3a6295","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.32_1585241506413_0.18667635166856278","host":"s3://npm-registry-packages"}},"1.1.5-unstable.33":{"name":"aws-amplify-vue","version":"1.1.5-unstable.33","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.33","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"53605ab19ca339bfbc43ab7c88b0453446a95d5a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.33.tgz","fileCount":47,"integrity":"sha512-LcwAY6jELLccAk3KWhwmEXBdt0VjuDTEcKUiTsqX72hkBO41XevUnCLn0pUJNweEyZjS+Z/QbIrjuv6fmPY5Vw==","signatures":[{"sig":"MEQCIGmNyUQ2NGxabAB9GIY5UAzdITpCeKuTI3UTNHQJNgmXAiBCnYaVvbGxAiuNYIiEijiZxb/nN7qNGk8p3ASFH7RuYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefRBdCRA9TVsSAnZWagAAlGIP/3ps/W7zbKgEJtgAtoDd\nPsZ6ee2jZsWBM5AguIrdyhpKDDGLmIEtdvUiQm0d/VIOmeGVBC0ZNJlS3NrC\nqFfzqsY8/sizGuki4bF8Y6UJT4DmxeX6TphTF/RX+LhLq+bYUTohKvTa6Avy\ny1LwXhiCvs9CkkkHKkrswRFNvYAjtVi+2d+4lExt9sPmoCak3DIP1+W4wZil\njKYUI/1g1q+US8XV5cwugJP/jXPcQ1bGkSj8UPcMfGC17ngbySUkDoE9T4oT\nxFhivgjJrYPL4d1TNnnMxJzCor0nY466/lGHs1uVkQzDHSEa+qnd4l4pIYqn\n83CnOyk9A6gYrGq8F+Lz8j89kfK7xFROSXVH4HUcYIVKVP12B2VkPNuV4etE\nZgDqF58ZmqY6qXQrE230JdqoT0rpLcZLpAASLU6O0lpYdKqvMPGbBEXpzh19\nWY6nYl4fa+dOMVfP8k9m0j5pjnlAbIHcr2qePyTAqb9wJJHGpSE+6rZYZzKs\ndAW0pxikQupHECP6K9SoQ5x0DHxd2vFeozqJ8effsXDI+wVotG7DjN+US0Gq\nCqbHx2LfTj6ZtADtRlhNXFjQ605BAt+5IsThbQHi07v1IAFu5J7x0Lz0OyvE\nVjg5ZFequb68MpEJdALI7jFEtqWsgPBmEl7rK1E8uZzlAfjwCVc6PT03NPkV\n+VGi\r\n=23vj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1d0b8e13af483b7ab47d9b4bcd6aa00d8e67d9f1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.33_1585254493057_0.1371744776737187","host":"s3://npm-registry-packages"}},"1.1.5-PR-5187.49":{"name":"aws-amplify-vue","version":"1.1.5-PR-5187.49","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-PR-5187.49","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"40b6d8d2f062707942daf65a0dfa8e7fa7256627","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-PR-5187.49.tgz","fileCount":47,"integrity":"sha512-Zv2Iwz/R/CAQ0WNJfxkeLL97PkLzL3xBkjcfdHIwFfyrLs5JDEQAtXD9zsFDoqwNxs6SuOAv1EJXyUfer1wqGg==","signatures":[{"sig":"MEUCIH3/c7b8lrIgX0ffJOiWXLFA4FtwMO/mFPTKHV4bKHEoAiEA08QXa055B9P5GJYxOTX2kKlxRxZ07/hY4Ka9KpcepCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2973942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefU+kCRA9TVsSAnZWagAAhEMP/irdJPQu6WIFhLf90xL/\nEscWy1GPW4bIAoM0pAiU9ubBdr2pEnzwXCTLEdC2BIFrGfdkO4KuiHjpIagP\ndr5SM8YnBPUdhoQkKXlHaETRAM0RbNJNYuWYihFGEcSBzvg4lcfMgbE/e+0W\n4s2zumCLjPoNJ+6m6T73VWq4SHhWltmTu59zLbPGEAYmkKczQIGA5Iq8V1ZU\neJVIpR5G514RNZioYP31/KVA3B6pOEUMHLQl9q4rzt+7m9l7oS7ivlVLCAmQ\nkh54VyHuor5VjaeKo3oL9mRPoIJahcLm+2QPMin6Hey26TZBclvDM/dhHYDS\n47IUTWIVJWKwRIpfJoRYhuQUxLQiRIhFAW1Isp39/qQpep5umOjqLSkG1xfn\n0WBcyPdlemK1GQYnWopCYhQuvJivFAF1UZas7amti7YLf2426UYiEvbSMQxI\nTS43H7krFFoEmL9RLh1/ZqbT9K4tjvzjqiWLyuSf0gyX4PyLEkEeFpXUi1YA\nv//5sDwn+PAl9PpujHqqtasb9x6cPMmaYfizVzOht1+54Jpy+yNNrjgyyfML\nBk6uzGz9ZtfEYvvijRuDFbSMZh3aXR94UY83YrSvaa2IRd6/K94wcFtakMNB\nUdHoagoTmT7f+/dlbcBx/WisUuIrXPNddB9AvkYn9VracP3KiphZXnubYPL/\n59Iv\r\n=EiWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"86401d0232e984ed60c28dd604ed9060665ff792","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.16.3","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.1.4-PR-5187.143+86401d023","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-PR-5187.49_1585270692325_0.0364755380210362","host":"s3://npm-registry-packages"}},"1.1.5-unstable.34":{"name":"aws-amplify-vue","version":"1.1.5-unstable.34","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.34","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"08b663abff314e747dcff62906a46dde1106df5b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.34.tgz","fileCount":47,"integrity":"sha512-bCVfFefwLK4D0O6XUOQ+/kXCmGXZ6XwSO3SdBiG4sYvyRATzk9W8kzrclA0vAzHuaAK8T6Nca0S8H8+5KBvY6A==","signatures":[{"sig":"MEQCIE5V7PwQiPEBoJg6fJ6hKEhjNg8W0S5i22B9NnXLhieVAiB3p3G74++TbnWF/uPKb5c+P5/48OdjIq690oEQWrgxHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefV0XCRA9TVsSAnZWagAA7qQQAJSW3ykXKD8wFphqz8XL\nslMRlDWM4KZ/2amR8ktAu2CDwpBNjZun5qD80wK95v76ZGG6aHwpIAYpMm+l\nVLbpDIenrJYjsd2K1G/9tN0nC9kT0wF2C3Cb3gP7Nc8wV0UnH8k/B1gc32/g\n5WYClumi3VmZZdBss0k6AsMzrilyMOBgjXS8A/DftdHYvXcdh3A+mcyASltd\nz0tEeugEuyADM5vhD8MRykkHIqwsoL4FAv3Sr/7P73OLdY5n/zZWBz0LawHy\nb9V5bnAwXOEK2ZSePtjeUFlmd7wOv3MEzafkBBuyGtoLR9rBiaPEyzEcRtuf\nmeiu8pVCXhAG1JIg8R91lEY3TxHqUzMM6HNLihwxZ6sPhJC6NFBR8qwSybt1\nQm9oDDxMoqJAQkG52iGiCVY70yhrwGR/ZJtw9maHPyHkwEBsuZnetQUpNq5U\nC7qJoP6RGJQUHlIbKYvQjf6mhaXw3b0gwoUgJ4VQA8SYCMkz9DBSnrFcSJp1\nPh9CxSn/aZMTFTYkf8TBMVk8N0+aipM65TXUzwRvgl+HJekK6XyP/E2LRs9t\ni4loigfNVrM6furR0U5iEbfP2i5ZUWND0/wynPuJg7kd4/0iueCBWR0/4fTT\nEjYAraq/EjqBcs1Mry6uv/KA7T2fRLwzLib7A69OMQjwZnXWgvtGsyxMP1eh\nIKhK\r\n=WkcH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c9c020d6d13c5678ce15c738f7eaebec39e2b48a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.34_1585274135088_0.5946307259700854","host":"s3://npm-registry-packages"}},"1.1.5-unstable.35":{"name":"aws-amplify-vue","version":"1.1.5-unstable.35","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.35","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"644604c39240196c52aef07ff6826aa022d1c809","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.35.tgz","fileCount":47,"integrity":"sha512-QcLST5fLHRLPqMetjmuchI1jBawIxObbZoe5Y4QGBE5ROuqcQyUoTzwEDQqQoD74sqUz0mNiYRDg+YY45fY3MA==","signatures":[{"sig":"MEMCIAvZQGns2F9QiyjRpsgYjf09Ss5J6f19NouxegbT14h/Ah8h1DOL13fjKFQSZcPiqqyupW+6dfcYcBNsGsXHH3X+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefWGiCRA9TVsSAnZWagAACTkP/0ew7Bf/JNb0j8VuiEqi\nTQLC2cwp/2LTNJaB1Xlr4VHeHaArsrha2VppypXjAHdCd4IVK1BWc3b2b5A8\nx8jikZ1Dn9XavG+ZEQrCL6eXNpxvpRzwitptmu82pqZ+vT512nlEV7vEOFwZ\nLAM6U521YkOt/dPKBoIzahlMKh7HvpDxJI0tgk8BCbnWawTafEVhTa89Dc+D\nVgrF4WA7I88B3YC6mwn82n71ETy9u1NwX5hSyYMoBEWvfFca2+XO0lU+EF8G\n9rEYhxtZJpxkzWNnGEMj8VnEkPkNhNdHjp9xoesqaNPAxlmbtxFb9Eco8sKW\nAYV2Yr1r5EcByF+j6TL84fYQwHimlxsDk1yJRX23+ddrlMD1HvWcZj6Mt09y\na8uLoGrEX3UEYINYwG1RLNeq1RrEs4bZ0Mla8WGbrvJBpmHwX5KiDv7kSiG/\n47LCeFu423Kx88CcKHLXQ1HkV7vYN2rpIPa59RCee9ESg04rPpvb5emz8iul\nsLElUsQATd6qpd/MLBq2HaaXfYxkUWuh4RuVtyrimENUYwby1ynlSR0EdkG2\nilBn3iBwva8LKdxwGqjYbhu9uVgDiCiUlzO2ptyrrHjkQGy12e+n7LAL3Chm\nJ00u4g4NwSmA+4yabKiSIvTLM8vMOU7KlGuARjV0eLHGyN8JFk0bevhAlA03\nMaPG\r\n=itOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a4f518b42e192c894300225a4c5608d397eb6816","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.35_1585275298357_0.9706324387976537","host":"s3://npm-registry-packages"}},"1.1.5-unstable.36":{"name":"aws-amplify-vue","version":"1.1.5-unstable.36","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.36","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"450d8df836d16616ecbbe589d9b670e3bedbe2e3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.36.tgz","fileCount":47,"integrity":"sha512-tBHNL9/Orji9bU6xQDbGQNs01yaFroe1Fl1N30IBMw69IE2J7YPTVwHkRdZzhW/lHIOas0NkDuNRyRarRMPCIA==","signatures":[{"sig":"MEYCIQDif6zRgSmQBXYkqxTxGsNG2hN9nWIYqhJR9ghLm3Yg0AIhANCe3MMfcyQJQRr3Zydu/QWcZ1U6O3WPcYVyxgidSq25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefWd4CRA9TVsSAnZWagAAs+cP/0GbgljW/aXmpx+Gw3LM\nua85BXN9LhUhOrE8MSdHgVR2jB5INelHPbL9Ni38XByfTf4HdFvyHbgq56iv\nh3rPFjaQGOmjInDNr/GD2WOobCt/F+FoCVYpjuPQcuh8shJVqgJQSu5VoZKB\nVC0Q3vnqshrDKbW5dZ/9LyiX3o9+RNH5br1RdetwpJxCzamqA0nF0qR2Hzr4\nMtHbR8TTlHcvr+bjHalMypSN01NpEkeL02gz0hCcejrK0yYXYTzKHo9gmDc1\nXwW9vj2wnNQCNjwM/RfKVziqdLq0Yobb8hZzJfAgdwEkAsMJu9LBSd/IuEWT\nLzKpeCYNLcIJJQixWlERc10gxaVVRcdq23JKvVVAbvsR9whSHmttq8UuwbK5\n2f0EKH8m33ZrULrwaWzq+etj27nmd3PV28xuByLuj0a4Br2NIXC0SvE5qygE\nig74r4cKtwH837OwIHGuCpvy0Lnd0vNsQl53pBcZRjVJHxlorDaPLOkilML4\nicjofbMxXAVON+rFow7SkWm6odURZHVy71676TUOWXf6Kq3KsGUnt/Di7frg\nRsToxMoz4T3NwkUCRMAMJOxUziIdE400zDMcN3LoYtQi+OKnSQlgvV2XndH3\nCtoI2R9ghGe8+0yD3VD/+uIN20v6ENhBKmGQm3+IJBMIu0oNgyS55nt1+Ql0\ncsW/\r\n=G/hV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"23d8d418bd5de85b96862195914a34ffb963ae90","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.36_1585276792244_0.6896283875158682","host":"s3://npm-registry-packages"}},"1.1.5-unstable.37":{"name":"aws-amplify-vue","version":"1.1.5-unstable.37","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.37","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d74c02e3c66ff5bdf92614004016a76b2c58836c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.37.tgz","fileCount":47,"integrity":"sha512-UCrRXLGRrP8zRlrmH0sOZF91cvrCl/x891aVTR/yMug0hnmlFOTJKlif6+nhdOKAwHlFrT2rpbET0U6yLnWifw==","signatures":[{"sig":"MEQCIE/tMCl7/Aooht+UhpCo3J6qrJAnj3uWW5vJygDRGRSXAiAfy41J2MjSk4lLQjcpAGTfaB+ftYDfZoHd4CyfUlOPNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefl8TCRA9TVsSAnZWagAAoC0P/0o0NgeYHxfkIk4kC7cS\nJqG0Pz36OcDflOFGhZ9ERIpbj+BRatH2w2NlA9PhpzctuM4Out0L9ddp/nBt\ncnUoY3RVEj++u3A61a0g5vvBIv0Vg/7+GZoNt1JSvl9f8NoJekhqOLfTwZHj\nEgIbJ/X7vExYhSFlNcpbarVmfZHaJMHpcDgm41Uy1qqcEIZCm+cKD9jG4BDI\n++WV+E7xaseK++fyV0F6QMfACjgR6hp64rF8I2HJESaZQUocp0zdU+VKJuW1\nsEzziaf5augbzDWe0fvFy5behOHpljrsNynUHBkN/IROoGkNTUNtLZqVaKHk\nwL8o/UKA2G1qmi/E3PjVKHcd/UxGZjhcxZehR2uREPg/hztVaUvovBRBKQDW\nUUvqnXc8yNmI8EXhW19dUZWH8fceY4cb9WJYq1BWUNgn/RT94ZuDw2fHog2q\nE3lXcZvuTP7t9O+YuahEDIdIcmx6IxfTCZWZeSx9SLg/78PZF535AiA1TLYG\nF828tYhBHy77cVT9QzKGIk12fQ4pevFSfiMwFlFpoOA4RNZcbP4TF7gz8p2m\n8/gXXYo1OGrFczhcMzxqB6zkQ8tG/x0f4Ok0cVVSmSGXA1zuwqX7+3hyGHE6\nqJA8hBwcw5dg6W0+vIXlB3o2qZk4jU6qWF+/HU9DzFtGx6RBEX2cLlg+gjw0\nCkHC\r\n=kqPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d630c34f3132ef38ebacc27bb5cb49d2733e4010","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.37_1585340178726_0.5210096103817083","host":"s3://npm-registry-packages"}},"1.1.5-unstable.38":{"name":"aws-amplify-vue","version":"1.1.5-unstable.38","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@1.1.5-unstable.38","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0960820a712473ce31e111435d5dfcf1eba3cd16","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-1.1.5-unstable.38.tgz","fileCount":47,"integrity":"sha512-bhEbJPT9S3aKeaBtgWhawrOpIWqtsjg+/KDWYqfsLm6xKrOXYIKOktLuH/PLtP7j7VK+Q3pEO9Sz+kO5i8uogg==","signatures":[{"sig":"MEQCIDy9zOqmLsiJCFwqFfNVJfNC/cG/3+OqyPMFYkRP54NXAiBlDDD9dLOwL5hX9vP9OXnvGiirQc6wCjzdAfriXs1MIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3865309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegltMCRA9TVsSAnZWagAAJDsQAJQd4opyyYO0wt1y860T\n690llLwR0cNQoQBPolLq4cIp/iOH7s/1N3562yh8Zbw6cxC+6fm/Y2216k2D\nflmrqJrMgyKkpaZyVsEStqhuTdNXI7QmTwXzzQYRHHuD4KRJPAkoDLinOGIr\nzx8E1P3ECDcZmNjIGsY+80jZEup6XSJPca186+E68VgROi5Eg1hvdnLmMk+/\n83RMo20QCq0T1byIWd+n6+jFkO4Gn3OvB+JvbjBTFOEvOGI1EUBN0Sn+uBmM\n5QrAPSfuw8JtloLtW7H5Njbad+c5KRBniaZnhwt2wqFaTynqA6+uQwz08FOO\n6NjHDoHkREQsQCwyRZ3w+gsqWttrSXyI8ymDswvyzXsh+THrfylUs1oSdtLK\nLoWYYtSd6YaXt5zkUt+xYY8CUyw2X9IKyR43MhbRPWBoBNvvkV1agpElJYHk\nH1DOngKOg5Mv6mPUy3/bEWtgqjShI8l7lYjtXzOGHHTP4emZ+nXnxJEoDs92\n/ZBQAnzw9wWEbV9YKISK3bWwFCGHVFZG2c3sXFioIvU2b4Xsnb+4qm+TxN+b\ndZ76Z/g9/uopYooeHVHhiBdNDevQ5Cen0zOoI/i3GuA8wX0ZBcdgzNtbYUsh\nPa57dCI7Mh0O2XIaurBBtWWTUWsuIOYxE+xlDqYUnFsc2MMCRGCOWmswarG/\nicBa\r\n=QmpY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"71044ae451e37de2161854659618b33012ea8a7d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_1.1.5-unstable.38_1585601355604_0.35811694118644977","host":"s3://npm-registry-packages"}},"0.2.14-preview.130":{"name":"aws-amplify-vue","version":"0.2.14-preview.130","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.2.14-preview.130","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0d1b54be9eb6e99bf2f51f795c5f2f03a8bea20e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.2.14-preview.130.tgz","fileCount":47,"integrity":"sha512-Jn2Qgy74IlCFHB5u7jdHLX6gVLuijk3PC/2sbT2ScfCZnj3/ga4WrM4YGP7oDkSguVoRtlzB2cLpKL9/hPPnBQ==","signatures":[{"sig":"MEUCIAXK+FjO2/fvxWOKBsjfCSjqyHRg9Y90TQipql2jKopfAiEAtE7WJKtU5QJ/or5Ex5+27uJsc/GOOOoqhuRZyh+xW98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3863597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegmprCRA9TVsSAnZWagAAynoP/0yyHkwfIucjJzKKvOkH\nTVHv3ta3pYhikPJwwc2cvh+Zjg3wmnLVe1nXewYyrT+nh46DtEDJZti1r17S\nC+woPgq9XEVK2b05sg5Jbfhyxw+456aRjT3NXfPe7Khbm/xl9WQDH/zB3c7l\n+V4IPNW4IRmVZMzAlfnpvS6U4llIMtPANbO1PQMaAgXT/sMm7+LriiAhqufD\n7OrMQ++3ykFzhb2aubVkaNYBOM5sfzTr7AcPbA3SoE/kqY1DIZvGKrTVJaAD\nlDaP0tcXEXvCzYLcpXmjQdOND3QnoPgkXtUFjMq9guJPRhDfAuoDklP1nJ6l\nBQZfikF1C0sW9bmocCrpVOFHrLmVxF7+orniZXXooRlWeoH1iH99I3oISsXG\nucGd4IedKGgKmQ5iv62sk8bc5QWsPD7X1yDrWLLyopVvtlh5F0NULkbR+2Sp\nyoe1zKbVX07XSOl1co6xgF0w5qFkq85lcXv889GrZm1kPLkOLbtWNB8VdCrw\nQqhIU5RiZ36C2/hr2m8V4bukq1w/8auWqgazdqOV+9zvpeZMtp2obeb1N/X6\n81NVWYrUn/sVZLIp8TJ/wjhLFaJT+4X6kFWuiRW3JlRzshbxfLTVIKCGK4IR\nKE70zkP9M8wQAz79lH1mtf0UbZAQYihPqBTYpbAMOdadzaorc6dje5cUsrhH\nh3fN\r\n=SuId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"21a00b458c10783d4e6597781f138e92bafcb9c1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.2.14-preview.130_1585605226677_0.6905465121984802","host":"s3://npm-registry-packages"}},"2.0.1-preview.0":{"name":"aws-amplify-vue","version":"2.0.1-preview.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.0.1-preview.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"032fac6e0ef14c752fa7982dc17e84279b17d05c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.0.1-preview.0.tgz","fileCount":47,"integrity":"sha512-LaUhIadD0jRQ36VS59NtWZuomDSx4o0zTfQGutOBNO0SPO5qFqamjaCaelfu0pa4w39lOdPYyw0+XREZIvNoJg==","signatures":[{"sig":"MEUCIFHm59Rn3eK62uIfB7WwWKPf4s5ZiXh+HDQYW3wv0U9oAiEA7jB0905zR2iXxDOKKZAo42iSdVXABUwUjXc8C4Y3X2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3863594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegoYNCRA9TVsSAnZWagAA8h8P/2EJiHvTi4AA1dzQrUA9\na2SnJnPVYuxZGKf3GNaW24AVPMlEHYjEEkKYRYAyBr32lLtsG+YQnjAmQFV0\nJTa59up6KIFnp/VjED+D67HUD5TUZsinssvALHZyAQyD/Np7bq2edWs2Plza\nzrKYNdIvZNVapzw2yIPR+gDXhh6RslH79bluzIxlj0hZmfIfTsaeTyaSQc/k\nukL2XfWs0IrGO7QTfq1C3sHKXezSdWHTt4b1HI0cDi1gAGjTna55WBpiwmZa\njfrJMhuew6EKV93q8dW7UtbUFtWPSUDdS1H7ytfsVaAielzRLwoTj03q4hy2\nCv55v6i7Vl2Mm5XNaAb3i94ioW80zFJvITl/+GGStJYg9LRvPdwHwiKxng1m\n558+q+1GfKLDOoxadx8GQUioUPmFc0Jc/oFPxQqxLE2ZxyAPLFP0cpkzMs9d\nPy0z8NzLBH87jNQ/SDYzEONrNCEeWpLhwbeX838HmA9NEe01PdDyNVp0+CSt\nDz1mi5bXwwP4QQhWurFQsCPPSJODRXsdmNG/WJ/Ybm4MDViia+C2WddUtuFY\nKdlhi0SXmvDagIQkVFseEms5XtzMzm8avA1j45gwOLbI/2i2n9TrBfk8GfpC\n6DNRDO4BYMVygl8BBAcoIKyz6wj5iYcplOjVxzW1MywWjgikjlh987uB4oX2\nGaKk\r\n=x8BK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4f3b285dc280a9c962cb2ef1511a5d1e0e4e80dd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.0.1-preview.0_1585612301492_0.30822225250356317","host":"s3://npm-registry-packages"}},"0.4.1-ui-preview.54":{"name":"aws-amplify-vue","version":"0.4.1-ui-preview.54","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@0.4.1-ui-preview.54","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"80c7bd6d6775ea233a7649348bcd310b4ab420e2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-0.4.1-ui-preview.54.tgz","fileCount":47,"integrity":"sha512-q+x3B3B9wfLi3DGdKCrwNAlG1spCIi06xJpTDYQkLVH+22WimJoIpYWK5oM+mxDlFne6ac9o543jJWZ/C9Tzpg==","signatures":[{"sig":"MEUCIQC+3BeAK6w5b1kAFvxdYtethgiDtesAdAdeSu+mLUkQWAIgIn/BB/QU8+ZQFYCFL/3+s/0hd99uVywU0hfHmVSE9x4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2960821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegqXGCRA9TVsSAnZWagAAtukQAIbA861KhTnJzoZN92yw\n0c6XTxmYdFLYSL7fwAZZCLShKekXhniTyLTOZ+seVNdSdbVxJk3dLobCC/qF\nnTIKpBxb/da8hDuzYPQWSVxDm3i3Euhm3W03EQkdtIrmkcuQ9k7UugJQztff\nCmofTTLJ0/VrFHDz4IXDnIG1J17/NtfjcRPOktU5Oh21XO7RE7qJ6Opk3fZG\nLnf5CfcRXlfB+6jqrnR+HFGN6X4mXfHB+aWYaM10LtQfFmlxqljfbKeYSXnu\nmOTLn9ujYi+4fU4KGDr7cPrL/1wocl7kDPNrUC3BWO0tTyci7/2ZveAFyNfj\ncRt4IbqsxvZMIy79pQTOTaEIJJgvuzBBnjqrANorKdjDAR/EvjYmBpposhoo\njqJirIQwcnAEnardkuN3/B5Ll43StQgH0g1doKy3jlilJvEkjfjnQaXmYxvV\nka47eOLbPyKb7JgdQ1xZ5uiHCW9yX+eyQ962N8xyvoL90qRqmDgtdVWub4pi\nksGAEAztrq4jSa6V+9YxO3hE6omuY5zxH+y6AsC+B7StW0GLhiLbBnEv+VWj\nrXyR5NxAYR4JDoqiloMjVA747ZDfb7jd7XC/Ki6fLsKpTVceWPmjEk8DgIhP\nt3+o9POf0gGR68tKGrv74CTnz9GKU3CKFIrlQZ0s/fplvfongdgjU9HCgcOo\n3Vdo\r\n=cmMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a0b354e1b33791199ccbb761041cf2fa6d5af9ea","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_0.4.1-ui-preview.54_1585620421756_0.4210698578658909","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"aws-amplify-vue","version":"2.1.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e0cd1219074b8f4a3e55bf2de662f8031e5cb2d0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.0.tgz","fileCount":47,"integrity":"sha512-3TVo3xh264tJlk3BlLBlPSMG3l0zYFBlqjbBka3q6Ef/zIFRh4lyrFaC1cyUkezSvN87FlzxDl1JpIqki3wZsQ==","signatures":[{"sig":"MEUCID6o4aQxYP8r/LIwvPxRVLwGZ8/cY7YLPbhPpYaNGcQBAiEAhY9SLTPsd+n/zTLGdVaerl0/HP4ePrTlCeZOosl6oQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3864096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg88dCRA9TVsSAnZWagAACOoP/3qRrseQkxMasAv5icxx\nZe01+N7MCTqomPCOJod23HNAZHua2rw8B2ITQihN0iyiOqBHnc/KoarYom80\n2A/lw8OkudpVLXHqzdpqF0zF23J0p9lfRLvYlgpbHlcHApBEfmeeQKkLUqu3\neAgr++Jtkx8uD9FIloU7RF6zuC77rcd1R9X17CtNyo82sRiuu7+DaaMihVZc\neXn30P+9NEp34XI6vp5rMSbvnvVCeEMTm/URbJUCnwkEQul3xukPpcLUjWRc\nq341B+aO0YkNGJHmwqvxdbUsZADFEXtnrIEOZ3c78QxQ4wOxFu8SGkByCRqv\nkbvRzAL1dk+ZaOHdnevJxBfT4tR32kfyFoIecXfW07V2J10o1SsjSLClabjC\nSZOkOEwtxUtAZnCS7acnhkBK0PBiNEMSVHhkEAPqgPf3tgLPeMHcdt69H2t6\nGpoL1UshtlyxCkAZmHkhOJ/z8vcw7HudjQ3oliUPAhAjPBGgA1APOFUsXK1E\ni57CQuaX3VwpUvihgziUVqhJonEKQtFVq+eVpMtefvEkgk0D6RvsczZ32Vzb\nKqIqqq0o2+CzVUnkt2+tec+c/vDUtJ6T6FsdiAzuQ5eunazfX+X1XVAzs98J\nI9lnjh1Q7VZ/M3txTAPvtGwXWltsSLdgYvyKSqYaqEMZPn06bJd48v7dzdRA\ntZtd\r\n=T3Kf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8bb1334bc090c44be9916f2fc3e09d0fe15d787d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.0_1585696541171_0.7442887203382988","host":"s3://npm-registry-packages"}},"2.1.1-preview.2":{"name":"aws-amplify-vue","version":"2.1.1-preview.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.1-preview.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8bdb52b4e3b55fc10c30ca0bef5ee8cdac1519cc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.1-preview.2.tgz","fileCount":47,"integrity":"sha512-QStP6frC03j03xPmJ/UASlmYvHIJpzapsLly5YurJkwojad3aMmN4DJiVX5Qwjj8AXyD7VXjEhCW1cdv67mihg==","signatures":[{"sig":"MEYCIQDtU98cZKyYK+hUQa/Dg/+fooBS9BJp55Gu2W7KKZjH/AIhALFeEfECZheT1c+ZgahPDbtY9UviYPUlMJJdisz3Gr1g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3922931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehPbvCRA9TVsSAnZWagAAfL4P/2sCgOi2PsSZfoHRYWTo\nNxycMBTIZ46LB8X8RuFx3Fo0hOmox37PmtUMNVccHsyrOg4FWnVz+usKDl6W\nrmldJ8lRKvCKXJUFdA7WktyJVoZ+daBny9lYagtwlIsHRnjkm5O9QpwnvNJR\nBHyeQ1IXiR4GjIFr8qPIBJYhbNXPQCaVEX5ENMAzhJrg7XhBRRYWsUJP+8gB\ns7rBdDoaNMwEuKd6astpb4hx/5E4CW3ruJ0Woi8R0+HuaX54j60ijpHXBnAs\n+APsab4CE+WpUu7obeFtqrcAypRhNT02k2NJ8ABugY8N7PIIEQvRLCyF2wi5\n1ypfUfGFPqVcYhTHNTdIhK6F0UdINSKpKWwrGUG+jRaWbbtRurQovbTjYrE7\nrB9PzdpXsN/b/6JRuUh8vE/XcO9/JlnoDT5ItSQdbVftZ7HCk3F/yZuNDqE7\n0C5rhpe15c10AyptBJZusob+teh5/M0KspFdxxmFugr0YdIBJQ1elumeqpga\nsrNzBmKRNfP8lCgkFeHwT1dAcFuFxJL/bE0xhgcgDnihWE0g1MZPe0jb2HZN\nvxVWRdZAdUvBwWxqt8OIs94o6BEpiR7+9dvlUntjbM9EMgR7nXQO04cLf+8r\nY85Zv7ZmKMlyE0EaD32hsoQ/2gZ2ysReN+xz44QFlHoMFP4jto55pFabgj/n\nWFCJ\r\n=c5+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f3dd26f72ab4741cc529283e77764d00705c167a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.1-preview.2_1585772270685_0.20842212677388905","host":"s3://npm-registry-packages"}},"2.1.1-unstable.2":{"name":"aws-amplify-vue","version":"2.1.1-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.1-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a445366835ea2b8c3905a65e9e587d058cb5c061","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.1-unstable.2.tgz","fileCount":47,"integrity":"sha512-diruYhBOCywOG4ZqeGCFdqTOQerwx4JG4+Df+woRrQRiOCUpQH1bRI5zsIzsnuAvDpQNMiXiUZy8kgcs6PgPqw==","signatures":[{"sig":"MEYCIQDeWrYxHOPhzgZkXL6jhQ5gI87W6Xw6A9fJ5hvWD/Mq0wIhAIRfVZnpVWJtHHG31enVVl8C0p4DVEItws7zD/I9lx4/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3864116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehQITCRA9TVsSAnZWagAAWrcQAJ1QTrm6dpSbKwMCnCFk\nqtbpUu77vwDkQQXw5qT+Syb+JynYmCI10fq+n/INFAArOVt+5UHBBwYeccNH\n4HHWiRxyLmdo7bM2//hCAZTDa79YNnuZwwHmDLKD2NGtaeNwIOQlDJNAjLmY\ncI7h3oGyZRea8fWjaXKwMvMF7XxzIdTebu4D3NLbhJU9oPuLk5LkVPZlM8rT\nz7w8f3KSiH3lLMkVfdAiFza79oNdNwmOH6dz+HIZoU5GGcUssIL+Ea4uVeio\nCZLulJxLcxCwDuXu9z5fNcfxgxlThqKx4KmCUmgUbgd1hGN1YSn+AqR5zwaM\nQqTvvK0eJd1GNDDXgshStfaiNr3SdJ+HYXY5az/JorK+tGFhSeIkZkIsbnB4\nsBKIq+uSdZPoEr/YDJaW0sVGb/ID0CISDY/3QLmiHmuEw6+qL1Ijcik+4WMt\nBU9ZHbm5K8kvtEgGlz536YgA8R+5YrjiZ3mEYBVgIujpw/TTd51w1kuX8Rpx\n9w+3t+CT2V1ljWGiKcdRIESaKd5dcT10T1UfoQeEkLsd30saIulTVfkRfnU/\nWUqmeVOHUa7Fuy/1wOexrQCPNb7cI2VN+tikaX2v6QQdjLvtVSl0RdIEY3rl\nikRPzxS8LJ+9W6CXigNxGzOLX4zgi0CSMwfhv7h3A+Lnl3a15j41B14iRLj8\nMuE/\r\n=TNz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fa6f57de239d04b4dd88a1b158e52ca0b0bda75b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.1-unstable.2_1585775123173_0.23686248105561925","host":"s3://npm-registry-packages"}},"2.1.1-unstable.9":{"name":"aws-amplify-vue","version":"2.1.1-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.1-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"90f75cf5a80b7c266b3e7c2506114c0b4ccffc47","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.1-unstable.9.tgz","fileCount":47,"integrity":"sha512-2Gk8fZRsDQoe1bENGUdwJfKD/PS25dhyx1s5pvS1jZ4kMuMc2tginHf8p0cKCuwc5RQbcuAB/EKaA3vLxGtxpg==","signatures":[{"sig":"MEUCIGQ5Rw3OfNhFy8UmCKuiH+Y1ZV/XttWkiXxZY0QL57kUAiEA3czcshLv1VWRZ7HKKRRazuDaHGWL9YEzavDt4+oUeO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3864116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehSASCRA9TVsSAnZWagAAcQYP/1X8HcHeTCLbehzyn5MT\nstEzFOMZiazBS30bLizyiCwq3UNqbNzPyETZeYGnKswpVhpAgFeE0YZIHHJJ\neyxV8dGqy0jKjlqqlcXhAnBKLYanJQi18kEjOKTyJv07jTWqShDTrqQwp5Jf\nefBmr7Ri/cjeOQ8BU2oyylDnmcQAWZmkBVlfd/c7Xx3ykRj7d3MJo/eb11uA\nJER3bQp9YvIfsJNoifohoGNJ/y5699RbXi9FapFaZ6qxZonFEtjdyCMww6Wq\neONXp+bmHIynIT90D8O684a6dtp9CC5oOjE0lPxCZ56vuEavN7Ch+NftCOmy\nPVrJtSnWK2vBre8iDit/8owO4jI8763+FrA3eE0L6Fr7Y7AtIq0tqUU6u8s7\npAZ0ScMnt17vBv6PLsZWygfJeRO4AjzqR5W2c9Ytc7GbfPAizeEBj0+0BwrI\nVWZNaWyXK7gHChYvR04UsikXZTZ5dcG7aSKefrbzwqTJvOPZpfYeq05Fwj7A\nReWH6zx2gJh3fOMnfA+SNy73xCCxhyH5Ls0XCdW/VEVtlgvI/8rT5dzMouA1\njCg361yCCkd4SVn1Gp6xShgYUBgFeOUZCkp86VMGY1XVvdfjffxspYWrYogq\nLLS2dYMZvW+mPnqX3kYS1bkz+Kp5xz6IIVwmBjNREI0C/cd+HHBhXmMRHEr0\nqawZ\r\n=WkCr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8531486ff3250ee0b57bdfb654a82269929d77a6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.1-unstable.9_1585782801465_0.2894147804552716","host":"s3://npm-registry-packages"}},"2.1.1-unstable.10":{"name":"aws-amplify-vue","version":"2.1.1-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.1-unstable.10","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2dea863230f9b5fb3d391545b04ae5a6e2767886","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.1-unstable.10.tgz","fileCount":47,"integrity":"sha512-67T4wML1+JJ4ybHUoUgp9rsRjsv8MPHIArjXr5WdshmDk5tJiFqdkBQalc2d6dTO87xnKE7tMPukS9gzgPAk9A==","signatures":[{"sig":"MEUCIQDwbDtHDggcYErpCWOIA3KR0GVG6TtydXmuD9XU9InaswIgWz4ijZ426gZ6hf+d7jIaVKqWDRQ5fad4svPmjvwAjn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehTWICRA9TVsSAnZWagAA42YP/jZOVNYJIBN4mafK/nmu\n0iemBl3uY71zQIT4KYPD1T6YW3t9+xvjHQs0jPMWbsV4tOCswy5P0p8k30kz\nH4O529e/WqsS3KToVn78r16dlFHSJ/eAD2NT88bboC3m6yMfFLvyZ2zVMBxF\n7axP0XETNojxKss8g8WYpzciPx/aeyrf7VbcGFrT3X5Q5HKplyCJDjXZQP5J\nsBlZd+RGozLCjAgL6gIl+GWoYw1MP7wEZkcwdXpfRhV0Zdir8U/QRKZ1l2TT\n78jLiTyLyz7jSQPNqclRi2XcHfrLt+XQnW02WaYNIQS3EHwU4Bj8PeKKzV5h\noVW4oqSfDoeQmPXwb58e+ZAvLlr7KjoqI9+SiqItg8EKIo8Bh/RnT/3EL7DU\nmXSG/UuAdOI3E9ytIjsA1YDT2704AImMqyY7ww1UBcQfxQZQj8IYdZZTOJ1H\nF/Plhly06de2nGieICEJLbVFkbVQMjR6DasMK33w2RoK0gD6k3xl79pFLHYo\np6kK9/UiPYykbqM0DYbEv+6mr4+fiUBjihpKtG/qkO1XiLuxwOKjzBDwPvpC\nWAf5ThkKRzFbXX9NH1wWV0Y2fU16XbetVVd2JJfF+k4RJope1zrie1O9U424\n7TCFCTDkHiHrRbKUUze4ecmZFwJ9xIYMCF08krdxwnzGy+ZoA9nzj88bY3cR\nzmJB\r\n=wou+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fa36b38897bce2102265fcbee08298c3e74276a7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.1-unstable.10_1585788295575_0.917430515610645","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"aws-amplify-vue","version":"2.1.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d1ecd5e6d9fe963e22e5c3632d94c89436dc90d9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.1.tgz","fileCount":47,"integrity":"sha512-Hwa+/X5jQJqG57xU6DXsgTRD2UW9Bjla2hCDo7FBKg538Ua8zvyTWIqL0XDENU0+Yo5XE4742R3ADDx7ZlG4zg==","signatures":[{"sig":"MEUCIQD/iGnlpa7dlEskyEUKKfCQuyFzAMdU8moTRo16nLxJ6QIgGGzKnTjpIerQI9tskco4ltf9yeZQ1/i2moj38hEbtcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehT7kCRA9TVsSAnZWagAANqcQAJlCeZJLfQVum5yMX/FF\nl5ytxfHsJj9ygvmTDuenuNw9I4Szr2/58l2MDAS6pE61HUsQ7vPXxrcvQa0t\nyr85PRYVcZaTUpnv6LVYq/x+Xydf4KqvGTO7ds3htxZ8A9PODm3mMegFEPnv\nXRDvo/o4Ke24ac6/kO8SNkhcOHHAWgi0f8Y3fRksyZOIsFrCMOdsmTQ4fQ5H\nYX7/Y7YN2W/BRFj/rtfc11UJes4geUmmuKh2G76ml0w5pLdFf+1Yo0AjwT/M\nMU9MTXH+Xr0jepYJUqUKKhY3rF7QwFaNTxNR1MjGhmnnRELNQSZRlrhvraKo\nDEj6X38SZFulNp2XIMC0obSkR2Nrf+d9n+ExbTLpeKQkp3CLr08HPud/E/SY\npD5UIeujM+a1h4W5fKovEAn95oTmhh/3UmFfEWrKgcOoaC7OK1lWHv9XbRoR\n4buF5eFFRzv8W18Ti40DaBdRfoFaN6E0acCtVKMiuw7tSDkzat+dTppPgFFx\n6VLUs2waAqD3AadZeTotL7JORKZYZhiY5S3QVtjhstdpjZGHMBp9NzOzCuMN\nVg3qYevdlMVHvCCwh6ZzrE+EuMXbMaVZL5pNahqXJr5K49FlYFO9bqQTNzLc\nkZQWKgXgEqeBKEidHoFYm3yfZ3juFXYnZuk0aPz6IcWEmy5FG2uS0varOqR+\n/9WF\r\n=6zIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"b82c5119ce231f44ba97a81d788546c3f50b6b5a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.1_1585790692262_0.5934593779658457","host":"s3://npm-registry-packages"}},"2.1.2-unstable.0":{"name":"aws-amplify-vue","version":"2.1.2-unstable.0","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.0","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e0d570e9c9d9213552ddaa48a1a8b7e3b7005a49","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.0.tgz","fileCount":47,"integrity":"sha512-o5SHqw2mNKqPZhDpCMZzKmiYe9rLyqlA6zc1pfXe/vam+VIib1fpb5MN71L1EZUwi6YwuxsAXjY6poQvSjWwzQ==","signatures":[{"sig":"MEQCIEUVQQ9bLvP4S/8J2UdfWM8Zc/j0sqP/m+aF/XsplTkZAiB7jf4eg20guj6XlhDcwC/teVDXzXf9p6cO0pIkZy+IeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehnI3CRA9TVsSAnZWagAAGooP/iFXH3dprlf+9caFYbXN\ntGDGPRJx6QVjswgnmltM7rXg4IBbAEfXkVO9z387ZmVF+59Cj+2LI/khWCSW\nbmZ51+t0sBb604KIrJVVIYu4QdG1SIXrbEtxLOOXM9XbcoO1KlSKfibnEqkj\nJhPplFCRU2pxkbCyDozCYI83K1IHgQhx6BpPX0lmoF7xQyxyrlnTaaCmzLac\nZWSzUWRvlJPC92mdC3t7NKXS7lYVUVzx853kAUS8fkT2QgSbz9Pz6KJCPaE2\nlUjlISX5SBk65ZQns7RZu8G1vLddW7T6bzTdZr4E5vXCKIOYBojB9rzJLjCc\nKEiubZepm8vvrI7C0lgGfRRHT1NMdSB13A2377JKFLAnyTAZDMLBAaa/HssE\njsrYMCPl0/t46B5yhCRTfI164CnviDGjtjkoz6//eLPZEYFuKiiCnDkqZH/J\nzyDLJpoqdlLMR2fD0cgxnA0rhlaZv4EMsf77jiVwAnhH65GKqCtM2L7hIeZZ\nfCWbSXEzznYuIOsnH+cutotNdFXA+UH3PbIvEpKpceVZCSMSlvwOiSNs0dM0\nV3CDKjwexvE40PlQdiLYk7StyOU7OZYCrY+e46g2HwYvYn41Bb1iPWnaoljB\ntfftpPFuCwVAR2+qhvh3ztCyysjtiH7oGX+LF+wjuKkMS39YK4tEePDlqUQW\nRZr8\r\n=GWmu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3c2e2a0b41ae556d5a26822051d2c6c2b40a44aa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.0_1585869366344_0.7433401794185222","host":"s3://npm-registry-packages"}},"2.1.2-unstable.1":{"name":"aws-amplify-vue","version":"2.1.2-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b1f9486061336a6d883d540395828d0863f149e8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.1.tgz","fileCount":47,"integrity":"sha512-WCKd4v3MKuDlOBvjgNhwXeLAN2LU5xZ9WCwdXE6LjL+nInOU/Ob6bfS5QeipSSHMXTGi5IgDDDUnxXTqU41+gQ==","signatures":[{"sig":"MEUCIQDD+BbGaMDy2E2uE7UUFp2TKaO9gdpxdFQOkr4sFcy3GwIgUHvNb0nmAz2bSuulakR+J0Gs6OI3l10YVEV8N75P6kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehpNHCRA9TVsSAnZWagAAulIP+wTJszSR8iWU1hAlUo63\nYgbdP25K9imrIhF3VYBMygPpePqb51X8XyV6yyX4VmKxD74kWT4uHoe1c8LZ\nr2kPcFcc7ut3FiDpVjCFwxuTxV78sZ7ye56NuKZemMSKDSiUHeA1eummdoen\nZmY431UAj/R7A4DBoNX1HCy7bT40xgs9HdghjMBogbVVQ9HnH8P7V2qkTA9r\nY5Lq4SqnvEfGfGdlylmB4KD/Yqb4eBraPw/vbHlj/PfVD4Sy4Jcu0b1p/Cfy\nBevJy4TlXAsVCRp18LRhYJO3BnCMModDTpic+xXqLkBQZg5jHzRWfQOuYIGf\ng21bUmrFwQDMBLa6K90FIedY6S0jXZLUdWzwUgFwrtmvEPxOIxkzshj9caRs\ni8eVZ9jt8vb2fIXnZJiDi4vim77UmNWTl474Pv/Rh+0BqnuxM9wR+6oi03RP\nm7nF5KQVCZfhCI8kl18EMDWMCTRKDDkykOer/+Vx2xNP0GVZc2Rw5lsd5+jF\nrvShjnKcGWZytmuZk88X6RPNTV2zNjMzFXG2wJUoAlS8N7ONqYk71ezw5uTD\nSsA5PFBY0CTvQOJwukygqS9GlcWM/hPTNHOj06Li1I8TJK1cTeDbYjjN5xCI\ny6TuPYdd98DPuOVNbPUxXHGwxK1+rFNB6IYN6AT7nukts1NGTCm4RDAnHIQQ\nGmla\r\n=h0k7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"434977c20093c304f5721b6e87948d8538372ab9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.1_1585877830651_0.3595184025529077","host":"s3://npm-registry-packages"}},"2.1.2-unstable.2":{"name":"aws-amplify-vue","version":"2.1.2-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"13929966b32870ef38ba9d5751704de513b47a50","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.2.tgz","fileCount":47,"integrity":"sha512-DeaxtVyoKDH9CqsLOZkAMWFJUw5dAOWHeVFkOfhAQd3jAog5ortjZJcaNHXxQ8HHDfA3kufCgTgLe7IaHZmRiw==","signatures":[{"sig":"MEYCIQCrZ3+68u25U8T4vz/luOZ0VGl/fwvpDj6Ouy+3YEvJRwIhAJS19g5DhFrePLwq2h8eJAxC3huQp2xFy+fEgmrchZCX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qKCRA9TVsSAnZWagAADy4P/0Pn1nv1t8Cpp092kMF4\nprTnGdUW4z8qvhzXZDoF3PZ8baszDpW9fqVIRyDg1HNmZqWFma6amwtGqBTF\naiZF/4iWzGWVDNGcSs43teXQLB8drLidPa1vMtRXcSULRRHndY2o/bWTGKSE\ng+5MECQRimgpStttfaGrfrZeqWXqwTsA5jM0sxPdmTC/wElVBKmp8Axb97AW\nCj8XmiI6dePkxkyfQhh/5ivZqXAJHiexgwtzVlbXnlNyNnsQj67WSO3ZH2Q5\n6kEEkMpbn9gTAFgNj9V0AWeNtmeYxGatQ/wArz9b63KEPRYRVBX5R/VjSaMR\ngPU1IL3fyo91flwJdtGSs1Clns9SimSlbuVMkfALzX/vIY2YU4wUYcNg5SK8\nLDA2EvkrS5i2PVDzyksV5vacMbW7rmXw+Uo7lb1YxqQSxO48SYWcG0JR+xFL\nwyLcdPtu8WwDCYnoAidCXbp4ghyHjZV6CT/ecg0e95Opstw7UxR9lyxmTOF3\newLCXSHCQkXZpnjiVyrQ98rBVkubaCqArng5DnA5PtZi1GUX/l15hu1is58m\nZwKPL+qk8GNLt0Y9nDEiQgfkGbHV3GKzJdP0BA5ic73O5TcLnoE6m+Wmnhlg\nMFbLUg2dstOf0poDf415RGSrhOdEk/rHIVx0rNQlCi5ix4f2Za1yvocP/zQ+\ng4ne\r\n=UBuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"572e4f3ed15f64360cc9911577c809526b9c81c4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.2_1585937033584_0.8924308883456451","host":"s3://npm-registry-packages"}},"2.1.2-unstable.3":{"name":"aws-amplify-vue","version":"2.1.2-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"933a12609cc7139161dc8a9ceddf41b16ef2470b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.3.tgz","fileCount":47,"integrity":"sha512-19dRiXlDRG5BHknid6jz/ow402ckNUQDN0CFKiK5mA7fBfwX+89kjikgQx2KZLlhW5KNAx/lsCeHt52fJ5kv1g==","signatures":[{"sig":"MEUCIQD+hPE6ys2meAjfC3FH27Q+WEqQRymjyo/wheDPmOSK/AIgRGOpJKxxz5kgIkqTQ3UJmnsJHU9fDrcPqafUeVHycZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6w4CRA9TVsSAnZWagAASMIP/2vOVpG6CEZk4Un29wuJ\nndnurZRKZUlPO2dAkZxWSNsyimyYlDyPyIqiOWN5HWRPjhH3WYD58xGO3CDg\nTVvnbSu1juld7MXPTiWQ28ckevKGMM0VeroAXQ8HGZ5gKUeKwOL7J7UOBb7Z\nasJaeZzzpGsu8xDnFPyQR2rUtqVXd37h3EaqtY+U81RmdKHGYC7xINJgnay5\nkae+3mPbT//+tHUffFwaqz1AU35SIQWWvH2EX9hpJQdndBJSxex3R3l2J2V0\nh8zGN6lRO+tAId7VEFhpAvR2XLCQXqVXby+GaKtPc1WSsO+uE4ThRPTkwvsR\nuXRH8+Q9zACLnUtMEY5n/Wal7Plgb4s2nt3X5rHOBfvypPxAooEc7biNNCx8\n2LDqdeUrRzblbMglS8tH9ioP7EuzwQ48jPDqnGqKcrdlgPmzk8rtDD29vJ5j\n453OrX1cPSpXFVthSZAysfkx0FeXVcdARi0nPyDWGKOY/0HG5kyROHxPOFvD\nDSCUkbr/eqODum4rpu2JjTXgy3XoXMJ279xdTUj05VSvcAbXyjGKAwldFOOQ\nnHL4h+eL1phLDv8kDVMdvd4LpQklB8yFaX+H/a6IQ6TQXFpEH1neUgJhkqFg\nIZZUiXDUW5M/e4WirH1Q4GJjn2lMNEH5W0tews1qrUyKj+XQN49oeU6DPK5e\n8LWm\r\n=3mHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2f27a6e2d002364af5c44b9f38542ce1e2c8c119","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.3_1585949751046_0.33223079094669306","host":"s3://npm-registry-packages"}},"2.1.2-unstable.4":{"name":"aws-amplify-vue","version":"2.1.2-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5f6d0e8888a2704c7148e6be2f9c5c436fc54c54","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.4.tgz","fileCount":47,"integrity":"sha512-j/aS3GYwKNWtv1Pwsg76+9vmoNzPAjnzXTTRdakvCZT+QlSGuykaQNnlTRs8snMVokmNtMenU2hZ3SJkqdAijA==","signatures":[{"sig":"MEQCID9hcKxZLx6lrShvsfiFvDIq1Skn0R8BL7UAfCym99kdAiAhD1Jqrr1oa4oLiHqzKB3UO9ynLqsP+iTHAxvR6UUfjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh72NCRA9TVsSAnZWagAA+3gP/3cBUHsbaFn5pto+oR9y\nO446TGr9/ekNK6Njg/oIXJJzXEJik0FKbdaRSghr/eGWPSpQ/d2x0xl00IeB\nkDqaIGmZoDVscP1yz3XZcmVZ7tlZ5Qxd4y2dUeM8xG0zZNfMJ4zKSxQXulnL\nZ9B4OAnxOu5l4kS1cHuFH+VGqEPdna5w2Q6uwdlXQNV+uBni00QjYxvAEklE\nBRmm/LRp1r0sBG2eiQ5sSrOtr8yf4spzHsY3Lf15WdGOnFFs678wYXjXM8Zx\nPNs6OfP25D1YJVRAo4/6QKmwtlLUg6GR43+OceZ0znyBT3DlzKInoloU685e\n+Bpg6nJNzgJBAy7oe0YWk3pyUfDDXoXRtVwBtb2XreqP7TWnDpkaQV+tP5da\nNabiRaFGP1B71ZYzSJkNgIO9/hZ66J6hdUlG8uUSQFJGM/8WvzLkVjIT7uQk\ns6SSovAootBkjcHwRfqQ5R9dwove48AtaKNmsvwKC6tkNv5lfZfYHGMksJkL\n7l0x0idnJ420Se83wwadc1ii1elQFNHZMWoFixHWom9XwETNcnoomCJhGqyj\nTmRfISkL6WsIDIBTQC7WjX3zfv2V2MONmI8PzXnRrPC4dm3ddC+1ORnO4hPa\njCS4tvTyszfiZZiEZQ9FGHuW+SIfreOEAX7+5hWas9dGvUqBwvoSM4fAjnrm\ncHcV\r\n=TjDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"043133ad85a52cec79dd45ab6fedc8b5fcc515bf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.4_1585954189164_0.13190592328159467","host":"s3://npm-registry-packages"}},"2.1.2-unstable.5":{"name":"aws-amplify-vue","version":"2.1.2-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.5","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6b5be526fc73dca9d1a4ff2f17fd02a497817ae8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.5.tgz","fileCount":47,"integrity":"sha512-94Eq0NikkDZhATOq7S1X2b9GL3d9G2wdMTGlWe4UFHaVwSzy9esc9P0SGt+ZzOiNpLrwHlNyDK/gCJ7bJQ/w7w==","signatures":[{"sig":"MEQCIFUkWzOozPYw1voHb+hpm8f1N9pcBA3LUrGOIm92v5BxAiBKFplC1XijTnRGvc67JsCS7xoQcFAkB2fwEWSw/NwtJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei1bdCRA9TVsSAnZWagAA/dwP/Ax/r/D2pCFftCDSyUyq\nslAmP5Z10djnHgo8Ft85osVC7F9e4UJktK2mBocgTgE+TmhMNVDKwOiAjaIE\n8zkkYK3c2LzWqrIkVJte7EVkXUlCJZOZhsi3anP4qf1sPTWvFgJg6WJEg3u5\nVu34p5hPUIrBnZnq87upc2sBOfZxK/uxsGFdCic4nt1kMjohYFN3vdp+sPVN\nUKPepcKTJ2dVjtNXfTuCGFvTth7mpRYB4kuMloddf52m+ZDY5N3WCguvbJ7i\n7CEh4jopMMjsHCW/eplepGliBDEonyqE5ZFzkIxbpEIJ8AzQHKooVHzhVpGO\ncdUmHB2qiR/i2Afnt0W0euoDwiEgp//BOO67rUpVAjtfPbnemaYWd1HTuulP\nZeK/8c5DdYVg3N64VW5YPT+ND1zIsGl/rILgwNdmKs6w1UVJCbC9vzcREI/f\nbpufA4W2u+WT6VUJLZ61JkaFkxrOTQ+KX8Vi0p9/sMfjqbw8GKQ39ylmfTO3\nAXbFwZWnwUl5NLJy/f0LWb1tCNDVkNxpbYbQ/xnS6VMUD25Mta93P4wGlDBB\nJqN6VlhvlJDRdzH9ObJIghI5cRxz4K/Qm8eFOXSYLWu08y3kEPBOnwqv2Lcc\nSD0dLmlNt9jCmOaGNvC3ph+RG7YyA6gI/H/UjwAfp8KQv6ka91ex+tMB1YKJ\nnMYR\r\n=Hkcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ce74563b427cb2713ad0f1a778441b8f1f3f3ac5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.5_1586190044443_0.1177076848028078","host":"s3://npm-registry-packages"}},"2.1.2-unstable.6":{"name":"aws-amplify-vue","version":"2.1.2-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f452fdc24469c13f8dc42f026e938d358d34a0ac","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.6.tgz","fileCount":47,"integrity":"sha512-w+j3JjrLdGESwb/gbu7G/RZ55Mssi8UOfy0w5oZL6pBmhTe3bLAP8zZA97EPo38nz78pwFcpULqgQ88M3vDuiA==","signatures":[{"sig":"MEYCIQCid+sgLmfc1T+kApj6I8WTEDZ1zFLGmflaePNpznxKUQIhAIxIH8TQXBI12SteHFJ3iMDJCpcP4I2M8vpl+IX7NaB4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei4J3CRA9TVsSAnZWagAAnZUP/Ri/sZx7ZydoUEAvIPn/\n5AMoch6JLceW5k3k5HflRSS76szv5+cD4DW/kwB3Qtrhai9lR1/HjGYcEetv\nMahzZEkfs0bcFaugMr3EaC7X35aLn8+IHXcva6nbZzsFE0jPtL3uuD/+cbNd\ndz/G5agt3VuBAScdKoGbR7ax8T0hXZHnTsaG6SxYzCY9HpBH855gZjP8nOOl\nHXKB9bNLtFF88g7zifLEJJKEr/a/451kaPwsrLlHaXcD/O8n7jqeGmMzVTcI\nx6xzGJNF0rhB6MGQ4klCgKC/yrsnZgDtLcrHKBmeNjQaBiCai/sMFAdotaEC\n8FnMaCmdbplKWSAzWHMsGgYnqmZUp6Qd8GxcvGix0ctbiGC1H+9nb2D4TalF\neG1yBwe6yoQTIvrwTdXjeubTNFadMXTSLJf8ynqL9mFT/zhGr1qtzq4zi4+4\nVyvAfWTN6PVzv6Q7ms+tkgcCBCKjAmSH/v0sO2ri1Cjj8zKLjpav7F1OVq4l\nuALvQ6C0QXq10kLvnT4AtdMsouy+mxcieWQbEvHSBs+auOYbLXralEXt/qga\nGEwgUPeOajlni2O3ZZ2bYL+xzIkk+xF6iQmKgby7r7R8GgqqkiZIKNPX0WcJ\nq7V1vAFKKIXnwBlSm4+MyNj0/YUvwVL04ID22z4zEBe/YEpitLf7VsnUGM3X\nvY1j\r\n=Lzn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5a16ad7ec4e15a1382a6a1b3f2fef2a4ffa14099","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.6_1586201207414_0.4064493078899214","host":"s3://npm-registry-packages"}},"2.1.2-unstable.7":{"name":"aws-amplify-vue","version":"2.1.2-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"45a16b661162f09cea128e1b2ae86ae17842bd94","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.7.tgz","fileCount":47,"integrity":"sha512-YykSqmPbU7MQotIaFdIEgYW59OCTMOBQM0Acg/9XBlJWMnKDBSIETdCVXAVBFXRnd+5xkOTOXblsKAEJC7Rnlw==","signatures":[{"sig":"MEQCIBjwE1AH3yAM8OxfgKu48rV5FuBUa02ZR7tOxWIUNiy1AiAyTGkO4Gb7rPJJK/ppfOVdzS8qHtqGkDw05OqopdHNdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei72nCRA9TVsSAnZWagAASYwP/RUGAHxPnvUXNVRBDJP1\n8QyazJkLbF1/hQUKajWic31FI3qKJRVdf+ynrU4rhV4LxPuWyHSw3SUCbJ3F\n71bkHbLDSYzDiQLlppxNqd71mqCBHpYLTUSx+nruJ9Q+ghQHCasjyFyUC18P\nyv54LvjF1KyiLJXqBTkrU5KWpl5Hdg+8ZXeGyvBTDjLAwQbEr4waTNur3mKZ\npi9OEaBmSzEiM2EhySzwt4Jg0hq+Y+u/Qr1N5B9VedrGx9PCOqCb1g5NZNdP\nq6PpWGtQzT2ENP5xi6miVNC055+JNRLnyDRrgEHaM+P6ata6cSfoIOv+UKe2\ntuFEuLoBbajNjkWRvoiLSTF1er3ew1O+NvS1jsqe8RItm6wrxOnOM86MvfHa\nh0EyjZUcxozj2zTFzTjR98cCY3ed5w52r7+6f8TPQxSt4PFyAMF0hkmVCxzw\nEb/yCs4WUA/BPvoXCnl0HJZDdN432kQ8gVFe64NbGecsi7D4Fe4aa9dFFi7c\nv5cKneSWaY+QvyVYxYq99m9gK7Wbe8ye7Qpj20kakXLWavMAQQ8xyz21/Kkp\nfHrpxGRB/7Bnw9zB96bvvt+yuyMSmPnCJYkSONcbHqUonyvBz35JKvCJKj4s\nMtSG5OeNwM7e4KTHcAXmvGRCpoljJAJUnlg3JOPie3S/fNHYpFnZsrbyFVuH\n10fZ\r\n=DJRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b8dd7f9c256c464acc4d24f09970626feba7dbdf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.7_1586216359185_0.074925191772091","host":"s3://npm-registry-packages"}},"2.1.2-unstable.11":{"name":"aws-amplify-vue","version":"2.1.2-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.11","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8102c829d062e6db081b78841cdfd3287e766fe4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.11.tgz","fileCount":47,"integrity":"sha512-WghGKkTWe/96zCUwm03xuk8FpeCZcPjcOX2S5Z7uai8Eafnop7IdPXnpI9pYlWI7F+URbUYjKkgq6EzLhWTU6Q==","signatures":[{"sig":"MEYCIQCMk3ykl4TWx6kvqbG1z2ddLuahwdFT5/IL+YZlu68LOgIhAImUYbPUqOKP4KRFfR3/euHcWzu5PXSn6LOwv4SvqTT5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJei+dKCRA9TVsSAnZWagAAazIP/Ay5ChhAbEIX5EyAHMHQ\nFRXrcmZw/o4Xl3xfFvzh9ESnFCvF3RKNar4qmUceSbJhL43fKBhJ7WnxWP1C\nz6q6iLBFTcKDSuDSlHRi2GNkKHLf63j9qtcPB73X3nwOVBJ2xwFuQ+FkmgeN\nVZyziJcAjW0ZmTOHikI653uF/cb8uw8TjzxlkVhg7ynr1e/DxOQgUcyZiMlE\n33YrrebmulSyINXhr/0JN6oPzjJ/xzLAexmL9/NeQQtLoSdt4k6cUQGKIBvZ\n38U3ZQvA9AAwqwtyVwdvTvdCsfzt51vAHhJBYPhi0QY0eqUAPbCYntFEPUvr\nAFMTXs0eZbpDmqCJoElY5HiM0rTvjEiB7fvwwpb+V/LmB0Np8tO4EgmcsEeh\nZ9by1vNkXJgZzqLeyKIKGHUA6DZ0dMiHp8Uwv0uJabg0d1NyeeX5OH8m1iDs\nj/BjVMAsHyDquk7LSmOXbMz1bgR0HpvNfy0KwMuihyg8FwKDdjY5COotNvCb\nLdMCkgZsrtrBQp79NZRUP2ydyTtthYPLbUupTsd/66FikQjhwVwMm8D3ccKg\nYZvhFAtuftKN1u2nBw1f79RN+cH1zaE+lC1/MvrjfdGpLVQcoRjraE7OdswP\nkclvDCi8mUxj2i4e3lBjbYQ6YoSgxvGuvTXtcBV2PwKixFxkAm2Lmp1/AFse\nK16s\r\n=TJ4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a593dab6988b59d801d25dbdc4dd16c509b841ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.11_1586227018206_0.29419380140109475","host":"s3://npm-registry-packages"}},"2.1.2-unstable.15":{"name":"aws-amplify-vue","version":"2.1.2-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d856b0d4df51b388561ed7ca9e338e3175fec55f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.15.tgz","fileCount":47,"integrity":"sha512-fyiLC1X6CN3S0Bhsqo09tCrZpsCeQ9egqsvbdzVH+CBk6Fb8R0C1cP3Veu3g6PjwV8CeHriRAbU2GAO9mSxeGA==","signatures":[{"sig":"MEUCIBdCozVJNByCODQ3M/h5VzT1bJYIpeM1nQSubZ+em+9BAiEAxbqzBshmLWjh3XgOQJcf5Bm1ZR/CZzckVHvYi24lANQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejKfCCRA9TVsSAnZWagAAvTYP+wZxDcw8scg5ATC6/lpF\ncouy0z2crVcZ2fFa11ciiJL0s0jfQ3gSI5HORWnHyITFtPC8bBzQXMAwmE8v\nmplUypYf1GCH9M7cQC9W7umyuyJZeP7AOzWTu2nTWxoXgINe1AS3IDJ1q3tb\nZL4G/8MYi75U7fg9ipJGUAMK/rb7LmqL6NNKKkFu+XRLF3RiIiG1C/cjur+s\nEKSNVbTyErNzEI1gc84ZO9dCGLS+UDjS4pfHfFGfz4JOb5RUIK+ZMj/pAbr2\nqkGJdcbStY37vLUiptF55WqTLuYv2LI3xG1I1xGQ3LaZkR9LK9bi2nuHoT/U\nk8hPGnw2VNH7SbmsNLK1NWoA4y1lumgU8ZKq9nnHDQlYbt6ktv06tpQUcwjN\nwuD5O2grVP8HbRbvaFwsJ9nSDfKt1VSgcobJizx16qusT6Md7eQC5Z8qXma0\nYge06XbdfmvwIdp9aSYOO0hVPSouR96/NBFS8uujLT6yIq++jQ0MvSc6mAIY\n1DA47k3sFy2c3i/NG1NYHi56Qlmhbk7RILt/l2iYSaL/1g7deHc8yOm/KCwE\nWpq/YjqTHUiQNX8DFe3dTDsDuNamaGd5xvPtmUq2hX36Tg77G92K2RYt5kKf\nT/TtcURwt21YwuE6AwhISwe+LFtzjUTytslxR5zuLOSzpSDegarwd8YinUll\nyffe\r\n=hOJt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8df8193c276031a0129cd98a0ec751cbff7a28c1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.15_1586276289897_0.7833039092071405","host":"s3://npm-registry-packages"}},"2.1.2-unstable.16":{"name":"aws-amplify-vue","version":"2.1.2-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.16","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"86649335ed3a65a0871f4e8998f96e7c08430fa0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.16.tgz","fileCount":47,"integrity":"sha512-1gqYIHxEowYA7tj0OygSu+TnWEre4OtHOlUhgtT7fNr3qr4ggAfyh0ZhDO/X2GnVr5IOUECe3Hr+Pq8Zbx9ZFA==","signatures":[{"sig":"MEQCIAfPoeS3Sn5eDHVQkO1T4g9jNudCM4fV1cT4o0dQ05LtAiA2ky/2dg1vYddn1iZ9rhLpnjuvZPSWwYzKVdC7ERjFyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN/NCRA9TVsSAnZWagAAM6oP/jv8Gdn0mQSPiiYSQn2G\nBnNYJwqFZvN6Z+V5aiftN28Yca+NxqKgrFsA1iTz7i69GeHzo+LUTyM9ksyr\nfwV+fa2CZVJREnsjcVjKLJlTkPDhz3s3UNbPf11rM7xmIdjWM5Hp6OmhQlfj\nPkAlBylk5Vmupet7uzrHDfrHdvDe3wbZjK/lUn5DSy73dNzH2Rzj/NOlksIk\nL2YABJqDnwhftcdBkNRdm6WTEYyqNAIbkBDeijOEbR5CccajvYg0X5Yllg/N\nwgO1JWrNe+HW4tapUDGBmuVyfpTX+75wQObu7U15IBVSdEQjvwR9Nc655VCs\nbTbMDbTOMsjnPSbMBLBwxaB7y8TGHW1yhVy78Gpz6C86I/EpghGNHNEXlW7e\n/JMGqv9EGYtqpx9ofhh+7ExFTZeR1HBFC5O47K0065Rd+6SLgsyqabTrr9hT\nbbFQIZ7r+PpDIu6Qk5h62dOYxNCfnSnQ0itpLi3sMJD1r25qHSgHTRHljyo2\nCKR4qehQEqPQDs7ULKxcPocjzblELjWWXgHVF/yPO+00SgvzL38XZQfC4viQ\n1kIgwz+q2RlyyMAJ3IDozkgWCMhX3xuU9od8JIS0b+pApi/NcBYgCcwvWEb7\nWA1iKdqKTE/85dTbe4ppu2LNAi6VoETDNp+Kf43qjeXZnHv8fLjQjRXZbDgf\nrZOU\r\n=n80T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f2952090d00453355761774913b976536d211676","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.16_1586290637436_0.3643881231772541","host":"s3://npm-registry-packages"}},"2.1.2-unstable.17":{"name":"aws-amplify-vue","version":"2.1.2-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4226884fbe51baba63bf8f2b5116ae1bf0cdd5ce","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.17.tgz","fileCount":47,"integrity":"sha512-U70UXlB2C5U3JnNNGCFLmfJZBkcXMfWsgO3Cv/nleePWNOMMU019kpnDrwkdvAUwgowVX0IfSCDpCFWsRXecWQ==","signatures":[{"sig":"MEUCIQCXHfhcFunZVZSJNrMAAWOcEC0HDemGF/aQBUKxzzkpdQIgTdnSC2kTd9JHNQDKVUjwT0f7tf01354+3wCxi0p07Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejOktCRA9TVsSAnZWagAAAzYP/AokwtdSyDFJHeqvlEqm\ndqwcYGhX2T66P/5I+z8F0VnhvBVwr1TZoHIovhuNaGFU0AZVAuDl1dB7P9zJ\nUSfXVCA7upGET4XKEpoF7Yk8yqCtpsdXPCAK61ZUC7HaReP1pMJ4axjA2D2e\n42uKIsd6pmityuqxI1d2JjgeXz7WKH8mt4JDwQjIK3KPfXKBHuXlCUvIl1AQ\nA8RpxVkgbSTaW1ZGq5JkcjRzaqgvP7kSa5hCFw45DIVj8qM8de12LCrwFGK+\n7afTYhlLip1AsZiHUnT7piRmUCCip1Af9GtfPVfMxlZWSbSn/qktxPCJYRvy\nK+kNymThNaK5oipxg3ngH8uNFfTI3u54u5xV50/cUJunFF9A2m+AN0qv6xoL\nehzl1/gHFyh+DFXbWSNlhUxOV2IQ3XBkkI8ZndnFiwTt0bo2vSmSljVGQ6YI\nlcqPl3Xc3/IKT2I5/pHfzs5fMtLKFO9w/LQLBV/K2vrjzr7SLiha6BAamcOU\nP0J8iAQgUmQ0E1el4HkuRbbtwcM/UAAuoogiyGIsdzEHJDWYP9BaXy7YklM5\nm1Bf5fRjgzw6zm0RGOXj3FI7oXVrcRlyG8MoYUQ9oMFqwzWhIh/FtBEm80MI\nBxInSEZwFiCtqtro6gU/Kx4BLj4i2zZ3s+3nDDCg5QABtKHZcGLEsR+WSq+o\nx/Hp\r\n=Z6YA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bb17bcb83d23268b5e9be0c7da0a83efe9b39c76","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.17_1586293037013_0.8496904383333388","host":"s3://npm-registry-packages"}},"2.1.2-unstable.18":{"name":"aws-amplify-vue","version":"2.1.2-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"45700c6725a4630d2a5372d61d0267eace01a8d3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.18.tgz","fileCount":47,"integrity":"sha512-Ju5jkz3KPk6NCzMXRtGWNb1bmtVLBC9Wl+54+7WQuGWTxXkESUClSy5ctrb3q8WArwpXYpY7B6v6VOZgZ8so9A==","signatures":[{"sig":"MEUCIQDzD8+9k9mylMrmRKKkCkMnchbc3nfjmJnM6ql56D0AwQIgBpPVQ5a8z7QUljOyXsnVPT8LC88PLPRL+tbE9of0hDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejiEYCRA9TVsSAnZWagAA3XIP+wVkoBw59JHGhBP2yl/p\nZx4by36PDiicCWS905QD2VR+sCeSHNX03gKpgN2Qe4GobnkkPMBh0rMaE7fi\nt//zFLntIbEO+psS0Kd/PemrwCsKDnQWDEX55i/5VxwvHYyyMV82naOsn+4Y\nDcK1c0XLKLcjJAHbpvJqIK8xII4lSRxRL/hq7LpeAVvSj0HmUEuirjJy3p79\nYXHWEkMGDoXM2JFaza+aA9TsAK2/jxO0C7ow7iXpqQ6NsTzX01iWCnCYO6fx\nTTMS5siJJEzQqCS6pkGUqz8fuuuQ42L7hToRtLbH08d/ejlNXC4WNlB2oeGO\n/R5VTmK19IZKN9x4zWtlodBmrhfdwNk8r3zlNkENlBRLP5MR/J2tBbziaTiC\n49HZhEn+edMP8vkJNcq5Kq+qOV/whUr/QV41Flt0Df6NBstWDFKYRv/Ss4Sn\nOnqXLuDhrheHSSkGSukWO/MPtVRAC7huWgrkbslPwmZelgEOQ8AgHU3D04HH\nhgSPAGMTxB9jfY7mIugQhFK1dmKp6XNNE+8ESAcsb5Bx8JnNbjVv2Ll7CKS3\nG7WbsPPYWQS6eo8vmS2Qb6PHaNKk5MC6YHl7aryw9nZiPz2O70TVKhFA6d+6\nrtnFn8UH/dns18L68enJKogTSn1G62xi+TdQYnsCuYO6CP6yS1N2AhHG+yGc\nXq5K\r\n=d8bd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"285797cfa08d4c2a3e04fd7e336e8beb7907a557","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.18_1586372888348_0.25016162980152723","host":"s3://npm-registry-packages"}},"2.1.2-unstable.19":{"name":"aws-amplify-vue","version":"2.1.2-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"69f8c2f931b5302932b35b109b09fca2034c428d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.19.tgz","fileCount":47,"integrity":"sha512-s8KnoRnr4z2fFocYuiMGuUsWuSlRc+ij6XKO4GRTeVMhtnm2KoLUBITnC6Et/cOMYzQYHRoXC4zrLwbk70IGqg==","signatures":[{"sig":"MEUCIQDLOp4cvNiCCWopJKvVGyzyDx1yuZkJhddfLPUZEZCjNAIgVte1PWYoczrARWpEjQpgf4nTSO1XnQoeBCxkH85zK9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejieoCRA9TVsSAnZWagAAzVMP/3PzW1lm0eBVS27dmmTQ\nnuMqcSYzQH06Ev1aXc5C/Mf64Xw435z6UaLJ0LIOtwNrc+U5ECfujvRntkkB\nJj7y7iJ6L4/rm1WdWmBq0EWK0E4XhjqJGW5NlAU/EZIYuIc11tsP9MHGldf7\nPiHnQdkz37MNysy9IWM/V6ytxMzEaWekT6mO5cQKmGGa0GCV7g764N0N4cyW\nGaIzuIy2at9mK9/NasyBNpdVtWy+BKoEAqZX5s24mIiUb0XZf+E+M3b4SfNt\nff8fydd372tVoklvQ61jY8dW0xugcstzliain3954lukOswR7NsDsgVPhmGg\nCI9gkpEYb6wPJvYGUwpGbic9BqPpdLbfqJulGA0AP9nZn8sFco/xSzci+HAZ\n4b81HQr5WXHHhj2GW+r6QWPq+zW+lSgczlIS8o2YU2OgIfXeYhHLzbAaZymI\nRqQv7jQrTlG3MMHvRHEtygmEtNDkqX9tv7DG93CZQQ1exIY7u15ZrdYw7PpF\ngenBk0g78Ii8h0XRG1Nc2vjouK4yJifyUI11B57NntU3HZuFbYy9zFzZGD/6\neVskvZl/4KwtShWmZnq5DhWkBhgU+NfTlskurgYGSdPB718sfWUgXaMb8z6s\ny0PdtcbfCRH856YkuVJm65kOEF+ap5GCPNpVfdqnY9wxRopUNoEZPgtpONyO\nX7Qz\r\n=Afqa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"840fccec6380253a75779acd973ecba245e2a167","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.19_1586374567765_0.04282666950133018","host":"s3://npm-registry-packages"}},"2.1.2-unstable.20":{"name":"aws-amplify-vue","version":"2.1.2-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ac72fdd930ca509cd21ae8a78dc44c9f264fb0f9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.20.tgz","fileCount":47,"integrity":"sha512-roOpfL9tyNOzZVuFLVOeAZP4mNK6awOv4TxqzEZxggVEyurd52PKr3xsLibnXWON/fhXao5t0AWzhgpAxMYrLQ==","signatures":[{"sig":"MEQCICmCnsMorjyQrtTtcjwdcN1oVK4N/s9SAMp+Afh/bTa9AiAjjiYs4Qobj8op0iNuFWibqAvRxvbB25umLgw7hEn39g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejjUoCRA9TVsSAnZWagAAMFsP/068qXMtbN0CMRy31CoY\nhecdn+AwbcSe3Xla6jGA7FNFaft4EChKD9Lr//RWdgAafpBuvPCLW0RAh3YF\nqZDujqN8KrSqtTmftzmPgMuU/E9QoYs5yCM7YIooBFPnmzj1PBh+HeCBEqyo\nbHcx2qXpahUnfPBaX5TcfM5RQucVEWPl2JNqU6dD78CUszXL0wjMKwlXmUfz\niCjXCWT9eOFIDhGl0ftitqrzJbHyK6/NGNjuxTz4u9Av3P5dJ8n66PBfmi0z\nVAWdv4ynYH4PBxxeUM+8RUdZSzfsiQYgu+nscQBTkq/RKLFljXSRZRsQ3RPa\nlmrqWo60OdSZZ4dTdMj6ls5DHoStjBFSQYONWs0SsO4E8xWxYQbRFNNMVyKa\ntIcNBLySV3a/BwsoqWM28ZdZxpVgyiBQvpNPleb/Vq003tjhu+W9tLd95QjQ\n1MxDw/4xCDEmyjnWKZmkMXZV/UcSYrINZzVP5F9vwftpIoaM5MDTrgw53gYc\nVx37ByhfipklRJb7PifZNsvwuNd37hI+zg0NqRoEKHYZKFXk5Q6iCVHXuyk7\ns1/Cr5a0I4tnmhRykK3EsZ6EmNIHz0PiAAuTNEUMGXzX//qSBxefIXkIb/hx\nhg4bpkU3MmYYggHk79+dWnxzWP6qm7AU2QdPCoff6A2CemKVy2zNElX+EXes\nqmCc\r\n=YPVx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"767025f82986f550866d06a5183497f82c0d31b9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.20_1586378024280_0.8340787042429012","host":"s3://npm-registry-packages"}},"2.1.2-unstable.21":{"name":"aws-amplify-vue","version":"2.1.2-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b55155765975bf45b2835bef04cf73a766b44f16","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.21.tgz","fileCount":47,"integrity":"sha512-M8gJKnn+bnka5M4SHdWm/nGIs8RZT4Bru2wSinj8PTCvLKF3BjzH350jlBwmwq52jTbRVs6UImaPNAuEE5fNkQ==","signatures":[{"sig":"MEQCIA2I5yCrPGHT3LtmKzncFBMXGTWFyxqDksx37CW6JH2kAiBFMtFyb5Uq2zyeeE0kP9DlbSaLSdRxi1OJrdahvVu9IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejjjYCRA9TVsSAnZWagAAjcIP+wb3EYSGml1wPSGUVhuC\nZINBmv0inajNDE3VVKGzA1LahXE5bUcIv39/H5Q38gyN4WXzt59dFpzfTYPY\n5FXBWDV+uIUlGShxdp5TK99fOX3NPROfx1zqOpZNyGNziDprDPan4FKZChBl\njJPIumD0DsbqqQjm/el+5tEPQvlJV7h+/SOLvVxlNHlEAJ7fUp6Edz8wQ27B\nzZxUgvtOJ2SqIIuzOYqx+YA2/mauVN185W9KjQu3k1gKEdFd8g8E8R/uhAXa\nUzcl0I2n6pKwaBBNdggSVS1mrtCFgoKJ4EdJizwUbFoJoCskBRGUMX0KyyJb\nGLJUoHq9+Rfw+KcZCmn0Mg4gYX+BLZ/o3STOYKOH2UavIsOWafYqfFVZ49m9\n2VyoXjJnomytYk9PoVzayYOB1tL8Db+IeWVgQ82Eqz8L+nQ92+MwI9zd8jD4\nOXh6kLbkJt/l4KpMGy9Lb6CsUecnOJxLNdT8RbSzbMqeOAWFFeSU0TeDIHKN\nE022famizsI6JkwucQ5gDvpysczHCvv9fp3Cc2rGncL2XqpuoiAQckdcKzIq\nMONi1GfJWSCp3JxTGSejR0dg24L1Dqgrau70SuRSrBqaqwmhJLjV+3fDT3ql\n7kWQW02InKmZPufD/LiDZ3iFsiOZjkjSPFTYdJixSYp4JhXQaVOvPS9hzcpk\nDc4u\r\n=YPLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"01e21ef07ab5ba60f1f7a0bab73dbb83228b7987","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.21_1586378967664_0.9564146725714968","host":"s3://npm-registry-packages"}},"2.1.2-unstable.22":{"name":"aws-amplify-vue","version":"2.1.2-unstable.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"899d80357645891139c2beeb0c43d0518e86cebb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.22.tgz","fileCount":47,"integrity":"sha512-DH+oSb2STdxOkL3e4ZvvBdyOsT3ouQHmWIHz7/ofGLE5CW8qgRHe31fJ4dEC/GubVYB2I56muZT43pAJ1uFFsg==","signatures":[{"sig":"MEUCIEF/pFcjZIEnSDT7Wem1Jx+7mM2UhOS9UEqId+M1i1bvAiEAvfp63y75YRb0EaB4+WJPBv0TqCYUMEOVDUUO+6MzCy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkU2CRA9TVsSAnZWagAAOnoP/2oMicwTVzg843tT/qQ9\nwx5jbSfa7y/aExkbo9m33LgSRnE/BD8riPNtHgmM/2jlL8Fy5YjV64WOslfP\nowozoZxxYTpq6T3IM3tCspcs/5PWYlwLe6m7tt1L0I+WGmxrqqahmpiMA+2v\ndtRCu33AgJv+I/Ilah0resi+O/u6giVbyhP7+FYaJreoWnrH3C+Nt3CpGLFi\nSXmXbslAY4gnjx4TOQn071GMgsAt/+Xo9LhiXjUTKy8iPspR+Z9082+U2Gmj\nH+bfwAO5LgwWWi+bF7i1XoIcIfjj777iIJWQb89JzIv2loAG4E2HhLXBaOOB\n5+quCvIiG45Vyrc54YiBkG//P9U4svr/Y7y4of7VV+0q+8TECvYL9jAAmMDH\nO5YEJxcgHf+YycHPAwQtFB9zV9KVO0puqkDMmABONjn/E8yBVqX+49WBluBb\nY5C5m4nAfEBmG1muwmryMe47+BWo64WdcOQsfKbnBJ+Xx6p51dvG8Ng62YYQ\nd25aT9RZA2kD3GKlT5U/cXHxrIaxzH+70g9YmbMbOzm1/Y/dkPdnaOp/AFGW\nzoH4fmd0pEw5irWqIuqcHcQCpjrvOJ64gx0FM4AGwp38KUvowA/j6reBDhCB\ncZapBsfL6w/GK5o1LcR35NyzHmEvNyl8sTAfqN/bqnMnxAUgEYJeZI81uQIk\n2o/a\r\n=Dqo6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5fd7f24f70aa4e30c2fe91afeacedfd80eba0578","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.22_1586382134458_0.13686759528801895","host":"s3://npm-registry-packages"}},"2.1.2-unstable.26":{"name":"aws-amplify-vue","version":"2.1.2-unstable.26","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.26","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b072e2344b33d776b4143204d032233b5c760565","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.26.tgz","fileCount":47,"integrity":"sha512-u/2RafMyf05zgFoqEHajLo38IMR9hTAMlo410Uh7p67lrmIs6v7kI38DEe32M8VrwEKkuvqxOkvBjigb1ylN3Q==","signatures":[{"sig":"MEYCIQCGNFrmZB8f1R9X2Wv+N6p+z5rAUSgITL7hepiCMLNYGAIhAJqjn/q33VP5aeHe0xBvgLWWTwHwnaw4dbOMp6Op/E0Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej79zCRA9TVsSAnZWagAA5Y8P/R3bj9qlCpIVhVduzqv2\n5PBa69LGx2jPxAXybzIgB74eyf0/MnXNltrHSTWj3PnVS/h27ntCfIC1JGbR\nrtQyJu7gKRbZP5N85RvrMj+vVlgnOsyqrLlEFOld+YBObO/MCc8VDrQEZ5Zm\nSPbVPo4RCTALJMc2FVye6/HBdmi9Kp88+xwSenEdv5DY7tNm2Uqch6ChvRSy\n+fOja90asoXQwTviVYjBR7orFg50af6Eyva/tgZtSzrwUlG7olzZnoqJM5Xl\nk/L5Hvdf+Z2+WN7Ec5MbnVgqMZUlk8pMpiEIOI5/mKMXIFh7/Dp1ilmr9RlM\nMileHmM/MoUPJ50xeMkqzCXlQ+opbSZyHx+C9Lo/pDL6ZkY4S4MOm1i5USvP\n0vTL0h9pUTRdwySEj1EfrXdJ+llm0nWzgLYJFG/Vj04Uvk3oQUjKGxydlWDm\nv8Bf8W4ownPEZm6q216Se58tNXPf+3UKjvf5kcuUsmwLfY/Lsvo8pmyKRbco\nzW/SXltuVZg5WOsL4rXlrZ1IYNTRLl6ZI5CSKosq/0QzpoCUVxpYYOv/7N/G\nGjbWFRK75Z9xDZs7Xg2PUEYm9c9s6/qWnXN9vomthUEdz4aIecLltEn4Zwgi\ncO/aaZbyrt+XzrEQDwuwbr5fTCm8JylFGVpJl2su7ucs/Jbnrm0UpcZVtP8g\n/ppH\r\n=cvfX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ffb6514ab2aa14e09d2aa0df0da110585b5a713f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.26_1586478963409_0.566472692468103","host":"s3://npm-registry-packages"}},"2.1.2-unstable.27":{"name":"aws-amplify-vue","version":"2.1.2-unstable.27","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.27","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"740d0b24b2fc0bfb26f0004a3a4c924ea3201791","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.27.tgz","fileCount":47,"integrity":"sha512-vSq/f/T0NM2vZnc1v4wpuf85d9/+cESZO0+nIWesJ8xp+qtHvIyWZ20mUMsBSsOBCKwflbjR0ht9p9rBkkstDQ==","signatures":[{"sig":"MEUCIFHvp76F1XbQIjFYRtUnQ9OKDrZuQbJaFIakil+uO39BAiEArJbPdG8wNqLT3EnKK+yOqPsMeNVRT8vzmswT+A5kcnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej89jCRA9TVsSAnZWagAAC5gP/1yVxS7gmkKYFOIiEStx\ntyfXPlfds8IWmDXxbq+E1Ll6JMfkhJ8nmnXv6mvFVX+twcnM7yPKmoH8ba+k\n1LRzfgQvbu2Li16WIaQXOXqLNaC1G8eeor0scDw0rwmFBUPvtcD+3NaKB+C4\nUAm2rdVTRVmdiGIOP4ilypDS4zo8W3642QDRwWdbNEDsIgRdZrTB73bN+kfH\nrmrZcifdSc734efpZ/sDqOkcKPATtdBrfxLoNAOmIbDTktRaR3zi0FOqf750\nW6aFgyeqznfUEqGac7lEXvMgtBzIQq2vg0BnGuvFoyWiwKWLxxKPQluS8W/T\nrqTr5SDg8gwZJ/D4r96EyZG9wCmEQyXhltsn5DVdHkbKgIpL9rQV0XIBUYhA\nkokSSGfoL8VlVJm+1xaTkywqbdjMtIVV7wY1WFXodjaHOKuxd3Nanhd3+bfu\nDn0tZiKz6dnIBRWw5ddx34dbU0bsw+cX5/03vffPk+FVHH9rc3/1PFpRGQ21\n4Y7xmNBd+ofrSYk2EyiLAPyhMIw8crr8ukZDnTaUB5A3BaJ6f/HNUVXp3aaG\n5wA5a/Ylgu4VN2o3o7SYO6Cs8FFSlR2MQMjT4cbV12vvLww2kvRH6hPSKfry\n4xINvE6eZ2Y+iuu9IWymG7NIQtmjfcylBbkq6ynXVyWh4mKXudzqTl66sQRP\n+BUg\r\n=TAeG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"50f99713572a4c692c3f4bd9da3a4859093bd9e9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.27_1586483043112_0.3686817209166533","host":"s3://npm-registry-packages"}},"2.1.2-unstable.28":{"name":"aws-amplify-vue","version":"2.1.2-unstable.28","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.28","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"fcd5c3829e62b4fce58d6afde66e736690025647","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.28.tgz","fileCount":47,"integrity":"sha512-5wLD4g34DFLzqxaAIj/Xkgm+1T3sw7qRrrr5fXUOy0zETMdsJcyDVlItOzDnZ8WT/ttbkN3+LrOPfSLQBaMCLw==","signatures":[{"sig":"MEUCIQDXJ8gT2VKUWZnQPwUTaBtt4N6nK8/uyXoxkV4InLGewgIgPJcOkRJxuq2Sgn9a8Gg1Bt4cdyrzMDJOHUjNWUY7Nmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekJ+kCRA9TVsSAnZWagAAp/AP/0Th2knRGPJkmVsifhIB\nq0ltqVilEHHuOpRkXNpyXVvFD5CsKN3x918BIJ6dNnQBFOsoWNuSuTLG8bl2\nBIiTfQ9Z0W9Wxgj4EVHV01PuEnG4e4P86wjrCgR4lQvm9UA/sPewfMyq0JTD\nr2CtbIZkOLFu0sXTT8HCiepQPKwqXWykPxQCZVCNUph3JtNemtyIonYN1LnS\nvLqfRBJHD4RChPJkBf0CqoIBJ2t8bLfNFfCaVse+rCL7+GC+zvMnrAddRiQs\n7QjH/DSJZbsEvul9RsOqZjUXQ+/SzdeGzu7/MPGSrvhmzf7ISGppxeAbSenO\nFxoHa0Jdf7/g+6Px0SIHhXHuwlhtxnVzfNj7X7ikz45pjzbHL6F4KWt1GsgJ\nYcJdCAu0pd8evN2GFMXdpUp5H2WSg0KryqdD2QfzqDh+NAVwHgekyNyAukYo\nASld+J7wCebIvGTc+447Sgf3BAxkKEWF2qw5dTN+m6vzQaxxbd6vZdhq7FSA\ndJjVUHUxsien5AJHqb2/iQP8bIRsoILpX+hH+3+ErnieMUIUQTFQIZN+Lq1L\nCoMM3nP5sz1mSFZmSw97QZ8VI7yM0ILeGhdiA48kYrQ/Db8jE1hh9/O8re6p\nZFJ1G+CVS2T2zM5nFZ1tIdhOG1/ByOYQ8C4ZRsc5fQ5Tps0GCH9ak8XfOcCv\nF9My\r\n=OvDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6de374bf75442ad051e49dd8aa9617be4c216089","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.28_1586536355530_0.4709884621566427","host":"s3://npm-registry-packages"}},"2.1.2-unstable.29":{"name":"aws-amplify-vue","version":"2.1.2-unstable.29","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.29","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4dd4418ea2f71177f14a89ff1ddc3868ef4187de","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.29.tgz","fileCount":47,"integrity":"sha512-Kfi2UyhvP7cj4HbJIwlohaaeiHb0cLu/swckdHT1bkWSET03n8Qx6NQIbKhFbce63izsLDjPogRx71MLULfDBA==","signatures":[{"sig":"MEQCIGIpNtBxzzoOpVcAHjGXkYXv4Q7g7NkhrRN8r1T5d/jOAiADTOky4DebX4UPyYXVwQT3BtciWVhfdUshfC41xYFgVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekLQcCRA9TVsSAnZWagAA4UcP+wW/KmccHq2tvuvb8Qr/\nbwZmefAQPIBAxt23BdAs9mGmxMNa+zX/ZCSkQ0GfaWaHAdV2vET8FrVcCL0o\n5e5IhFy++MUJxBgu2sIz2CYDgu1n8hKkB2grnVu3jGMT8OAB2nJB595XXuhz\nGC1sCIydR0DThkonmjaFCOF5HcYgsnXJ0YMHW/q1thrJO+6ArwRD62ZQ5/vN\n8PgDL3Hi7RwDZNXGLkCz7daUGyZNZ2GPMEUUaWPZXwrjT/s2SkRhLMUoiZAZ\nlEs87iBI8Gu2jNHN50L/eF7/46tWuYu0hRw5SxvgAbzbvpxsMsh1G2Eu00Dz\nQjHsdeS6W6XAN3qubGrCi4zmCtHLA0BNJhxEd47gRtqHytT6AH/mhJITYUt4\nWthguE8CLQkImgBwzcrV68X8/CULfG1c4/BwA6sqbDyhbbx/Yov3NKW7Muah\ntNAr57QHTbuJFSx1POZX33lwLH3dXm6/GAoJR7CGG9tUXwNu1Rh0Tlic0qZb\ncvMViDj6TxEppPsh6GgfjyeafsiPUS7VXGTyngrdukXZPBUsdkdxjoKx0wEs\nHqjN/okNNePIdcp9vjN0hfp/OhhGY8JTcrEQh5FisBbVpCGAb/Z7Mf5JpGqN\nhgZ6k23+5MNEkYy4qtSuCFUndH8tbHYeqIuqqpkj9Bobmh0+Y7V7sbj+Wb0M\nXlfH\r\n=OlZw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9f13083db80c43f15b77be9a504c6178faf85b46","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.29_1586541595457_0.37991617929606414","host":"s3://npm-registry-packages"}},"2.1.2-unstable.30":{"name":"aws-amplify-vue","version":"2.1.2-unstable.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.30","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cd9ab4abe167db0b5b5fbe960f1f775440b1e6bc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.30.tgz","fileCount":47,"integrity":"sha512-02Dkseu6/vUls6ZOS647ToTOAnFi/1hGwKGON4dwywuVEPdFgVWDti7tBrhO6zvIwHjUj64aM8Nm6iqO/6934w==","signatures":[{"sig":"MEYCIQD8wjxpuvP7LkIt2xCeJxgt194CH6Y/Rn0Rh5HpA6rX1AIhAKuRw8u6rgOKYDQMSx61AQr4ZO8uWRSZwtbG+hT9npLN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMWLCRA9TVsSAnZWagAAfqoP+wRYFw1UDd7nH8QgNOys\nxt4aN1PDPLWUjHqGoCD9i1MAdi1Oh8X/bOjiCxhlFXtGK5ZyMcyrK1nhWsRP\nXNiIAPR/Vuar8o/tQySBNycOiJAsZ8/zLfZkoajWGY1mIy9D8m2vXcaG/raY\npqpEnmxO9KcGnJ107yXRS2T8c58z+6DZv1QXimZcHfJr9X7Jyzjga/gz+9Ds\nfLlHg/9lMwUygw+GyrfeCi9nQ//xeNEX4MdZhaUwV5zIX+MefskLoU9Fw6YI\nfQzMZ7brL/GHU1tGkft1HadKDcDi4lkX3KgRMDKloomfXhYjPYz1DIRtEnjl\nDvJBXCyyhas1ULUDWElKBFAVCjlAjs+7VLJIMVwj1uodz73mVM4XK/4o26Wl\n+2N5GV9cQmz6kKlyT3999xmCaLoF3z4119wAEpkV9YOTf5ZMJ8FF+5lkt8bW\n/2jDZ1V3n55dVee7gqBOiqe7jPnCJ8q+JLYuGvBSdq0l34wxtRN9SNjirRO5\nItLH5VLGN5fjsZ469kTlb22MpX21IQdB8nqntz/URM0kOo6IdEj64kSjmMVA\nZc5nG4cF5na+yHc/xJ0w66aY3Smq/qGgrXiaTY+ALrMbVpV2DcKsqQqwfEHQ\n74yo/20nA4XweF7zy09sobs4cmKiLGS4H/OHm19dFHa7rFlxsIkCQ9dNkFYp\nvlKm\r\n=QpY4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1e30ee02a67345b9d3c8d77d37f55262b325da88","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.30_1586546058600_0.7114815820105802","host":"s3://npm-registry-packages"}},"2.1.2-unstable.34":{"name":"aws-amplify-vue","version":"2.1.2-unstable.34","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.34","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"889b67feb52cf629b3df666e4707298bb00e4a15","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.34.tgz","fileCount":47,"integrity":"sha512-J4k2nFDhWhrCx0Z+e5+mN+/xEekJu6DZkcTz9yhzj+YkCiv1RAKUMqCaiuERS2xcZdam8IV+sjLNWofAkgqZJg==","signatures":[{"sig":"MEUCIQDkVNiX8ff5KwEB460RfRSr8gCvvtIjv7iBMZCyAhEDgwIgQfZlBUwJAqVBLCen5S1cBbgSvfrJaOeYg3lKjBqpdRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPIYCRA9TVsSAnZWagAA7YUP/j9p900KQB+20HcRoE0h\nZpcUAjq2v7caTk357WsqPCd+CVldsW/sRap6TrTVl9uWRY5UC3HG5WQTby3U\nzLfmpwgJz0/6TM9cA7etUit6bKmqm9+Ex1SQ0FnYoURDP4/RAWGc7gJtAwEy\nlzq12M9XRj2CtckGSlbYHZ/THtoTJ+FrNEJgK8fyOWNsYBeuEhrUawuHGd8i\nPc7LxPg6RXSWvE/1MP0rSoZq1kuP9MTii2dQopvt1E4SAs6y7ggBpxiBo7XP\nzBBtoJw8dmUQUnywLungK6E8Ty+9Lp+XB4O210w3JBr32HN7y4fj2iruDstN\njO47nMrOkf1pzLKG27uXbo4XR2UpvJh099xxTSTVBOGwye7FwIDWrm8PRVPH\nNSm5Y2pVuuLhUQu26S/nmSxU/KRYXbpEriN2mOoSXoLte9IY2BRFsrt0T1ax\ngpoKuoxLXC2JAK9nMxRZCpgAsraQ1Tzt6Pq5dJDbH/2vAasRqc6WAwtLMpDh\n1eMLBVn3Na4ku86GPgH8TKn6V0ATWZXq1reSkUN8i6xHR8+fC+Ud4+UTD3rt\nUhsu6LVTnYhx4m0i3Ppq41xVHFJFdmejHaWIdS5sLbT//enXbIUg4YRu0tgv\nzoNjFxEsDs+p9fyfIuvlO96zg5FRGxJIqvampqiq2vDXWYhq5dl0BLw5Ees1\nVgQj\r\n=SlON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d74522b3cd879693cb5ba6e80f334b54795ef2ab","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.34_1586557464308_0.8405429924784893","host":"s3://npm-registry-packages"}},"2.1.2-unstable.35":{"name":"aws-amplify-vue","version":"2.1.2-unstable.35","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.35","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"25352c4b5c0f760609b5e4a6ee3150dd5f035cbd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.35.tgz","fileCount":47,"integrity":"sha512-AZ39e2/oxBMQ8qvEaPX20HvuXx/2aYFHeYS8FghmWl4lWjRH2vi1Qxi5jpvWPV/wE/8sGPm4eHPj3WweAwhqiQ==","signatures":[{"sig":"MEQCIGBt1K4ntUvyTY/YIIU83kvX4jkBp+pS6SjkLotjairHAiBKW0DIJDNFFLRJWmGyqlJBx1PS8VwZcbYgvVg8JFHMdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelNgaCRA9TVsSAnZWagAAWiEP/jyu4NgQ8lJ+AVgXtQMu\nJtoYjhhCCHz/cxpRBJr/6Hr72Y4Yw5ZZ15rlGDME7VnSt28pSlHpKETnBZWl\nzVsTAd/zS8ezTA4gcbr610LfmIEz4kv1qfjGe8IIMc3KHU/x0ZSHaSS/Jlth\nFhToYC1NFArvPHYT7lbuXc4o0T8a5EklvrZV/U4AKDtHW966OA7GIYhxcRHr\nhiwxZG2UqMgcGrCh3dQqpO1eg3nKzUs5xMwV8qDbcD04wNdfk6XYtm22mN9q\nulzz3WkvoFuW1IkhfBGuPnlj40hfiVEUz7ujJxQ012mytgYjDP7Qos4OYH2Z\nW2Il/bfH6NdhA5TmuhNBH/CVEj6al9QXpYBFeaZYC5QTZRDEvbkgxQyO39BE\nJFWbo1r8g0MjjwS9Tz+oVBM920siSD1Plp3TyIYLXH3DFw8Fk58bMMNCEcPd\nD9PuA2Jp2wDU0F3u+be6QCXUMSRAVa8K3eM+vDQYwA8DbjubpVgiMA0SP3Et\nCuqPUBVLVDrvC8jpR5rUJ8mxqLkUW4ORn+j6DvZUDk12pkV2Yv2yXVjvZEVd\nKnIWvkwM6PCTvc8/WTVV3ofGCNomBxuCC0maeM3n3FEJAp3ZIeqR6GpYRMhp\nM7sVoy1WRbXlGNLheTMwWPR7qqg5FaBz208qfkCEvOcUZvSvNVnqbONJRcFK\nvdm2\r\n=17M3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f23e2ffeeffcd26ad78fdc64f77c986e3c331e8f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.35_1586812954087_0.884037830917004","host":"s3://npm-registry-packages"}},"2.1.2-unstable.36":{"name":"aws-amplify-vue","version":"2.1.2-unstable.36","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.36","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cb9fc6a81946bdbe6d4b52f6cc69803dadfd5729","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.36.tgz","fileCount":47,"integrity":"sha512-b4dJufxfWHWBJe+yt6BD7Tbfdaw+kEZInL4igFbKTOLEyiBiVOVT6BuATwITF0RP9YSCpuP/vfh2i9DbBnqKYA==","signatures":[{"sig":"MEYCIQCTgCprmz0fLS2svOeHD4FSF0bHkD7eZHlCM0KlpAL0ZwIhAJJmBuKKq0gUBjo/ve9ugMENVfQ8PIu6mwNfPhhhrAzS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelNqDCRA9TVsSAnZWagAAv8EQAKJlJw+CbYl4zDQOXJB6\nSPMqgUBnl1I4PalOqd+2yoDq+00SObxBfQQmAtDD+pbVM+tTwpOK36ZlugAC\nDaeyyhXuEUR6qNKRobmH/ChQmvAV6rcLPXw+b9yYla4xDmJt0E2Gi4pSA+lo\nDDKgBgQKR47FcvbJSq8AIcD7HSzzlMnI7W5mMG1ZPxJDAkWk9BYqAfjd669G\nDKIdd+9s4/0zvgDiH2P7VTqzvU85Dr3uY13aNhTQ1zHSivfBeU+inlYXNLQR\nmIADyCPMiwzZL2l1Yl8ZFakmYz7BYuVfdZOd4hxjaFyWusBmmR8kZQkG//nT\nTzS7OrtBfyEerwXUaUATGpoSwNh+yxAMDTWq5uFhnidwC7KuAsZRbdDmnAUB\n1r4UouUX32r0zStOhgBt2Vt1xWKADKIruiqJMBkryYJboLGOvbiU4zK8BQwF\nASkjG5PkLnR8d66J7UH8UJHLsh+NB0D0pITafD9MqZXUoFf4x4quSdaEMES8\n5TGQ3SOnId4FMMiz/px29ZrHTQj17B8GhNy+rx2+u/JaEAyN+1KWObGuvsZo\nAza1DLCsz9DZ0oE3K4oDgCOQNsUTgkIVJLFdEfoa68NU09lwLF11Vlualxvx\n2lb2t+qAsneyZv22jqynlqwae82gqA3P9MGikuluyfEM2k0/iAv7UQKoYf9l\n/1RG\r\n=vG9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c80ce971976a4bc22222168242b23bd821e416d0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.36_1586813571243_0.8071064597056792","host":"s3://npm-registry-packages"}},"2.1.2-unstable.37":{"name":"aws-amplify-vue","version":"2.1.2-unstable.37","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.37","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a205fde43f4891812c26eb6517a4d4e0fa9032fd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.37.tgz","fileCount":47,"integrity":"sha512-e6mixF11M20LvHGB2OEMz4040Ka6y6ZGcyyLegqMqccpOrpftzFWOwhOfH9z3vbujc2pBKRrOpNCms+gS9zG3A==","signatures":[{"sig":"MEYCIQCq/f+ZjEQtBwOho6R8X75DDPou7NGsFbg+BlAy9vW5VgIhAKc61M9aSwuCE6O2Pm6wSf3A0jnvlgDaRf2gQCkEkEdZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelSE0CRA9TVsSAnZWagAAzq0P/j17WiyZHd1IKp0I85KR\nTrhgLPtY/VGhnjyDgSKNUVuVKwIabqNF0uqXZj8T+9LUpi/59s41gCiyPkD3\nMk0oq3YuyOXqZhkJIW9H0c98tJujVCzyA9y8VfnGzR/F2yQqSe7gUm5MVvCA\nt/LSWgjLNxlOET2tFYeLt2BSr9UQgsEY2+mSPystfan5GHQDyocUEn6JV1ZO\nvvAyrb95m1+Kdj3XMlGn5hAGQo+vACM+1YFxTRSx8NDrKKYdSV5N6SaMbNRC\nA0Ebdu3xd+U0WminKTrNBXhNG/HO9EB1uPjQUNs0Bzp11EVjKDprYAcFr1Vc\nWeDvcL2KYKX7rVU09eb98ENcKVPmCbW0fDJ5q0xlfknAmavq0oU2WM5DBSwf\njJjIqEkUQ5h/RW+rSVByeRPdzxaWD+9e447s28JSXrxx4QJAu8lyEB/JveT/\naciYgPKMx8B51Ml237nG6hg7tDAr4XCiPE/OV0OpN9rtg+K26GWfDihMbKBh\nRDAodSCLUDo2l5Yn9CRIzCvx2fOrU65WTYVckBwDFLoCh9MvspqULTd1Eynw\nOGtf1G4vOx4Vg3lhFlUdV5REGvQeAMiAdh1st4ZQzzJxyZfH95J2svUUR0iH\nT9qm6QcSJxE6klaTlLK1ELpdIyGFHR94utWWE/wMhzD020LdnFK8uyxetdM3\n/JlV\r\n=23Tg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c9bd3d0de7dc570b8b0a2045c3e9feff912726b1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.37_1586831667993_0.16717303643697412","host":"s3://npm-registry-packages"}},"2.1.2-unstable.38":{"name":"aws-amplify-vue","version":"2.1.2-unstable.38","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.38","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"13a8d1cb32a261a89120209cf5242771e1881624","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.38.tgz","fileCount":47,"integrity":"sha512-T3hXbfuho+fWfRszCW7E0d+15CEUUFujEVJhMo0lFKURGfC2D1kO6vyoc9AZKonUFQBVnCTRLBwB/KGXoLij+w==","signatures":[{"sig":"MEUCIQD+y0sxY7zi8uxPCxVGSlVCm85MmjzsCuIX4mI8rTsTPQIgUoqSJGKJKva/9RpDBAnz7rK5JOPB+FKRnVR5LFw72is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelhPQCRA9TVsSAnZWagAA3WYP/1XlO5yXMjQyfw7aZU5Y\nc0EOvpQlR5slZb9QPYIqD6KHnacdilopwJ/jbwAmGWs07Reso1UF1JmZ5VBu\nbjeeRP0DhxGTxvZiEDlzGQwkODro2vrMq0DVX0/yqVf59GSueKOrhbERfhTj\nnZQpMlbJRl5gcCv7qkX+rwogJ47sohLQapBVjCKuiVuLb4eT1IsdwwPkIkPI\nNEs+1nVQai3C2NB3M5Cuwms4zKJboZ50o2ld8LpzX9qoqDy7C5OAqCXJ4xfY\nO/AFedxHXFqLDItky6S6bdbEJnEgdPmGgQBLlI4HNTVLmWHil+BIyv8bQL2o\njUTRICeoGVT6Tg5bBFMNp792mhxH5B8bssTonqc4wckfyuywRK6dRTs84g9Y\nnmqesTvDZvGDivrWGZhfiYgtjjl9yddINUryQNXJCqMoB/QxA0Kdv6pImnqN\n4X67lnj3onzF8kZNNt5w2JbvKI6M0dtopE9sI8+ebyXO7xRmy+3oiaSBm7LW\nVZ7ycYpsI2FekSql0dAr+fxfSGUj96rDYW9XZCinuEbK+K3T63WmYEuRLq4V\nC4+eQGLbdcHw/z4vmEDirX/wAU9v66xx6ayrB14dB1zNrKgE7K07Pkk0qzqv\niVsfk78g9ZloZmbZQCP6oRgzGip65YclTyQhMtXqSg/8yYmdik3ccQC6q+e/\naE15\r\n=8mXi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d35a0c2d7f085eee1b8e5aca6ce861e66d328b30","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.38_1586893775867_0.3703380174801221","host":"s3://npm-registry-packages"}},"2.1.2-unstable.39":{"name":"aws-amplify-vue","version":"2.1.2-unstable.39","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.39","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7a9a708278f6d99d93140d0b76f71c2ce6f3896c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.39.tgz","fileCount":47,"integrity":"sha512-FF0/YfkBdtRDxJthy8BwwcpJJZrxDnJZKH8yl1O3uC63Kl23eKhpH9Zl6s6wolvWwvBEadxwLpbEZQdtNVGSJw==","signatures":[{"sig":"MEUCIDTaB8L5wpy3VXYLYLom75+WcRKOOy3Dt0qkSj5SWnvNAiEA2SxYNnSUg34NcDS2bIHYadoi9UzRYNMsOwMxskMsaCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJely6FCRA9TVsSAnZWagAAbigP/33vkpJR3++pkJvSGqxA\n77LKMny/wT6s/vEpAxSMDHO/aHm0jqFGougTGpxuQEXPqxwjtNTxhfXoz8aw\nltQfJ+mgbpujp/gEtLosoRURrNqIxPVh+nNZxq4T/EQTDSz4iWMvUEL+p9rs\nBQMEJXhvIGenmtES1Z6GK+dYxqOCd7w1tIHv7/Qv5Hp0l2vO/AkX5FB0YA37\nTOpTBtt9qkRwV4HbcQZSzEyldsnGqXDVuEWRQeAruOniY2VEUoQBQ92Oo3oF\ndTiaLrzUHneNJHxbotL0r6PO9AfFVyQeTEU/p1j1wwRcvpayo0M4ahdb+o0N\nD4hcqmjyUVcoLB26B79R4ir8XnO267hg+Sm5MUQSQodZek9FLZDJZT+iBJX7\n56Th9hQRlpCsLBuEutpY8LjVermIog07hQr0kEidyZXZ4Rw3ExVI08iVGIbV\nr9Ky+rs629Tk1s2Rr9bwXbuO+9erJJffpTb7Lx8wtL51ohVOSywLxeoFzoU+\noqdTd0FASzdbnvK3Wy2OIqaVF9hBIuaLZA+7biTedpurrO2PiK4O1DeKnzDy\n1DEFihx7T7FuWg9hzIJN+JD0IuRonJtI2mvqQirsNC7aq6d8zWbS0bJWNp8W\nWY+iviQLCr62Pbw2CiZ2Liopkj/dBi9pwFMV2VaHEqCIhfBWY+LgGSACZlwS\njcBj\r\n=P2og\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bfc5f9fb312510d8f8202411e9e367b6eadab2d7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.39_1586966148654_0.2782424899511966","host":"s3://npm-registry-packages"}},"2.1.2-unstable.41":{"name":"aws-amplify-vue","version":"2.1.2-unstable.41","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.41","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3196de33ccc61a118c5ad43f7c82093641a5dbcf","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.41.tgz","fileCount":47,"integrity":"sha512-WSFETMnKiLJ9imyz7SSQuGYcX1I83rSvgM/TJQaR0SbvOdnviygNdcHdfOKHTVbZPrYXaaXxw0SkPTk1X5tdqw==","signatures":[{"sig":"MEYCIQC0DtwRge54De61DxRuJf6LIPPUUzOM7E/yslpUgHC4fwIhAOsVh5QQy4xVhEpmTOJDy2DNFbGaFG9Z6dkqM3hd08UK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemOezCRA9TVsSAnZWagAAl0oP/3AyGbFvqtqjkCSCsi8o\nqwuTwLVqOy8ACK1gCFJbtdkxwqx+2ygCiWMR4l7cjMENnsZsPsqGDy+gG0mT\nDZdy4004p+V9EvHDV6MYN8cMAzRiay7bVsSLJXSYe5NRC3yKdwytzorzogB+\ncSPL9HOIQyC8Xe0DWwnykYdU5f4rltdpwFs1ga+TO7Bqaw82DMK7GD4HqpCo\nGs1SRf190iI2lULpSbiFhRrQutQvuNtblNq6Jsz9oaiDzRy4XoQ0aWnlzA7R\nszG2Ois7+XoUNbOxo+vvQ36yS/vwE63IuxqFuqTu4jjUMY/qzhuE6Uy+C/ww\nvBvPVEWhNxRW2I6d+94l/qhXJHa0kzep2KZ6gKrl18fSgr71E4wJiWMU9OC5\nI7hW6193d59Ok055pdSuUPQG8QUjUczNDxIDMPVx7RKYjNsJP/IN5zjxQLfy\nEXPBYaKI0P+DTRjaDTEYfWzkiQqjFeOl6dmlYWdKnKeJcTMcQzxSJLOrH3yN\nDPi8wqHBTY6nv1xGITrNZ5KTGwH5HSI0po+xtLgx/qmsLzrpbt+OOJyrMac+\nY1B5fUKzP65Z9jDSRWhVFBKu4tSOz++wfbMrXa9TZccKxO1Pp6dORqzb2ys1\nWjBfVMKceGXkJ3FGNj1ZSG/u/YFbySkEjmBp/fg6dOWvGTx9dg4sTQQAVmrL\n7wOo\r\n=MJOj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"31def297746fd7f1763584411302e3664aad096a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.41_1587079090754_0.5445420086857491","host":"s3://npm-registry-packages"}},"2.1.2-unstable.42":{"name":"aws-amplify-vue","version":"2.1.2-unstable.42","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.42","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"34a6747ef94e5814fcc15cfc9d7dfac653b534b8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.42.tgz","fileCount":47,"integrity":"sha512-GWmvJr/c//HnYPNDmyPam2PaoPpU6DhNCgxThcZN5qORbhBr/rd87zZYe2T03owzRPL+50IXiwIVolkvpda34A==","signatures":[{"sig":"MEQCIHONF0rTHtMfXjohBxRRSUoLR30ars45PVCbD75Npd2wAiADE78Hkq28hmgtp04AcvEH/hBWDgo/fCQFfwBEpJm7Fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemO9eCRA9TVsSAnZWagAAfiQP/1BBNSzRimFOt2kHJyk0\nIdjso0tdYG+g0KXF6efADamEX5owiOBkuopMxcO3Zrie4nI5CuPj7yRTbWIs\nu50dJb6XJvpqF0yyRHIy1DuD+xjP4w3UGQ8jTZa/CZLKf7emrXpWb10Y4B53\ncmwaHQ7RkO21sWdtHeF7ysxfvAY+RgrkZ3UAmYp8acsf2fjHnhNUse71Wobk\nKxjOHGH7koBT08/8INfKPDGPKFJee9qqsMaUjmPX/JP1CPmep0OOu8f4EAHz\nlTeqqsO7Kqiigo74fliVXwfBFqWeV+yPP5HyUfFJwMTN2/dkhSW//Xtp3wQo\nWwmLiaVlPdqhsOCAb8Fz3b9j3bXSdHWTeCnW67rcPTCjSB5EPcd1Krq8tgV9\nc4+Fb1t7BXHB5++gYdZoX0Qx4C6fv4XcwUTM+uZg4Sl8HfzSBXKkT2rO+qpn\nzNc4ZhEp9Ubu+id+tkVx/beyBBkDK0L1gC6wX3VnxDLU3gQCIQXj0U1Sps3x\nxNY3JzNLOqVpRtbLVRwuWC7zhCqHps8O+MHdu9tPf6P1In0/MAZn+4Y16Jgr\nK1qZxEb0q0qHNlmosUp8DF2AwcOcV0pkLpj92Mv3Ch69EhFHc+co1vUbU2NK\nY9Jn+humagJ/6tnE9mRMP+2L3AhZQyLu7kTw8iXU5bwVxOgWDbUfWu+Q8L49\npxBI\r\n=FKqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c8518396ccdb04c3bb780a48bec3ce1ba33d21d4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.42_1587081053542_0.882289328122585","host":"s3://npm-registry-packages"}},"2.1.2-unstable.44":{"name":"aws-amplify-vue","version":"2.1.2-unstable.44","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.44","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"92b5b6b2a1bd0e236fe8c6d3f3ec0d0164a9ec27","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.44.tgz","fileCount":47,"integrity":"sha512-g+luf9ritHVY/LOtPYkM7KXpHdHjFyl1W6kGnwX8LZKCAgtdojg6ixwRpr1D1QBWQ9B1TQxo2TeSrcGJizvjVw==","signatures":[{"sig":"MEQCIDlY32ohiw/E4oF5mrgm6EYetZ018ijf/4JmfTGwR3mLAiAtas3x5/82Hfz1FhK4wYsSDbHVVpqX5JGD13nulcGWcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeG+CRA9TVsSAnZWagAACjcP/1Yi2L/tABNEUOvhb4t3\nA00W6o6J+ONz+dKzam/Dj5T/p8QtpLUM37f79L3uKNBeCnDd42obp4cx6n6j\nalsC71bh04VLRgfV/u6STphnr7kCqOipg27dZ4vO79a/a+K03WHtLH7KOWIx\nlkVD6hMgrrV11nuxbzriQnb/HoGALGSoUp/FD9Ofgwm4EjrT8j/cveFgWBLs\nQErWwqdiZv41NfGivhjuqXBJEo+rRzxo0QIKh4e0izfsT0K6d/H7hhFpBijP\n+W2KtuA9tVNnk1o/jEYcetXVEoD9oHhrsbJN87+u1rKNkWLfGDT6itD1ediR\nEE/OZOuXCGQwEo9bO7N67W1ijlWSKxrm4Nszzmq+7IBwOGvLTnLVkOSmma2v\npMqsYdTTG7BJsIgerG+Ys6LN7rxWH3Ms3bV+CXOMzPjr6nkv0XDDoz2r94Du\n/xUW9VgPjll7aN02gpw+Dp/Y5Bs+HmIbIds1veROd0l0IlyR2hlcUvCeMBqZ\n68OE2fsYCRTX+aQ+RGMSaLFLwHG77597tanAGOojQPEoagzQREJh81r5Yhe8\nX987GQh3V8fTvfV4QeFiKZ0PHWnGTAmLQcyvk27DSatyq/POHDrWR/2ezQCo\nr/OV009pd1lJEkdnvQUexQZQKiq3VUqmq6hgSmHU57gu1w2ocwxMH9qVe9qA\nO/4X\r\n=M2bY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dee06076dcbf0c2f827d6ad52e7fbc24b9f7c95e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.44_1587143101410_0.5806154452160519","host":"s3://npm-registry-packages"}},"2.1.2-unstable.45":{"name":"aws-amplify-vue","version":"2.1.2-unstable.45","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.45","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"50d7bf30f802e002c2ec6bf994ae3b21950e7ffb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.45.tgz","fileCount":47,"integrity":"sha512-YyK0VGETHZDCI8X6F/GDDL/7uShb3QYyxwJolhLFag3xHWJ/JDNBZcvJvGbmHqg876jzVph8a65zNvEBJxl5EQ==","signatures":[{"sig":"MEUCIFXaSuS1JvfvjQ1syrUKO+mDMZzm299MV0Pk/McHBwI7AiEAtymLakad2Nn9l+6ZwLfEMzBU0EwQ5SyIieeDwK4eWuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkeKCRA9TVsSAnZWagAAwYsP/1nw4dVea+2RTFpnciT6\nA35Yxbp/wJw/ley8XX2wo0ypeWJt7ph8/5YkYF7j3JF/iaoQ3Kq2rlKLAULh\n8CfdX4DEE/PMjyMzsn79LXx+8uu3d32LuAE/Q/nNORuxwyChDFeNTPhQDCME\nf9hGUC5EfSxlqTlK7R2alLbbVXGHfHpIo+1dApnsMSqYdgWYypkEM7ZulUWq\nqWg35n/dQMpz8qVb4m3XGktjBHtEBafCZBQOifmRMv4DF6e8e3rtMU4dUwam\nKKZAf/jSk+Rjj2yBBPFBLjU0ShvenFYFA4EJZ/AleorO1rPzx1Lmof9InXFJ\nfYrngXfv1fxYc95Mzbe3iRMayymo3HXq3CmfFWDDybvKW2nleI4zUUo4+DLx\nAIotwcHW4i6paK7/z6rxCpg1BRjhCqrXAPOh1xd4HCKr8KiREtwLAyxkWSN+\nP0ExubwP6zUdqV97KNV4a72gkBx3kc5Lhq8jR6icfhc7qkoqrZ8uIMihy1YS\nZMxyFjsGQnLuoMKQWLn8CvaiCrx7U0olxspwoJJkI+C+Lv4/LxOItU5+gkra\nXxTh35wV5D1URQXMe7rCjWZIS52EKj7Tj9/DII+eL9hEp1O4GujQAmrVFjr5\njzowm41V31FgpTaT45XgMcWmXNMfJIIuONi0hz+mgPwKNDKBoQGA/oXx12SA\nurzy\r\n=8irN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fcd522336a74ca6532821e030446e2219d5fe555","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.45_1587169161795_0.33751047905074016","host":"s3://npm-registry-packages"}},"2.1.2-unstable.46":{"name":"aws-amplify-vue","version":"2.1.2-unstable.46","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.46","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d6e517c5aed23a8bc3fdf525995a1c5f68c0955c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.46.tgz","fileCount":47,"integrity":"sha512-DP+FWvDmC/GJVUHdKPuvl01EGR76zX5LwNqstFt5jQq2bYko+qiu0H4md5aHuURUgtBGkWNNY0wJkQg3ZU046A==","signatures":[{"sig":"MEUCIQDB3DPv2oGAsZGt6FOxya5/yN5v3E3nx/vJinU3fKofAQIgdXbdEIS520xPpamqklmJARAqy+jSuzaDcSmsld7oBzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkgLCRA9TVsSAnZWagAAwWAP/2zkXnvTZZVPFGE8tXb2\nAeLE9wnPIqEsrUBL3WztKW+v4sdGc07Rkiy8KHxInEZwEUtQ7j5L2wxXMJO7\n3KcyEtFlQm6VEXVEfmxKhXxO+wfH74ncocWdKka21/h4wSDrobi17RlCjiYP\nV0G0aSix/y+WP8JBRlKxa7IxZ0oZ8kJjfQ8ifLXj328yLhzKxQ7yhIY/fju+\nuZ/z975gct67eU0V+SH0dYxSJ6NcZQr4RPP9pBPFj0AKlemx7WmwOawLAR2a\n1AytUwus2wCIa2h4DvI+OAtX+cN6FQSbp8PqX8Di3Kdz3S9jN8dAXkpKHf2D\nGrkJx6sowr1HdUMtWgLuvtE86By+ynRyERfRV2rMXheifFtBpxifdkBHpIjb\nenI0pTfZcZ1iA2kUTV9yn2pmNdkUn8mCO3680IEzaDg7ocRP0wqWsN+My82j\nbPZBsZrgdLvFs/ox98yXthe+ud+xzsUQ2Om5wlOXcFqWMVAwx8KKloWR62JC\n6S7n9bGSyw0ivp5SUtoPQJtyD5XErtpkPXbW9e51w0KcNgQ3pu51rOpukp4Y\nvRLRLfyCVr+G9+yguXkN0yC3TI3Vk78kP/5zGczRc7+bguoQHzynPO0xfCdx\nYFJ+JfN6/odNyuo6KybS/exa2qbnHE9HYdZtQqGeYzUiwad94mw6Wp3IH6R/\nh9fK\r\n=fYkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"48baa1a45dba3c309ed8cf17747744d6f20ad170","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.46_1587169290329_0.7440163169529845","host":"s3://npm-registry-packages"}},"2.1.2-unstable.52":{"name":"aws-amplify-vue","version":"2.1.2-unstable.52","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.52","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"93f1fae680f16b69c263e113921baa8f9bc52dad","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.52.tgz","fileCount":47,"integrity":"sha512-c53MtZ+GllJWr4xMxigiLmZl3dYS5vr4037VN7+HXAMTPfGkohK9oXshxivo9+xlzymgiUgXwIOr4LZaChX92A==","signatures":[{"sig":"MEUCIBbTFe9CTuX814Qpw8pocWZuhOqfZvlFkymctwCM+wReAiEA1xYhONylnEmWgH3Dj8WWP2k7VF6lq2be/9yAW5gritc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2d8CRA9TVsSAnZWagAAKmMQAJwN2vr8uLjHBSio4AJy\nK6qWAySH+VW1YEdK8yibEP9Wl6CGXlQXGTjgaR07j4Mednpz/gtjWITOdz2z\nfFSbKJ1RfscNaN4jQW1+0aED2qUetpqdWlQBXoVHVJ28Wfcay1kgxfhhf24/\nNmNyJkIKGcx/L9L0Zl6hcKWA/ex4YfgQG7Wpw9Cj/o7ligp8nPxEDxGtRTVx\ntg/456jEHVgTTWUOWZbkI9IQ5CQ0A/UAjUHMthlz4JEIEyRZqVNhEHJSH77K\nr6eXaqyK43cs1LdcUcpnPPUtWOyBfMrSoErYlIdXQKBc1Exxbd33IhQ/WfnZ\nsOz1PBeJa8rBmItY7Nn7kbG+sh1Q512VYcTD4a4QoVSePXeRDdolLjcWRm4N\nsILyn98ZE5/d5Aum4QJ4OkbN5YHZQIFluJsRAtneUlL92tohblULvd0LL0aa\nSG9vwPjZRf7GM9u6I0cCmLLEITQSrcikrAjg3YqRe/P+chDjRU/MFfG6Ze5M\ntGcgHGU9cshd3HTnXh98VXGEI+yfodD+uyhwDuFWrL178smMpt+RnaQs9b9Z\n0pBpbLqIp3GzSiRasrRGAVqvw7WKhfGOz4Caha9VH1IUxJW5zAumzp0x0S0N\nv1FfpHRdw7LxRK0f3Sw+X/8lC+2fWR9zkucma41ZMabPCBVZjvnxgRrzFlOM\nOeo/\r\n=bVY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b112f67db2105fbff3da5e84799630ed23713e78","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.52_1587505019415_0.44289933300450657","host":"s3://npm-registry-packages"}},"2.1.2-unstable.53":{"name":"aws-amplify-vue","version":"2.1.2-unstable.53","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.53","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"674243191318acc6460003fd1700350aba9abf06","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.53.tgz","fileCount":47,"integrity":"sha512-6hZO24uuLazXMtRc4voiiMZ5VBXETQsuHRxUmgEOaFmGqJnPg1NcuZRNcGlK6IOuOATGk4LS+XuOcC4D3vFg7g==","signatures":[{"sig":"MEUCIQDxad6+XmzCtVh4hnmUTgk+1Sy4J5007UUzlONHmf6RpwIgX946l3vVbxNmW9eWQ1BlTIvQdUoqIbfhhRUHT6B45so=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3gmCRA9TVsSAnZWagAAg+0P/jKb/UB8cA+ZiDlaZyXJ\n9SVjsSCBsQIonkRmTjnY/x7IsI3E+Gug5wcvHdsDazwEBENjZuVwOZ12TPXX\nU4HuKI6s19I0ybzGchz68hQ7sAZMfoN6PmjN71Kceo7S8DOHprMA+DzTcO9c\nxPWiLv+UOPhc+Z7Dfmwc+AGma6XNDUK+Hpxz0SM/2yD9veHTv5bEe5PaJc0v\nyu3UhapIblaRnEeLl09g9v2EeOlUvjkD3f5CuINK1BSvczsyoRlo4h3ta60t\ntYBCQAvLztaeGTFQDStw58RgwFgOM+HFts8OsTqO937HrQ/S1Tb/b2plkJvz\nsMW8DZwcYmd4mEm6KkXGp44lfR8umUStOOa0KG5y0n+VOlWY9HYn2xPeqwt7\nIW+M68jApui9JE/jQpY0vw6f/kVwxwj2c1bUini4FnTs/45oXe7wv71Khm2Y\n6eOg3VbLcXct7+wixNgBv/kTI5+MM374mpBX5ksRdtx1jCrg5OyzxyG9Pv1j\ncTvJLqf6ZMPY8QXwZqLeV4O9+V5dZsJhU8v9oZpz3UdAFQuDsV2aIW0QWC9W\nKyau/SeZKVcHn+ctsiurUvS4mpG55gjwoGizDGUX9cCOA2KLhnhHwJbPK53e\nBVVCiIMAXmn/F4htSbYHax7Utj2wqje+zAbZhbqvDznpIAqOSesbU3hI/qGz\nUpWH\r\n=YwTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a58619e601aa5fcdc79e0b0df25a43b3119f58d1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.53_1587509286380_0.5668403041614782","host":"s3://npm-registry-packages"}},"2.1.2-unstable.54":{"name":"aws-amplify-vue","version":"2.1.2-unstable.54","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.54","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b4cf600c6476a2e1043be8adf82ad9d95d6c46ad","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.54.tgz","fileCount":47,"integrity":"sha512-Fs/iGtYCzp+sCqZfhA1VRs3WXi/dBwmTub5rryoc7vP4Ln7il186iLyM5QGALh2fSOE+n+PH81s/tt6MgxbXxw==","signatures":[{"sig":"MEUCIQDhqHFzzLHSBBUUKhcf6TQ1GfJ5BTCq3wFXlJbOlcI4RgIgVo6UiaJ+y9V6CIFUaEYis8Nc4un8TCVcQP0K/HjFlKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen4wgCRA9TVsSAnZWagAA6pkP/0rtfbQSRau4v5OQZuxU\n0Jd5OYOip2bE0HLDv98gjCNPv+DK060QENZQl3k9dKBSQhAD7H6vKVkXjnQK\nQn9vrgPMTzTsFkvrMSUY3KrqxnZ5H+o9EOA/Mg+ZD66gbIbiVisHJRA8Jjzu\nQn1gONhwL3ljL5/Uk+zxQr8ihfCYTq05aIjfQJMfQ2LQlk/UbsyeKJ7W91J/\ng+yOka7DK7SYZi9/mbZXM4WvVZ1CGSYTKpj4ECQRhcl8U8zA/6s8VA1qHEMP\nuNg1hluyfKpMohTda4/HBVO+G+pMCuUbqg/aNqGeRSyb9STgk9ktsoquCVMp\n+3IPBhKUy3QAyw1Q02J/25CZeviqlARQICoxhfohSgivE34k2fd8IVUIw/OZ\nBdCD6xdP3e9ULa4LAC04VH9T3jRjroEyctmlVTAtF9KEefkOOB1dWhE6hv/m\nuoLFplIe/yjWwa2HM0tVRDgnCsfedhsFsSku5EUwNJ8hyzScTkO6cXWx0Cj4\na07/UlaaMY96cci5eYdBk2CEVLZgu03zZrI3MFlbQCFASnLtdxRxR+GmO6LS\nELU7MmWKFz7I/iKqFI09aTzVcHRuQqo48DIEj0glktpW/vMMVHVvDd2Ewjfb\nR6LqKNtQTLuQ2m8rQy3mbwY4QjcnkXmI5QMQpoc8Sem0yvnCaFYt/XcXwLLr\nsagy\r\n=lqE4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"24eeee1aae62efcfeed87f37ad808abbb2ae8d7f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.54_1587514399815_0.10090797073662161","host":"s3://npm-registry-packages"}},"2.1.2-unstable.55":{"name":"aws-amplify-vue","version":"2.1.2-unstable.55","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.55","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"736fecf68deefe3a90613dd04c464c3539975df3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.55.tgz","fileCount":47,"integrity":"sha512-sUMZS2R4TFNmoAGcmT31XQAbpYv17/wk8kCxICuEhBiKtSA76+RpB0nFUDRoy+a2+mtXPICKREfG9Hb12DWvLQ==","signatures":[{"sig":"MEUCIQDmKc+xhlu+pb9XTqZD/bwg7IQbdNyg+TvhgjluZhO0GQIgHhKUDxymtvA8oSvMKnJb+ROQnuU+IAA349K5B+gGGZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen5T4CRA9TVsSAnZWagAAvaMP/0pAUT6GspKxV8mrK4Bk\nuTl9Z+djVD04ARRaFuV09VK74MKpM2sVqCraJ8u0Z8czYNs/90w2Tx3P900a\nycrpEozoUqrQxwjtISMK2VX+J3CCou7eDQO9HratdZm3BY5/ejcvB8hSu+Wg\nMakqLa3+Bf9N40MiEUsqdWrpsHEHmfBBV2X7+cn3+pJcgmBqM3Ui5mgUMREN\nPrTKzmXGJT+S5Yd3aEUkgNyd9I0UFGv7JnTbT9BR1wdLQIf11SlYfQUspOkb\ncLdj4K+qSflDF/GYrvuyS1X+kaMRtMHMSFnLH7jZViOkpAnDrh2inKzV7eE7\n84riGlHf1dYeAXA7+CiCk/3v8IfSbDGN1VzLQLjHANUo5M02uVDy99v2ltqV\nMNHewBr0m/GPQ0WhUC3UBzS4T770+1vIysrzAbdRq5nX2l1nsXZHQCgqO9sH\n+eV+ejv9RMv/qzPKArfxpN9YvHo1yEBd4QMv7kuYeradyYQtebX2CQWVBBFg\nysGOAA4SNroZF83rNSHKnv6S3QWqALgvPiv6zuCrMVpRpqR4YfHiZ1qOr1AO\nsOUvzY/knRitQnii7htqC6QcQMz1qYBv3C3/OuG6nvUWLs2OSjVzsjq14A9g\neuwcxuf2HHsBZ+3s2iaNfDBMOYUBIwkAZARvQrF59GpjltOEEbQN68uBoYs7\nzyJg\r\n=crqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ad17d91f329eb46669ff908f5c655dc18f5739a5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.55_1587516664167_0.7452577990840228","host":"s3://npm-registry-packages"}},"2.1.2-unstable.57":{"name":"aws-amplify-vue","version":"2.1.2-unstable.57","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.57","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4e89b1d4943f0543dfd840cc706ed8c28e6c2127","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.57.tgz","fileCount":47,"integrity":"sha512-yp/Qc6Gf2iq7a0mLSJKPzHceGVU4G4LecBsbsegnvKGQ+AZDeJhrRUb8VN1a5rYs80QFl91RARcK3oW2Y1rVPw==","signatures":[{"sig":"MEYCIQCfAfomgqSCOk69rmAdER/MYGfXeMOcSL9l6jXAuswiYwIhAOh6f1gxmY3WpuHidq4jbNqeB+I18E7gjBmgOcmCSkXT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen+0qCRA9TVsSAnZWagAAH2oP/RPN1RAEqMjJuAcwbbA1\n7X7zjcc7GIioq2Qc5c5m8ksaAkDJSq1I38NHzzMI6Vhhyl8pSEr8/KbDJCrN\nJg+0oXag9hjuPGUDAq7+PTMSsaf0ezWd62dziqRWvZzPtCoqH+r9aZZ38DF+\nJnDnORIE7piC0Aq3ooeo0FK/t1cZxjkch5dz31V+ks7dMfAo/2GOVG4fuzp4\nuZRsMrhfuEW6EE5EvNVBo4zFH/jT+mYy71HkIxpFQOyGKeMOOhbyYNmSwdiU\nK/FO1Pkf44DZ2r5VIeI/qKCfNSWqg4byzEewmhjOKo7j3xydj++cgV0+vEaQ\nqqinr7TRnKoaE2CgiO4M4MqAu1uRYueh8Zn5Fk4Tbr7TVFvWyorcQDNc3YTW\n0nlJhasBwgd7GFzeF1T1jnYXBbQPck0x1/MMs067/Dn4axTX77FsUz3e+awS\nj/qRJXa7AkxwOEoXeBaL8XnL63MZd8FB7SBW+IWnnkjFPW8ZAKFSPD4Pq8PB\nIXemO5uQKS2pAbPwj2D30Oct0nlYTs9E1brBJXn/zO2/N72aCmiyXKJ7i9Tg\nQKRzBAvROMy56yeF+mSszQ9wlxSjlzsgO9ekDRpQ1He9xzbaBkOmISbLnkgt\ngL4exCDwZ0JEQcRnUBnpuqL/ZJ+fnnBBZ1M8NKPajYHSesia7FV7j9XqfeAm\nQu1V\r\n=TN/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5314076b68bf3f2c8a5e7e958b98945c3ef9054e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.57_1587539242147_0.25557295594681295","host":"s3://npm-registry-packages"}},"2.1.2-unstable.58":{"name":"aws-amplify-vue","version":"2.1.2-unstable.58","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.58","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7dd876765b1221ef96a9868957d0959a389eaabb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.58.tgz","fileCount":47,"integrity":"sha512-3BlsMCS3XwC7rw1EhP3dnLmVVED5Anvik2uJ13jRslibDD1wrsPQ2HDnBO9aRfQaBIhwaCrhKGbn4q3+WFxZLQ==","signatures":[{"sig":"MEQCIA/lfy5jEk+TI+0I3pufyjOnXXBQrkWR9o2cYUkQtMP+AiBNqn8XERNKZzD8t9395/L4Jf1wRN7RkFNbR9LXS89oqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoGq6CRA9TVsSAnZWagAANG0P/3nLvPGbZCKqrYim7/YL\nXo+Ieq0VI8jBCcEENEQTVtJM/a3vLHZr7jkL0rq/2VIRjUfSR6yxG7Bg9j6h\nXW9PMKRnxRit7/maSjjhxhWzTznobCjPZCCAwaA13g28KB5RLoXxPzijlpSo\nYlaoZjJOFGPO5dTHwAu2pYwG+9VhJhW5o8B3YtrD+rRqiu78L7wzLx+kHFAp\nHV8ikhsp9oho7HBoMRkgFB+nexAKpc9WKImEOkzosLKlx4QHxLtyPGrovcuE\n6VHIRvCzbVd6dRm9OYVBVhfofDC2iVjSoGzQ/749ksa3jfYxILUjn8ImTVMt\nQ4KtyS24+aaWPmbO2B8G+qsEvXR9AUzzpW0dJsI9dKOOF/id/HHSkLEN3/+D\ncPrJtVmGHPX2z1ibR823j3mtfH9mVRcxuIoqvV2KDdL5WgluUukvNHB3ZJ1S\n0pG3z9T0+hhQYX7qMEO8JEkJ647NXPXGYTKXa3YzlMxfR3eoP++9RU/PFfEw\nFej1Eo5DzX3gAg+53HXTb4rwFBtRaO/SK1bay8jBMJQznPyO5bhBFLBtak+3\nuJvklb8pLG+v6wdFTD437Xq9HDu9isFQC0ns2ePZLYp8bl+Ea7YUWOnrexvu\nehrw20mcPJra9NqNz5Fqg3La58+g2X+aHyxHq5pFQ9A06LvvK2ZyY89AgSMP\nzyTv\r\n=blCM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f72c3de8cd72a4239dd160604c47c29fd527ffd0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.58_1587571385801_0.5943803048861993","host":"s3://npm-registry-packages"}},"2.1.2-unstable.59":{"name":"aws-amplify-vue","version":"2.1.2-unstable.59","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.59","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1bc695a2e69133a88fcd4057ca583cd4bcb87eeb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.59.tgz","fileCount":47,"integrity":"sha512-ptPIXD037OPuwQzTk6SSq+r2skirEmAEftMwPXYpKikj/nkQSdFdZfAQqDrZEFx8e17HM0jA4s2i20g2HiqbyA==","signatures":[{"sig":"MEYCIQChdNgkC9eHOBtRrx8k1irpBby7MXvwtbDy7mSjtJWSBgIhALFPORUb5R7SSHj8HN0ZB2gnRNux9NNMyunhnlmmEFEg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoLthCRA9TVsSAnZWagAAITUP/Anujasr7rItdsFJFTCU\nKkwDZpDjeOVX+9tIzMRThhRYYBH47DmIGQDXaSOTRhsP07rcAeCioKuzVRvU\naIysYHockRFPxXsTJdNpS2xBXSMajxpiCvpkfduU6OY/1YRDsf1wJb9oumx/\n7ALN9FQs78sjCbPlRXxlXaPf9EF3aAs8HEC94ISpUOukkb6k0ahFl9NneKuL\n0PdVq674jAAySsxLrjwsPfTgKLUxS5s6aXCkjH60Syei3uKCk5vcRiOcm5wE\nD1KSmM6Ki0O5e4AyHqxWanQF7jfteHrflEKfdw/5Mmw/HN0EySCiDtiRKypK\n2ZMbfIo1PH5l9Sc9AiH/RSfc8WHGPbArJCol3ujrDwpIh1BJ1o351NG3dbYX\nn/yYSFHuYcP4hnQ4Ve3RVh2l3ZfsxMCwGz8TH6OyzskqPqDojobC8+2sZRU3\neCtAO2rKOIncviN0Ec+Yre0wUWNqfFnDIt1SOMNKk3W+uKXAh+QndWmX0+LJ\nb/WekkLFbe+IqJSwA2nxM7pOnpeAWZNctuQ15hckM0s6ZtaqVleppL6+048E\nNHb1ec8Z62k/978u5f36faF3xoAML6yOEDwpieUscuwD5XMYP1Az6Lp4VZX1\nNr6mejiM+pFYptohrbTsg6zP1hP/QSLxbq1qcSinJvzm6ZgmqxTj5+BtFgSA\ntwJV\r\n=0ThH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"64888d8509e30f1f23e4581c28f3aece4d09c6cf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.59_1587592033065_0.47875088486348094","host":"s3://npm-registry-packages"}},"2.1.2-unstable.60":{"name":"aws-amplify-vue","version":"2.1.2-unstable.60","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.60","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"fd21c2c41aa4c5a6c313526f54d1d2d7f5aaff1a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.60.tgz","fileCount":47,"integrity":"sha512-YBel1YXABkXt/zfYOAJn1BImMj2MrESj57g5+sLL734NxJda5Dx2MX8UcE30fB2HNsZL2LEMnR/VILOawBIjDQ==","signatures":[{"sig":"MEQCIEReDIIeVw286TB6sDVc+cBM5P21MgHFZJKCsOIdkNkwAiBSeRkYlQ4KYMpXyzjMszl3KjspQSB0SjDqngLoy7OsFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoM95CRA9TVsSAnZWagAAMBQP/R3DeTiybt42hCvtpJPt\nKnC+E1gu3ReGTqKjpsn4LbtQDhu4cGC+MCjW1npHUrhNGjaS6Aqxuh0db4LE\nHcEUmMfLpHjKcZhucXx5Rm7DLfs37je0N+iyaFVmwATVFAoLyV3v+qPMnOKN\nfchVAatiMELbe+3CFZJs6hNXc312sHzZwm0jk8KOc6o/F1cqmpOpYOKMpGE4\nK5pu3UrlwJBziEUunkdCWxq9SfkoYWRv2z/hQjrl+IF9MDEGC/amX+96Q6Nn\nRQr9RLGAu5FUkTpmpo90wlPtPXjuJz2uIdkMNAQoCMx966oOXPM6dPj4I9Ps\nqAgbjguJed635RvaRRbqB0nGwLhiAmKI5yas7yUtZpDQocXqIeXyHEwyKAhW\nvHDnGd0qlkW4vGbRmNVQyG/bO/Uyb5DGmc0UPvQIdzFRBgF9q4kNnqGlyt92\ni3jEGYkdaoUxrOasjmmmMWddwWQZeVIaGrnx9Q61l7i8upcEE0bzXEitdu4n\nCP+YFS0ZraeEgvG4M3UPcGSjYbwAT9WLzje/EHOH1EjYXLT+tniSS3Wh5x3F\nbpXtyDRYbZqROEugKEgZt6taOTA7D+3x0sBrcsLsghp4M2X3RLemtmn2KXap\nfX40StjY1MKtKc+NvZHv8zwnN/AAhVlsaI6cZjPG4k9SzhKcxpeKt/Mekb8O\nOyXx\r\n=Eud/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ed1553392923eb29fef5fd43564c882692772d2d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.60_1587597176847_0.03296103352901869","host":"s3://npm-registry-packages"}},"2.1.2-unstable.61":{"name":"aws-amplify-vue","version":"2.1.2-unstable.61","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.61","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"babc8fdb8e897e3e0bebb728c4c102648c6bbe15","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.61.tgz","fileCount":47,"integrity":"sha512-JrtkiAQSFEZQev0WJ6IBT+kCn83rsywGdzjN/1stquLdujvRuZVMlKAC0LU2Q74COtyJBJ/YJEI3tPfs5COazg==","signatures":[{"sig":"MEUCIQC947IYAwJwTP6o3Y1dNsThlF1FEkRAsQsy0b+GUO4G+wIgHUtUTcNcTG46RqveyptuCpHL5BGvWTDU9DikEBqrEu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOm4CRA9TVsSAnZWagAAGZMP/0oOuMwrqA35iwQH0p3p\nlAGLsiJuVXcXsqv4ZNpz/7U2VzlzHko9eotoI1htQoHYf1XaZ7FLAdzbupeb\nDxW3SF+YzsArsX3n1+gSZ8gln+BBZ5CS1fxfhNTQUuoGTOe3/DOZ/VFd/uSp\nVxAo29HhHc175JH8fkbBJ9zUlWFt4Bczt7nQ45CZ+9kqW4GhuWU7NSt/VzBT\nBVnDGt2D+1IgJDTH5iQQk82toAz6R68rVE7/iPkxeDx9RcQwN0mz8KDRjf1X\nUsrvYl8AltiLr03Gc4mPv2u8wS+9/FQy7fXhsNXQo0i9aOhgYQ6LVFAaVodo\ntPokAfJ3/LpZ3LlnrYQ0SRC0jNtayeG15dnRQGmQIqfM43LYS0aOrpMj3Qqc\n/Ups0TrKyh04E8NzQbwFKkXL8sbEjT1s0HsTsIIVw9x4JxqMFu2c6itikL3M\nn6QshwgBzrz8cHCNkg5Gdm7H52xv41VPOXVqeu95VSgHDHs8GsZrKmCKjNF5\natY4O54U9gJoTanqjbGRJcZ0abZyf35nNmObGcGZd9zoBYTnX15o/3DfIPT/\nWqG/Q1nopqh39rl1r6AwAkhar0kQEI4fUydtnZDu5JG/82hsEeFoEYYHwC9/\np2RXbO0NJw2IC7mXjVHu3T2pZ7qbuGkR06/hk5z6W4lY6hozgr+5EP+hH4Rf\nDcIh\r\n=GDZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"265aa31e212ad37e17073d0dafdb785eb005ab7f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.61_1587603895687_0.47240077046798024","host":"s3://npm-registry-packages"}},"2.1.2-unstable.62":{"name":"aws-amplify-vue","version":"2.1.2-unstable.62","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.62","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"eb9c461b3e7cd29244914f68c8d19532b01332ed","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.62.tgz","fileCount":47,"integrity":"sha512-ER1PA4HTO4RHNVCb1U6onsEOqdDLECbtbxc5fqrO3EbgZZsUkJ6x8+qgZLwMHhamJH6R56gJdNVmc/kmzkextQ==","signatures":[{"sig":"MEUCIQDQWKoE1wj7w9tdC5Nd7Tsh5upyJl0EZPuHAozymXjdIgIgbWdFN2E7ZOhacp+iK6ygYHf96LpsYw6bFiB3tLo16sE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoeXMCRA9TVsSAnZWagAAUPYQAJxsIhPBq+MU3/2TSvLd\nAD4JdqiukIfKzIRA/pb7SJzsPd6SFof7LMjc9rQ0wZ0A94G99MQVwPACPIlw\n4vkphN7AyH+ChJAr2SzVy8i5+wH65u2m17oiXNb/oM6jlAhv+D7IUnceLWGn\ndM2+UYBT4D+WGwMqLzdQsUDLeIjRu7o8rTylFjzXM1YIxe2f6Lalms7wOA5R\nUsYr9Bu9TtCcONEPgB9FjwSNgngCi4ooCUrctD7uEvgLHftolMdoHOIZCacv\nhFlWGp95H0Aql31b9/aXvVck7eu/0OGb89RFk1/q7St4kGeRnNwd4UgabN48\nZo4s1jwulPBMatcZbPQaMDbBVY41rBTsepIQqP21QLm4hGfpFoBZT6veeNEr\nArmwSDp1mqj6mamS+/9M5BLm5dSUO6KqCMvywEXZliLSzqSL5+Y9Ajx8j5d7\nkpB+NIg/VO2NOebiLmE37byzxrXXKDmhU8SLIGa9PNxVEAoWLB04k1TXkidb\nyKN5yHSikxNUsSvlZzU82hPunoDFwMGodMwSqRU6APcTs4BzjJNolTlsTzuu\nA+PPpXyQNnuorShPr15y5cUF6TqsdfXJyv7CoKlYRFt+vHJ/2eEMLXwmn29Q\nqgRWneSQ8/+namuQxt/EXgYIrZ6QdI3YNOetRn5PXoMESr59+o488qVQzMaz\nF/xa\r\n=MoAC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8943fefc42c693151bb076d1487cad17211b6bfe","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.62_1587668427518_0.33688837840663943","host":"s3://npm-registry-packages"}},"2.1.2-unstable.63":{"name":"aws-amplify-vue","version":"2.1.2-unstable.63","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.63","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e24c56bc0bb8223351897a8e2301bd4101c4cee8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.63.tgz","fileCount":47,"integrity":"sha512-7B0uKTZkjjVjJoSTu0Y3+7l8F0k/M+EdZyzkx6EcO5TMAHJ6XrrXz2d7y3hTu1HbEQNY1qSbvltMdWuyCaO9wg==","signatures":[{"sig":"MEQCIDA4suV247ppfrGUvJk+rJ/3rG3BJP3l+R3wE/iGjUDOAiBapjKK1BN3azC4FEcRNncFEAgJZyjS2/C/wr5A4qQ8sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoeuuCRA9TVsSAnZWagAA/wMP/36aylevK1CYMXxXcinP\nvERBIrQIVEzzwa6iTPy0cnPnrhEEaBVbbWHJCPdC8JvE/V736t6PnB60M9Zd\nI8LZgrsv8TK+dgihMcUkG1UIip7mgtqKKrLbqmR+SWmMS1C2jpjA2HPRctxs\n5wbdpmWT/Puuk9rbTLiuLjLsTvjTOJSuH0wzOaaO445ncZq9cVcRh65bNuu5\nkbVvdl9vQSausPHBcYrlbRIWk8p0Pf49Q+mK3RSsDv7Fhpy4fYQmYproqlZN\n5qWlY+6AgHgNBBA6NwjDwVFQ4QEh8yYOp6fAEYVs3VXc1Y24xlbd7eZhw0n6\n8tpcR2nBe9UKfXF2T56asXpju8AGM8q6udAwzT2AgJD+AKaWtXlzRj4kngBu\n6QAbYB2cLhQ8TWgNkykyKnn7En5kyjDxuLHs3JQ9uBvOTCgDviPRAYcwN/qk\niN9B+4UqQq3NpArKJG5b2zL0XJqSX55oAtyyDAzMdVWtapSLKHBh/Ob2ozAR\nwi3MwNfURTFUsjtNhRXJe2/FXFucuTaNlEn+3dMvkGR9sf7QOMz6LY6tCR3D\njsIjPh+vb+2ICenfMlfr+mjfqQp7Xhks4MF4yGv1OMl1JpvvjUOKxNT4ryFo\n4JlYVE4+wJjg/BlgDY9KqIQnUtBUCwiCRN8emFfeii/HD8B7L2ujiNot7pR8\nCztt\r\n=19QF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4f3ba811a422159d7d8db821963c3381cfaac571","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.63_1587669933857_0.641069770322851","host":"s3://npm-registry-packages"}},"2.1.2-unstable.64":{"name":"aws-amplify-vue","version":"2.1.2-unstable.64","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.64","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8e7a7c9c0595cc7c213b418d242d5612ee69f8dd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.64.tgz","fileCount":47,"integrity":"sha512-hjqDzXc8DAr/F12wXz9KzmLatIvZF4KsHriJLfrEVUDLj54yq37Xz0Ax63/C1qUDUl9Ft2zvQ/O+xRueJmmZRw==","signatures":[{"sig":"MEUCIBr3XZUlksjNaw53UlLZzj6jN3ptUdrsf1ZHSP4qL758AiEA+xqFQ20QPrLSlVj1fg8sTAGhfNwqJQBewGlI/yv/rTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeofCQCRA9TVsSAnZWagAAFQIP/jsZ+CRFj7faDXKMdnVA\nsC5gh2bq7DGH3AkKpe0Bj5U/XaaNtI/e7YepSgPMlHQSFyxn4K+XEhxn67Tw\nDkOZAwexxmajUXZL0SRZg7DHj3lVwsoT7CTyV9xo3GJK6jhAcp5X2AymMXff\n6QxzST0dMJbu8mdIdyv8mjftLylkdk2rc41r+wT6Gcn/n4xCg7gTLMmf17ir\nUt1m0z6I7ERaUkXIQJDjZc8Iwucel9S3MmTDBy9PVyb25oXSXIx0ATnn6wcU\nNgAj+tBFr3icPgeqoWTXk+xVOiBteFc/xVoc4DXZtCraHVgS/8LChsdGksrL\n8fB4mjOZ+NEiPjMuGcQKqghKDRiAC0glyW+tGJ0OEJa12OIxn7NXdmLZkLTJ\nhwcnkpKUrd1MfMec56jZCXviaLG8wnZsP5EE2263QrnkulLBDIpterivYRXi\nMIBSTDE9+vlSSDGpqTfeDsUyTYFbjDg3AnAwwlSNJRW5grd/tlgVQ1srcSvp\n9zG1LAj8o6xAZDvTXcNGQAvAauDdaz4y1UDzTq/ce6OhDfZpgMvW6d+m8ZI6\ntayhO4adED6NTfEw4QUYjpjVncjfWNKT06UbQqwNhkiiMmbxvGuMx23khZS/\nYBHpWPvJJVO/3vJG5apIvANY/6hntu0diGHBIioy2kjF0R3DB9e2kBUhKV3L\nn2eb\r\n=VjSG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"38c1be59b59e8742751c0b334eb6861c0401deb3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.64_1587671183743_0.5697971478253183","host":"s3://npm-registry-packages"}},"2.1.2-unstable.65":{"name":"aws-amplify-vue","version":"2.1.2-unstable.65","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.65","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b11a3bf7646dcc91f02168d5b6d7920e20c3eec4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.65.tgz","fileCount":47,"integrity":"sha512-aIrNCWYVvv/ZGuSZDIpmkwj5rZGzuczoNdLB3UZF6C7z8colKsTVvtSY8eaC/PBJdEfTuv+QeepwHd/M8iENBQ==","signatures":[{"sig":"MEUCIAulRDHf7QZxQely0H1h897zLCWl2m16/VpZgL2jqv+TAiEAtTxI8h1eCDlpmUc22OcCuJMIXWxrfMSaswSWFdmgHJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeofchCRA9TVsSAnZWagAAFf4P/2/G9HDCPDB5kInYbkhU\nSf+82GN+5XKs7k4thmWrvq1axVgFJC1aBIshuju4diFgh+JltNbi88ZS9XWW\nvoFVK+bzGF0eL0HGG/urzai0eqH7qhZGgL7cuDCuFT55sUbO0yo0zk9lVrNB\nAV8kuKgrI+/TJd5MuWZgHaZsocZHRPiSFPGeHWBysAhJCIdRdXWqC/TqhsXc\ntjDFPMDd7+t7lpFRxwDWSLGdUHIlVAkHiCEOQ8GQWz0Kx064av82gkkT3c/y\nSBVNBHZKi5TgGNxJjMQOYNuZ6s7Yqzhy9SNngPnLbQOKEDtmDKgkmsOPw2ch\ng8zckNMPaYqSuuorTbZcfP/Nr3Dcq4q8TEtD+mEj/zkcHEFiU+ktzzY7vb/1\nXtu0EnU1A0b5PriG/3/KGdUvNUHNcD5ModPW5sD2Tw0Esjyc2CncUCO5NOz6\nPPItLhqXSwljUz5iFSR5MsnQCQtfyfqugMMNvGGLDaD5WE+/JSx6zcz+MalE\neZHu2yEHHtedN7/yU1NG7qA2NBvOm35NXMP3BEA3IteFoQYVjZ2SO/FfGtzm\nCw1ABnG6dqVsKYMcgc1JmGxUhwcWMVaAmtjFIg7YDS2/KtAOuqoLCYhGHTU9\ntykDUKfrtmqBguQ2zZhSEjVsAge035F+8F86A66KLZUfIUlztR6I2Yhvb8ZV\nNCx2\r\n=b7t3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ee185e15e0e77983d4697c56b9569ca4bd560a6a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.65_1587672864483_0.5268197144095732","host":"s3://npm-registry-packages"}},"2.1.2-unstable.66":{"name":"aws-amplify-vue","version":"2.1.2-unstable.66","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.66","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"52a11824ee7a919fb9e2c0b913156421dcc7adcd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.66.tgz","fileCount":47,"integrity":"sha512-afBcKho92DqCbZ71Ln9HPqZU3OiulMfDpTh/O/30wxFQpgoCSmwxoxkpnA8zgUWo9GK1NUPV7xKaL3LYb7Rl4A==","signatures":[{"sig":"MEYCIQD+40SYCm5LAwvVzfAJoIB3YKlk/2av4kk8hhBzZIAV5AIhAK1eNxZNnLLmUSSb5DQ8wiMOjqVEpcbr4P7kT0LQQycZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoh+gCRA9TVsSAnZWagAAanwQAJxxq5EN6rWUzHTU362v\nB7xOkLboPeFbSRj2Z3wam+lGiCo/dv+zmunn10Drwgv69RNF4uQXCdJjwWZv\nX5PM4s/fYgXJ0zu63BGl5Qb3UllvDOM1EoKAxUEoVSSpiYOsvZlHY4uiN9mK\nvLMxUTxbLkpgkvRW1lPydblBbin23ZabIS2qcC0rigw+xBPFpTNqBVHmehPI\nlLM8UAx90qa466gRs42XUFkQQfKyyn8igWNQYI8YsGYfBwjnosC/nZw2cEus\nkuROPVD+V5T2WliI8yWls/HwMlsGxghgov1IDJkH77CD2gwUfbryurdUUlHd\n9Vy4Y+VRvvB+lTWNkhydwTtM3Z7mV+pS8/O9VPyU0/b5aIiUWNBt3FLJkWDW\ntdbwD9NG336EiN+DEHYKw0XIIxno0YhDP9IIWDFDuFezrSg3PmTqkv4zRZUy\nO+z/QINEyk2MGwGe70jw7+JMteZdTE76EGwidGkpAHqFfYH+xsT071MsvddY\ndCtfTwcXOenLAph6jBszCDkia0abeqoaRCIrRYTMtfY7sLdQJbQ8alV8wlg/\nMAAGyxDYsP3vIFIeAgBZpwl604U3OBI2OX7GdEL0b/z5/HKg34RrNQ8xAjrN\nv7ePNZhZoOnymgdawZi7RUodmu2RimHJnTag/3GPliEXSHrHuiLFluoWTJxK\n+F1q\r\n=rVlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"388f04efe6441d55312bb8c70d42116d9f829431","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.66_1587683231818_0.30961785879300674","host":"s3://npm-registry-packages"}},"2.1.2-unstable.67":{"name":"aws-amplify-vue","version":"2.1.2-unstable.67","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.67","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d769495a45077b2ffc43719f9e53dfe24888cd0d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.67.tgz","fileCount":47,"integrity":"sha512-bMqnuFGBTGZ9RawOYUt/Fpj4zMY2V+gS560wb2GFPAXHBJF2MxtjYO9Mw9HBz73pXwWWJULGO45QqvMtGRq05w==","signatures":[{"sig":"MEUCIQD2WFoq4SMOEFtaDm831ftWCSe5Vcot5+rXlkEnvHBOnQIgbeRPMZuSDz5cz7ccgNNQMVl9hqpeLCJmtUrngOHVraU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiP5CRA9TVsSAnZWagAAZ94P/jfRT8p3eAa+jw+w0qmc\nERwE1a+Y8VFvYBC2jEKBo8fvfTwELUzFaJkSBy7oT38+unrMcSjCog2k1LNb\nHc6jiLp6+cJ+uqT3l/PsC5R/NbdCFeisLMFGcwuBwZiCOXiJJYI2/tJNFHsU\nci7i3I83CrULxfJ9yl7Cd1koUHpe8ndmYK1340kAiEl7hes9ESma9NSJiWXg\n8t3ckyOV2xLxFvT8y1SlRBOQK4AmcaNeRVcOmx6LHloKRX7Bs/NLI9nGeNke\nNICPOA/F3JGKm58jeBjZTZt3R6bLgfhiSz2tmSFEQmegnDFW0Ir5k90kiISF\nZn3WQ0tLCUQI9r8+4PXf+cXwUzl7984wn6xS+OFnKTPgEo1olP8IGHBt75ri\nqQExw5GHScb9/YdCnz+PcTIm1+lzCW8IdlQbLM974IWUH7Ev1JuNhmXrAI70\ncAPoRUNcTijznjz1tlJMoYtmK4QsSrRvp3nig16iDG1B809Lb7EDyfu7bW3p\nJEEd+bm5TrD+YOtTPWlFluiTeawyA7VRPdywmQt1zHXEb9S+pDCbs1wUnOnE\nQyFTr4xRqUX+4pkRoFsAIr0asI7ellP9fS/hPLMVXh0WxMNmI+5jv0iFqC5f\nLyjKG1nJBFp3I0+93vE8kU5bQA0oTzBA+z96Lml351Tw4jilYyDkHyy1YP6p\nGENJ\r\n=DiXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5177a07c2513b4f834a5912ac45bc5b724b55ccd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.67_1587684345012_0.11489364750275999","host":"s3://npm-registry-packages"}},"2.1.2-unstable.69":{"name":"aws-amplify-vue","version":"2.1.2-unstable.69","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.69","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e7b98d69978cbce2b5371ac48dfc9f8a366e9536","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.69.tgz","fileCount":47,"integrity":"sha512-0mJasXb//H5BXmyXqdr/x45ussSYhh1jFciS4NQoNVyUQoO1ABQuK2CtgTddt3DeNMy+TVOHNLK88zdJyS3eAw==","signatures":[{"sig":"MEUCIBSFMcgHHImESL4Hu2Pj7BVZiyleX9Nj1QKUJoqyJVQJAiEAl2e8XMtTmgXQm44/jTBMjWhrmiOpissjMWJGd8+rNo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoy4vCRA9TVsSAnZWagAA2qQP/1XY5iG05BwjK/doW2oK\nSKoZFRWfXpX/j33odWcIQWM68SyoBlpCmgSBlj/LT8pznPZz56f8rOWB3m4w\nVaQkgl6hcMu60Gx8JmvsUcX3ntpIdVSlNyTHuf7IetyCmPRSSbFQZwj3Lc/n\n6tnCz+/e6VBt6uQMoLZqIBU1/GXUIAxCeLVuKjNilXL5gtE1w8saoDPkXX7K\ndUuTPPYBpqWRqe84QPoqHqmq26m0Tf7+aF3VLrQuGi31qs4xMWQ6x87pDtz2\nwxQhKrHfkPB1DqzhQvpZjvoWczjyYsNP9mUja1bMMkoXW8jHN/4SaoPMjWAr\nrb3Nu1Y6i2sopaHaBfXl9M0d70uVpz3fKY/N6b+OmLvMfeN8o3lUuK8+EyJ5\nhXLPB+UFIIFr50BIItfdIpZko3SOaZcz3Dz1hPA2r9xFVksrvswIwSNv1rvT\n+gY0gm5TdIviZhVVM8DWA5hf+u4I10qmkUPWFMbk22fB6fJsZaHXbguAX89L\nC02elnltIC9MhO2v0Izwt5vBmSqanzV7lbG1ImLnqf6IwRyI6bQReR30Pjym\nd5EXOo13PmOv9tA5NeZhwbb10WvE+zT5si7QrXqJ1C9HWi7TrxE/5e4eROXq\nUxtEq8Db46DHDQkaL7igGesco7B0bSdEwpZX3ReFifPpmHUWFqmKMifDccIi\nuuWq\r\n=SHyE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d6fcb6ad5c64ec302841275e92be9d9144795c87","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.69_1587752494441_0.663691027139758","host":"s3://npm-registry-packages"}},"2.1.2-unstable.70":{"name":"aws-amplify-vue","version":"2.1.2-unstable.70","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.70","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"843d09cbaf1b6c7b2ba7bcee8ea6731dcba8c9cc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.70.tgz","fileCount":47,"integrity":"sha512-GOVhh6/HSS1/1K389brwUzt9C4BKfWY48Xf8JwB7tLUt9k7mfgSBZIM7LLP8vcbiqKraHVmJSjLHEgxT5mMZfw==","signatures":[{"sig":"MEUCIQDI5y2vItdp+N8M0M9UlLx0CC8UzQd7+YDdEzxdowsvnAIgYxYhNEWBcn2NFACabwhF9FPR9uuPW/h/mX15bKnVPf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeozK4CRA9TVsSAnZWagAA9+EP/0jIYBKQ8hhOEjzFQi6S\n8oNq18FD//iBh8e6Pgvbq0/zsTF+PykGLSS+OnHbSSPH0hhgpyx5F0NtYmnB\nlq1mpMJA0xX4gw9YX0G8keXX5V+lmUJdT09EEKXQJV13fFaultvhLr1LwzUs\nJnt4dwZG9bWVpn08rwfq1H15I62/i4toRIsbeGJo8lwfnX/QjDBaSTs8//TZ\njc/i1fsOct9hqZp1lwBXGhtQnjnYmtCbL22EVIy9kWLr8PI6Ca9pgeIDr1ti\n480sj/BnzYx9OrCGH+/PBJtGkZnVUwRMzGPC/fAvslwW/3y/lZy2IDStagN7\nAupZoDudSj0JIi677FV6trc2GPEh1eY8nUiEx0zwx+YAI5S0k8MlPJJZrbxY\n+b6G0TsHXT09ESCL8nDyEwTbRkNXmkc75dQnmqf01KRl8/HYyEYQ2nlvvTpv\nmoZ8cBArWyUi8Pw4syszTxMp6BwSJ8aKvYaFBBldGKz1wzj4EVVyinxs7yOZ\n5OAeVCWjX9iXoLed35brEQkiWnSup0KS2g+n4vMeeUq1qbxSEds76TF/+2ar\n3cYGXNMExrX1E/LaoL9YUFAIP7O7xljGo2wxk/gGn/L+OvfIJtOI4Xz32L6j\nvDZpUAuicea7MeveS/kElDwWRoO/xpKxJ36eycGCYpIArEy4EScgeD7fLbuM\nzJWw\r\n=4lrH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"578cb73d5347457408ec0aef23d75a1bd0cc3c07","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.70_1587753655394_0.3736114886887181","host":"s3://npm-registry-packages"}},"2.1.2-unstable.73":{"name":"aws-amplify-vue","version":"2.1.2-unstable.73","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.73","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ea44a9554b823da2d75687470f79565ad3de6760","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.73.tgz","fileCount":47,"integrity":"sha512-dnKE5k45j3k3ml3J+TGQG+c8INSkFgFoQSdLUooNXT14thWPy495Yb6EaMnZCMsLwPMYtd8ACy+5YwWBnZVUfg==","signatures":[{"sig":"MEUCIQCiJzQtZeyYs8CPe0RyfF/qwBYRUEY2/e73z+bDPbgipgIgXoDAkIf+4QX8hVRLuTs68mLpNXhCaiyIKUOtGwDQNZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo2UbCRA9TVsSAnZWagAAaA4P/iDBRM36/l2ysrtUgsB+\nyNVYFOmTcDYGIhfXisKr6JhlIPF/a/mFaiA3XwKYnIxTTLP336MZ8s+zowRe\nUKmo/4WEbXeQLBp2yyY0VEDQvhi51xiGASc7KsWpdY2C4ISsVEGdfcoYgBK4\nDC3MNnjai7+1Nb3suRxK4ErR5v7KcbvnR7goEve494zsyopwW1OzT4nDo7MG\n6n5t4yoZ+AqiIj/j5HiddYJftw9bj57GzpXtzh89nNOhQC4/AU51RrqMeC4G\nN3il/CciU2KmLknu/PyZrlvEQwQHpkjA64gaT8i97HZTYPHlCFwOCjA+mwMm\n5pdTVWzOsguTmal5MQNs05MH5TAniCBwgdQqKCqEEMwypk588bOmU6UBoesU\nDNeHjJ2WP10gj919eoLiYb9ZX2rfU8zcdkm3ICO3ENQYaPIUAXDa1U0vCMn0\nwT7MYUGvxuyFXTQj1rZUc4EoPceautM2cay8VypwBVSytNePX13fwKxivF69\nr7wfCYLnsVrfUhBazwEnp4MKVVtG0kIJWnMRwG/8vkn8O7AReflxV8QB+T7x\noAet7I2wHR7qBTfhw//VfDmAunWXvFgLUBRtGYBPrAQUAtDh19At65EV1jeJ\nXLL6KQfwWoQfHABg2Hx8fPDY/2Ef3FK2/r1nomH36KSU383pBaoY03JDAjba\nnbDE\r\n=Te2z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"65fa23e3bb8643b6f3384f5e0fff4a5b500e8ac8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.73_1587766554743_0.4750888427389106","host":"s3://npm-registry-packages"}},"2.1.2-unstable.74":{"name":"aws-amplify-vue","version":"2.1.2-unstable.74","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.74","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"fac4e775b034b922e92abc18a1c35d67bc60b6ee","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.74.tgz","fileCount":47,"integrity":"sha512-qDCdp8b32pAii6XZpuH6hI7tscK2k8Z/qZPiNJdFZXJQfP8zzQdFJ2QIhdF9CpREqb58PkMKMvuxfb6KlKUFdg==","signatures":[{"sig":"MEYCIQCNEhD9BWo+VPFSRZN63kfJglb7EbhyIeti+DOcTYOJ+wIhALoUP1lM1q5zU/VndYtRVYn1mtW0FyUnTX2E2SK0hZ/M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo31RCRA9TVsSAnZWagAAvWIP/3LDJRmo4KPRNTthwB8k\n1vfkT8WPtFaKWbl+vXoa+iab9ehUrHWewmuuGXGYZDibz3vXgdiDm+qA8YqQ\nc/lR2f6t8RnasfIDIYdeKr4ryky3c7CKdXBtzyBEhQqDOptsOyd3OQz+XLyH\ng7J2m7vf9dVCT/aO9xgDoD30VW81Blti8vDXYyiLFdF7jCRHeAQ4FuKV6NnS\n0TalIO5MaRfaGhsYAxWGV+RqTTh+lYjQ+Whor4it5IGSxN4xoYtffeDxqNVf\nD3+dgR77meMgjoSGNX28kJhZkGNfrPTjmzT7Fc1Lm72Ey7ZyAtKgnN+1hEdY\nRpgdw/WRW074SkKXisJPJFJng+E+vm7J1eCOLtFTt++5AQ0dqoC0is2iicrJ\nm3SXsSRPN8qT619u9WCAdUcMQrfT1ps3pckE60iO/RL/jktu70ETXHGOgrvD\nClnB34ctiJfcE3qfUYrIsW18iTn1mOqcSVy78CtVHzhc7DTdXw1zM6z18UEw\nW6meWKt5WsJTo0LoKYnES3Rzocd64zNpo/NpWs3Bl6aD6+MMj6uBFnxZv9xQ\nh3ld304N5O27YOejZ9Fd/z1tUy3CjdVIF6DPRV3zraitT+BgpjqlI/gtWoES\nJBUwKPGZkFnD9TlK54EyAYfwW2RToNIWWfXJq2ogPaU77KzzJfD6GvuMsruQ\nz9rG\r\n=tUpu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7bfcb2520e90ce3589e37a57315ab042fa847878","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.74_1587772752927_0.8123255516190111","host":"s3://npm-registry-packages"}},"2.1.2-unstable.75":{"name":"aws-amplify-vue","version":"2.1.2-unstable.75","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.75","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d0cff0c2daf91a1ceb2c3ed22d02162854412c9e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.75.tgz","fileCount":47,"integrity":"sha512-jlbDpShcrGe6TBfKzs+3HdgXffd0B9C/A+g0Kwcm04RpXgi8nomXMl8kYKVgdS/F6LfPNmiaqvtJ1RhK54VW5A==","signatures":[{"sig":"MEUCICaESqYKfkuROezOZK1eDtamJXjXPpxGwLUPXoK01g9DAiEA/zsw4AnvpPEHI4P688UTfLSDv5fvoOEtEs3AuzJOBYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4YNCRA9TVsSAnZWagAALyUP/3tIAeudQA4zhO4aMzWD\nCYDZYzJ9HD34MmjZBg2/yPtJjD7kZ46+GdDwlJGq3WvTKMg6xIrcCp+vdBSk\nKiRiyaEPKRJbuGsWntSVuBlOmWyamaZYCv7O/F3WjoInkS7GI1y/lZhqubqn\nhMTENY4YCinqjKLw4hY0qyaera0EMT1oc2W5P9CnPpBxegsQ+xE3RS3PxLCu\n0gYqkciOZRHyFiXCa5gJgBTdCcTjfdQS9IYCkkhZwCJxllFcg8YbWMViwQoZ\nA5oXvOLU2FSjil9kNOSM8pHTqXnZ4o1SdV3n1C7tXtG6QhEJYvnmtiUUkkcM\ntsEuaOZnEp4W6cwmjsgsdCy9uS7HLaj2sh8fUEojygwamZOo/Wq5gWzCe6Ut\nZHYtVxKQcx9TdhY+mDdv1Fsabtgnh6GclpjCIPGjIrYCPftUafVUP3MayVxU\nVmiCo64gnbC/jYtNhX211Ho97BDxmhQwzQsvMRpMv3R7beYNZxO6LaK+ylc3\n75MGa0qkr3KGsZFQn7Qx6heOIQLRsa+56O2UH3iNjZa8fdNjCBnckk6vomEC\npXwr/HgVgkrPtXwFSBOHDJdnIkeoE0eLI+3G2y4VFiS4hS7GAD4w3fwlExo8\nYYj6e1eS8AVbMqXV6gAKtGu5RK97EVTKclOm/iMuI1Zww2ZNvO6avCHiUW4j\nAeEe\r\n=xrvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5f55615857cddf610bf454ead390476471dc863c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.75_1587774989371_0.44662950798353274","host":"s3://npm-registry-packages"}},"2.1.2-unstable.77":{"name":"aws-amplify-vue","version":"2.1.2-unstable.77","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.77","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0af3315aaa22b1a295caaae69737e08040111714","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.77.tgz","fileCount":47,"integrity":"sha512-NHAhEhwqBEnd057AUW+/CE5kxJAScQBUc+SwDPlpWkTv4cI5BS1S1Qr88gi/zxSQ7kW/6kzgAC2pHUuJNFL8pQ==","signatures":[{"sig":"MEYCIQDZi+UIGRXPshlQHy3ofHimZcDDeRUEDfCnCGbfN0BOlwIhAOBarPm11tfrlHgdkTQ2/Usv8qzwQGCHsGFPnUCRWSvn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepyZMCRA9TVsSAnZWagAAI10P/3QB1/PXmp9TMTJY09cW\nLeStSrIZ+1Of8qFTonu/S0O46HTzR84Ra+8rBsKKQzpVada6BfTLjaXumyoD\nACKwpSXE7yUif3BIbe2btR3o4220Vm9tp3ETMR5EOCYZQ3EXexuRXXoYnTnt\nY61YGDih66LbDjNX8OTnzhIyjjIXlkqSCqLOeisuNI3ZmzSm7mUUeF3sgz5A\nGRKAJx27bqUalr1aFXz+nA2U3pO1MehlIkV3BLVsfGCEqzAU2MExaU7kidXj\npGNUH+I/+xJTpcsRi/FYYDasHTsnDARWrt+sHJpyMkF41HngbyUc2ugUBtIp\nAgVVwIroh5rGmmsZizcUfaD6+wbHx6nk9VpEiNlY/+IZqr1XlcNxs60uMvGY\nf4nDAc0NEUBG3hrAPDmNft48Mt1NcFBQjoNvLZ97u1vEUlPagGRp1tBzstN2\ngLFFPlMtLJHprVOdaK8iKpT4rOqkT6iDMsl7RURD2ZP6XfqSTzS9GXGTChGA\nLjw/HZjQMYbXcmnRneDTOryQCf5w4VJnYnoUy3iNxL9PfWr9djjAYV3GSpYQ\nZj+4cz/Gvq5x5TWw2HPcj2qKfHEpDut7fBBR+OkB5hLAKvRtTi9FdJ0D1GFC\ncacFphwJVkFaNcX4pL/Syr2oGDwCgU2/wSPTC63QQas/sz30rrJ9rO2etaT7\n5+7C\r\n=3Gts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f2dcabb78110c0bab84780d045d046fabf97b6f4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.77_1588012620334_0.5542955105501515","host":"s3://npm-registry-packages"}},"2.1.2-unstable.79":{"name":"aws-amplify-vue","version":"2.1.2-unstable.79","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.79","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"267a983dcbb958e9b3b65651fdd33bc20064e65e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.79.tgz","fileCount":47,"integrity":"sha512-DaEPyvd/gqvOSjlKIZllqVIp2x2cnpiC1bkkrPOhEm0E+vFXYHHTfELLiQhG4w69KzpRd2c15ZFmgKvo5SICUg==","signatures":[{"sig":"MEYCIQCH+CsbdQUj5UecMzjQfh7fMeGXLDNw3QvTGF5GqvqD0wIhANPnXBaoieEg6eWLyfAXbkE9ULj/vfpFDmLgzBGXAzzD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep0ngCRA9TVsSAnZWagAAvfEP/RSYz7io/gYiJ6tzS0ff\n7BZlQ1jmWQATJy9G5w6q+1W4BzukhOMV/J5xePkYIs9FQQFOidGLcMtGI3OM\nJZ3dv3G3ZJJhYpR/Gtl4oOAxezK/4ZlImbqAFn9uR2LAF4RzAxrA4K+U+BRM\nUXR+0tU9RU4haOVq6yYtQJ14McMF68jHfMLVQzctLF/qrq8lABxV0h3okFQx\nbbvC+BFF92n9ONxSt+eWT/6+furEGqVzCoBSpHYogU9YW31+G41BnAvxnJmv\n6CB69PfBmtSwS/8Quol1q0kRkkY1XfXXepufFuTZ5MemW9gRKkn3S10SUQEc\nX1aVp61xxmuFZknxIW1U3CVtZsvp+Jil31SnvwNfj4J/POxAo2VOAZPHSVP2\nljaeiaRbnsHeakrFWQ08t9B8894ofAG7Ch6EB+uriBBbnMxSFpJTOIUGmQHF\nO8AE/7BPmdee31k81JpCKoPzC56bqCFhr5LkD/8Bv5Z2WyT4Cvi1hZdmrhUF\ncfwtDV8Y/RdBc3gfYHbanhtXIgZM2rjHbftn3wXpa00WPDbTiuk7uY9tiom6\nICZZbSvtEa1Nz/Nfu9nnrTG3LAmAj/3IPAvoKzzFzaMT5sViD2kH/a/gQ+FL\nHouDtAQ+h/dFFae2QX8uVt8n66CRmuukfJICvq7uT0yg86l8IK/MvoI/QXga\nXoxV\r\n=HITQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3d53c1160cb32e1f2153527eaa395cd693eadea0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.79_1588021727527_0.2868285340484831","host":"s3://npm-registry-packages"}},"2.1.2-unstable.80":{"name":"aws-amplify-vue","version":"2.1.2-unstable.80","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.80","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"30908575e85ecc2c16dad0210823530450ad6fed","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.80.tgz","fileCount":47,"integrity":"sha512-5awxC4L+5p735KIyKtVSuERGRndqxk3/A9dmJswFhtS5dD+4qnGEVA7u5X7iPZ3mChiwa38ih2tfjV4ZaTWyWw==","signatures":[{"sig":"MEUCIQCw/uah1sPdJBI0jbt7I/1ActyU9VCJqBDAyqfKXUn8MAIgLqc6BwsiVLShuctNc/w0YH7P6CpbIhDp3Xi2uj6TYzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep1LPCRA9TVsSAnZWagAAIGgP/A/7OcQdtx6xSNo0m6Jy\nNyhm7wCogKu8K0kQfno+A3fmcDecxEkXttd5r7CTU0BPz13IgAG0rINdJBOI\nPuQWRDHp+5Yr9gwkNMKZlL/NcmtClVgevR6hXaTDLm8OgLLrytj41n9qwrT1\nIxqsdbA179Lr2IOkGHASZp2UceYFNBS1gHqlB1gUCcup40sTbL3ag/rbbI/1\n5TNbM7e262SyAElIdrmJnRfWPnwVV9y64Q3OhUuvOHKXS6Asxwh16n+YKPiX\nczuS1l5hS/y1M2eG/IiA1Wq3mMUuq2L/LXipunjv37scFDGF1f4uU8Qe7VMq\nkhRNmeCvQk02H0rTV5v7t9Bcj5/aD4TCNucblrAQffRy3fjYi58G6Ovzojiu\nPmNXmimix3aTruiBKnNT6db6VTA9AR9xurHv4S3KHx1GHBZM18eHceP6gZwx\nxbxTJHVL1TKXG32jOWbdPejauUljPLWsuzfX2dBOAYKjTzWUJ5m9XUyxJ6Cr\n+tsqAR2be1I8oyNVnzc3p2UEnd6VLXFIjGPZpGExNjvosgVuKBdFXyGdPb2h\nRcOP9sx3EXV63PQp0r1lcdt/US5eC4wtbnQzJLm24afuc5N5cfglhnLH83rB\nvEttlFw+uaJJHcwZnbgTf1yWMUGIWEN9WBTM2q3VsEyrc+lk3RNLNBeDo0Gf\nMEeF\r\n=juA+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4194862cf59a53d5cb1d27c4950e2d8bbaa79cbf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.80_1588024014479_0.7090743115560192","host":"s3://npm-registry-packages"}},"2.1.2-unstable.81":{"name":"aws-amplify-vue","version":"2.1.2-unstable.81","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.81","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b7ba61766ec461326fe93891a8d51f21971fc0cb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.81.tgz","fileCount":47,"integrity":"sha512-PD9/Vy/K8/kpYfyErvppC7jNXTvGVYU4DbSwwEWaqZ3aeMf4QMIQSoEblB4+M6WT9MBAaFbchaQxPmeA2TbiIQ==","signatures":[{"sig":"MEQCIDSX2SkIgBo0JKPN67xo/kRjlHXb3co34ySF95DOgHrfAiBvnoNvC7UI/eruATGpU95BHb9txaWt/kpCGqmwDqYrzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep1gJCRA9TVsSAnZWagAAPVEQAJtmOBu3JQ9M3NmSoGmm\nESrcfCbbtEEMrHj1wtmqVcfrS9AH0NQNGwvcoXfiyrQ9W7LreWxGe5INSsGS\nZMlhEgAfIQ06hGZfwnynHZQOKV9Ub1vSiNK5xLIRvyLGtXUiS910k0jlI9BV\nsACk8A1lHzssrwekd02jPOdQ3sWQWdxaR0wO1V682uRyyB+rZFRe5Bw2esJc\n567Thwh+NryyiwlTkaiRhqIPuovgW9555RgFQVxuNemAdcM1TXF8I7yApiJe\nrJDkdHOweQ3s8zMJLK6KYLJJ7hdAn42nAHhFmSIFb5x0VNW8HuIueJMmsGfQ\ng+U5+lTKynVsaAu5hSTR5tP0d5JIPJuplb2Ybk4Cv61qH7bMGQxruUs5MO3U\nNEA+7rnaZpg2gP72SjjysC89bQaLFqZht/ZgGp7LB0KArKzwCxdOuVMEFqHQ\nmu9y/h8NvKpcoujGABKEHwCIdX8eOI+NllXfoXdc20fNuFqze5w1el/y6yG0\nxvdjG4XSPhGaL6FG1JGioVqgznpT468KjWz/bARclBxdio4IhvGNaBFU58Hq\n+lepPE6Y+a/LunVUeQqZa9MvyvdNrznoHWi0Y6hlPeI6t4M9Pokucx3ik8bL\nVgqCIAOt10Au0PnBmuq2pdC+iiqcmW/x5WzwDP+9SBldWd8h4jo+YDhrz46i\nFGwb\r\n=NhQA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"35e9e0d89b35a5738481b2e2a6b0d6d0d0bf54fb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.81_1588025352936_0.32035490769669006","host":"s3://npm-registry-packages"}},"2.1.2-unstable.83":{"name":"aws-amplify-vue","version":"2.1.2-unstable.83","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.83","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7d36f0de836897a61a3f778421f0e5fd46c56954","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.83.tgz","fileCount":47,"integrity":"sha512-IGPCzwYLo3u0+oJp66xHck4OikYHSScVBv64ZZY0BTqueCEQvOyTPu96/+snm8R6Xzp0nwu6Ai7OH2XdmSaieQ==","signatures":[{"sig":"MEYCIQDWggfk56JlSelTzIXLALZuki2XBAh2llmvTSdDhxGP5gIhAKtDSjj2IczjOvpd8+0MyHhmMmW7AzWi5kD1gHuoZ6q5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqF0dCRA9TVsSAnZWagAAGNMP/iUOgZfl6HAqhNI3PIIq\n2/T2YwCmMJsCvWiSMQj5PttZodFMH2peXjz45Dc6CE9rTV8V2n1+RuvaFM4y\n3cF1aVca+NRI4oHazA0eFhOAMKJRkydWYJtMEcFykxI6lRFGnbJ4Kx6tXJUK\nm0ZNWl0AU0E+gwGxFcIdpzpcC4la8MECUYrJyR4rM4OtazgH35fzoccVPoMP\nrxV5xl0LL8Xi8VwzgBER7PlA0M7xH9/rtSiBPcF+UErg4wN90bTcqIzb2tkY\nc6IACVsvVg7XdLjPyCrpIBEovFrpRDjj2HUeP30s8Z5UqFuKi8mKjW4gwLdL\nIQruCQbY/M/ATcItKtRUPyFWPy3AT4aS8jGSpiHw34SRt/Zd1FXOXcPSNp1i\nYX3bkX7QiqWCIA4iDzHqgDUC2i98IOVZxQZNEpyx7ddCOeiljs2/BBspRnCB\njB+VtPL3Xz8eHHuOz9ZzW9XmGOU3K2+LLT75p2yCmQ56xC9ZnCoPXf+rYEw9\nW+ZEntuC+XkGGLpiHGq0E3kOdNWSkN1wpSpEzdGuPmHHyM6mv8m9oeBeAAk4\nd2w306/QImKscWhvUVmh1MwXL5o2HQGOwOHTRAIvj4ZI99Uhad3STSkfnuDI\nIDsjzykVY3CNuONsZ1YVGhg96S/bocwqYGtbZMbi+cp9UEQsBgH0WCKTGDZQ\niX7A\r\n=AR62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ebe0b69f563e6e4fc1d55fdd9ced842f04cfec75","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.83_1588092189199_0.28566483913447605","host":"s3://npm-registry-packages"}},"2.1.2-unstable.85":{"name":"aws-amplify-vue","version":"2.1.2-unstable.85","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.85","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4a1ec7bb7f2bff2e135b67a94c67ee34fbc62345","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.85.tgz","fileCount":47,"integrity":"sha512-+i28+cMlvytczDmUCD761sI+MQXrDHaaHdkNvyKU68ORg3SQGJKjI9vWtbxAJEYOM7m8Y1ofBgS0plrZfM1UoA==","signatures":[{"sig":"MEUCIQDSLNwxC914rctN2Twflv+wncjYxmoaIcAT/dwWDREthgIgFdWPmlSTfntrFqwoBsI+Tux5ET9UMIiJnrcKulldKC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLTyCRA9TVsSAnZWagAAyq8P/1IV1Znr/djBg1y1Y2xs\nNT8xLPq21W/KIJzJ/1QSkkAF7brUKph5i9nBsB9iaZQbuXDSq5Pw6vuleWB3\nhz2Ttww1c9aRJeLZgCHRnamyGM+f/7Oa3POqC/NGbvPnAFFaEtiPkMqgz8gN\n039DxfnB9BBh2ELB3irCyT4e5ERWOaN+RiAvI7YkHtXBr8E3JdZDVVaB8qgI\n02FX/+RuMhq/Ep+ht7gCIPWTrm2oFJG+o8iPoMJE7G0OPpQg1S/pfkwWvX8O\n7huUrNwPdyHEttJO8QE2/OtuJNdQyLI5nH7tjCBW7/Ij0TezIqp9ZVHt1fjN\n962pV4tO4LxiqObEdNkeq9X3l90MpSj6oNXJZAUepghRFEIXOa8nsjczaCEm\nCroQdFgbY3yTSzfLmTW8/tOIlBz/nkOe3Hgt+ra13V68aa2/8BFL7n7yHMtt\nL9q1offDUxHa96ddoM3W8ysuHwHLyVdFwU2qrbcofB2HotribZJyxwER0Sz5\nO2BcdOSak3EseVx9qhNSh9ALV0sumA0A9Vzfqyu+Zg46ncqeLjv/dx4kflSN\nFX8teOK3oSehTCM97+G75KbdNo5xOGOH+lD01bYqWoQtkSqCxC4X1FRfikAL\nfcezxqL9ilR6j9V4HuTlmlVq/rbbp8rbHa4TM2GiLuh6biqAhYuLxT5Yc/vc\nykMc\r\n=smi4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"11d60d5622b05e6bbf9c137b109e24d3877c453d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.85_1588114674113_0.0064667499768615855","host":"s3://npm-registry-packages"}},"2.1.2-unstable.86":{"name":"aws-amplify-vue","version":"2.1.2-unstable.86","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.86","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b92e327a5eb2702d9814c500709704f5d977f372","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.86.tgz","fileCount":47,"integrity":"sha512-gQ93ZPjupsQY6g9TIg0paBFdnOqAaXy3jIg8Gb1s1/sJNIMK+qyyf2CLVcYQRBYZ1htVlvwYALJAS8CT3dP9xw==","signatures":[{"sig":"MEQCIAi9esSfHV7wZTDjnC29OtvOWmNVXXqXH+7xo/KBIMSGAiAKJkxgndnpqUklu5IDYnOs1X/7N9a+rtCW2xq8aXPL7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLxLCRA9TVsSAnZWagAAD1oP/iXNZDPMvNJ+rVhA7GX1\n5HznWrWJu5GnIWCvEQQjHWkRO3WjfD09b+4QaSlmGgPfvt6N+Xn4QXVBVDJt\n4MizGTtbQDzFEpnMWrsum8tbFtJZsuijV4VdqioeHf0/o1GioMRSQRJifGYy\nu60MWFWCqCVaMRQHUr/vSOyMy5JX2L4VW3A46+JxM0B5vCSsjQUoAoLDn6Zd\nVP7KSq3RNtashiGPD8HjW9Wu+5E/XGFIgQ9dDmS5T/Hz82W1fHTZzuJgjNSY\nSeFG5Uh1zwDaxrNSxw0GWixurzq1icEuFWUGmuupLLkS0PynN6UwC+eqWBeK\nPrIbcR/bVwYvCEWp84WewmRPu5dqaIc0zsQDL3wxU2ip2+bEZEdsbF9xlJB1\nxtgDkppsCqKd0lzQcTD6MfvLx1E4ZyBrTrL1KRsgOxxDWRwrr/L6P9VAqaUz\nzuL4ZC2QbReeoox6xLmLPhIrCsDTWPC8h2jcveHQpw2w0zVkvDeBuB5SPn8p\n4TtMLV06NHIkW44p9cDuRSProeof6Kx40rnYvEGT2J7wiYBJM6i3Qb9dKC3h\no9NZdt89+Y0Lk+XAHKoo8aGpF0ivBcQCBxuwWDoKVzMzXMq/yyN67Jx7XfnJ\nm+uJQMavhbYQvrvu7KGvp0uwWSFJ84eS1Ah5zvj1vIiHCtbcShbjfF7uZG7P\nHni0\r\n=qNqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e89ac009a6731440b5e64d29dabcf7d8353a7a3c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.86_1588116554899_0.15223921987600364","host":"s3://npm-registry-packages"}},"2.1.2-unstable.87":{"name":"aws-amplify-vue","version":"2.1.2-unstable.87","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.87","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d39624e6337555bb38bf28f657a29629ccda9089","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.87.tgz","fileCount":47,"integrity":"sha512-MgNfMNSTqrTSwpT+CEfqv3Z3XXxJquABpUex8rd/H8qfudtNrWBmG+AhTaCfDfJKeIvsTofDWTbLcrmlg77RGw==","signatures":[{"sig":"MEYCIQCNOkJqDIqvhGW1QemTsj8Z7TkXs9oB2kqjOYm2XcgCzwIhANKomq6+3/NXsLKtuJBjuW0mro7AGdtdeH6gyLtx8vdA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqarBCRA9TVsSAnZWagAAQ7MP/3crjfaaretHrqbu4kmq\n95h12rKKTzFFl1nvdbLIuooQinmu+YoSgYQU0S3K51uaBFISrkH57xRG4TMR\n7VL/NeIkwd2Ch7WV0CuIfTCsuWZL2MqfLGSjA08M47ZdsYZyKddKry9IEkHU\n37gMTtpWspP9RP9zgFL6HsP5+nw0D04SwRobMA0NnLo1+btbwGXc18W/jMmb\nY7fDSmMZazCkTz6weUN9qEwi2v6bKeoy08AeoYYp10S0XPWBkob1GXaQLGli\nfLSvf2fknfVEfxLC/JBRGFIQPwHLXA6f5Tjh120QmyFz6w7o7VA2PmbbckN3\nYtp6sJU103rfK9ZQniUDh1TUOjSjZgxQyMgXxbskgnE02PmZnvR/fYp3ZVJq\nsN/KUAum0Yb0b+R2JSXCnTiL+hIpaHfwcycT7wHRIfk0p5TRE/s1r/WKBdzl\n/HPnVqsQ5hQulnDw3r0tpX0f8g3WLL6/LumfFpsNr0vnZUbXwvdwUk2wea0N\nB1UzddjNB4AoSYmLxxHATBMn7TSTSQobacmmvNtOXwDmfuLN9PQtpF5+lzgv\nKdOl7zhBLf5JkCw3kMvTpJz63jziQQvu9V6qvLVf6iBtLXDBZUc0vbo9kGqD\na4OLNxXxtOIHQ1vX68MznNzXeBvcDsYRmoSXH+DeMVkPv1SmyY2coNeZ77Nm\nxsKe\r\n=zJ/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9b05aeed43292ba5b9a7df3f4be79c60b654073c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.87_1588177600629_0.7923154553014085","host":"s3://npm-registry-packages"}},"2.1.2-unstable.88":{"name":"aws-amplify-vue","version":"2.1.2-unstable.88","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.88","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"741d999caf9e8b28539998040b50683f386d65b9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.88.tgz","fileCount":47,"integrity":"sha512-Na7Eo8SOaOVAGB+szJqP73BDG0AhhZ6DnkF4HXl6DvW8XHBR9hM0ZKoyBaqv+NcOYs1qEk5qj9Pcw+Myzyf4yw==","signatures":[{"sig":"MEUCIQDBGDYWjpszlkkQlfqAPshlvzW1rQI3+Bsmg6x40B6Y7QIgJdzPDHQz9+KDAMbm9TbQpRbslZFSgTDw8MO8TsIOIYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqdMJCRA9TVsSAnZWagAA9VAP/Ragdr3abNji1uR/fxtc\nPnj+pMD82ntb9kj3WF6i/bWQBO12yo9bhSwQMTvNbngewqbLAIw7ifG0eVCq\ndh7cLD4ovyFr8uy2jzwr9whdjK+8Q8NLwh7EZeXtSnIRPDANsdCTbUMp7r3x\npk+heoRyT/4GLALrhGzKD3d2BDeo3FhxXC5iOaueiEZKh7AuKc6MLP/6fJj8\n4wSS3vnRQiU4lfp22oZ8n7gYOO6E9+12anfnjEHRExdbSEPAZBqXsZh7w2lp\noE8rhIh99yh4NuzWJbFEXDRjqfOo9/bJolOnAY3rgoVXagOQEtbuTlO27L7n\nC7iEUUwV5xIet3fSc0nUuXrWtLxH+lIhYIJgl6AZ9NDkjvFrCEcOEPItsCW6\nae+zgcB+mIxq+AsBt2TgVEt0mXNo2A+zuM5Adwq2sZ1gW1ChMDuhekGsDYgV\nhuQs3EYbTgr1oB/2lpDm9gWJ6rIaSTjjBbWgPdnGRFM8r6R//gbO7ebtPE9W\nseOjV9lN3GQBoO1Twww+2y7Ulk8mU/N9jdns5tvhrBS8qLEL7Oz1NuhTZiP2\nzzb2ja5bGCVKcUhVoJUe6TjtxmgdE5NazdcgJyR6s5BWPkVYak/KCIoYhq7l\nDoZ0Zfxlb9XhhCGNyOLTz4NyWCYtnK+tMmdXWqa8VYjS6fcEaZYWCvuUOheQ\nRj+b\r\n=McWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f5db38d90e86a1fcb4a45d3223c1851272c66d42","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.88_1588187913102_0.971181614585729","host":"s3://npm-registry-packages"}},"2.1.2-unstable.89":{"name":"aws-amplify-vue","version":"2.1.2-unstable.89","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.89","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4563faf4707fda6266659da012800253250888a6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.89.tgz","fileCount":47,"integrity":"sha512-mP2d0Ys1E5UIsYZWN9mR0FD0GZq9LnZOC5IGOs5on3ieZceGUuJbbk3znttpIqy04yzlx35Y2vOfmfpWAh6I5w==","signatures":[{"sig":"MEQCIB81lhGDZ4olM6XnSiGLvaXy0FIt8DTQvir8aHdM+ClRAiAx1j/keXZSaYA8yyTVA6nDHmpb5PaQzU8gFW40qBvDkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqeaHCRA9TVsSAnZWagAAnu0P/08DqC5S+t9PVtEu6Gaq\n8lWoZBqVvrs4gcLy+YChr7cLj/XIuwrV5KUrqKO/zqtQlpwo+6pNR6NIlNqk\nOApO/CLm3Bw/dNfRCw7Oyo+LXws+jGaY/1x2F4X3SLcj5Tid/2n5u61ppViJ\niVkP5T6p+gopkXcvCQPZYi+u6PewLS7eDFXWBf30juVRzRFR7R4zVANt7GuU\nSc1cwa1WZBOA/cMCTXsCs4qttGiMgaEd5ewlWfB2+D0QASFSK7H1E+8daPaE\nIbSZYJzsjRRivVZppQr/7NFF/7512rK9Bm9jjgxz72JZeM22xL/vxUl8nYzA\no6wOiw5S/BS8IwLjEnLWD5505xKw47ASnTgnWQKRGor/2HsgJqFjksJVQPZC\nK8dUZHBN7PCgwZY5bYTOckGJkbwcQ8I5l9A52KQrswbfph0LWI1fKSOKu3H6\nwnhhcMR6WJBRY2nCAkDq/m8c5qes/seZ72ixhZ1wTxMxWBDtXEbkvWe5aPx8\ntviOYaYoEOlf38qoA0c5bHvuVgvlXriHuyQ02qucZwvN6SOc6AwIhJub1Q6Y\nGR9MeZy16DsOy+ASQk2TCQHRlY8jcl/SL3gA13RlP/eja7VP+0pqdJd1H340\nX0YNruKeJwVCQh0woJNR2KFZw6HfZKrdFT+ZuMFlp5uLa18rSS7WnAMgHH89\nWHsH\r\n=+IAI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e11e938184fbb935374ca8f19b96365a7d6af7ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.89_1588192902757_0.5121477806628707","host":"s3://npm-registry-packages"}},"2.1.2-unstable.90":{"name":"aws-amplify-vue","version":"2.1.2-unstable.90","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.90","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b5c6cf175d36266cbdef3bacd48bb5eca30bb5e9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.90.tgz","fileCount":47,"integrity":"sha512-laMPP8dj9I00JglZ//PN2dYAyNkxIDEgR8J899Jx0vNrCS0QNhNKgS7PLq+9uNR5kNX00TypIwIQB7W6nKVxoQ==","signatures":[{"sig":"MEUCIG9NULBuTlqu4ht6IxmJi6ZLDhRq8Xc1WxpfvyrGcf/qAiEAwG+Yn/LEj6GusuHQFG0Udw3/ek7Gdcvt//6CJE77TuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqf+BCRA9TVsSAnZWagAAck4QAIzv5nM1THSI8caAduf0\nUX7JP0PJwNloxPIzrwmyZ1CJBHr9NH23GXqhWAlxySItgMC2u7QFW5Z2wd+y\nPxqVnNn3lDcIAYWuU+xLzdInxNKz4ADSLld5myHayNTsQG6GGihVo1KFSaYe\nlfS8oWmt3zzpnD3SfC/tELjJpXqmwo9PxRQU2vzRsv1ssU9VDd4S70Lsu543\nZKq76g7bti0jD1z+YvvXQBMMHHZQ8/utB4h9IxEtNHb5XSoIf+tV2nafFNok\nzXQeDgVz1hXzKesd62SvkKSqLBcF95jHpwQooR1ElRmNLHC2yF1OAeynoN+E\nhSiOjumVlNZxbsr903BuY+1CPEvQtCWT70NwU7KvF58fovsC3jgUL9oh0n8j\n9/HfbKpwQNNiZtdNtK2HZq+YrAckxTUH9zEFjKcgAcJ99PG0txfIVUlwQRWn\nAHY25W2NAmZxA1X7Yxiyeyf12wUZ9nPUW8P7JxV1QauxSCZUZime6FbNxftz\n2vJMl1GxdHsnJeGEUYNNEzFGAUub9k9KGAGJBO56BBglviZydoUNxm2ChN8u\na/UXnzr3SycZyMVIQd6dBJt8HBuXD42LiTqzPzTH/83xtLalXkca810CR3zN\nNvNMrVmzY/FTBVPLI+CqrNm8NrVh6bso8XPJBzwWmvHzrP3Zt5ZUYPv6RSrr\no3hV\r\n=9zUw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c0d9d4ddadb97812857905961fc67a18f719bfa1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v10.13.0+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"10.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.90_1588199289447_0.17399848329484513","host":"s3://npm-registry-packages"}},"2.1.2-unstable.91":{"name":"aws-amplify-vue","version":"2.1.2-unstable.91","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.91","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"11cd39e48757dbf21cf729e49d4b668b876d568f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.91.tgz","fileCount":47,"integrity":"sha512-rvh0h98sWYHR0ZZMF+VQG0+HA9ebwANsTjlzsqLY7VLjvE0HVPqtG2TcMmeqY2TkYAu/EAacS4aU5qEa3pm/og==","signatures":[{"sig":"MEYCIQCVEOE7BHfRcwULoflzYt6tyfS/4IZd5hhBrNVjIOaKaAIhAIo7no1CGoJLXSSqs5CTHcNMVSzzo/UP6YxxhhoBlsVj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqgjvCRA9TVsSAnZWagAABTIQAJv9asDwXXRJIgghrt+a\nAqSQ3C/LogCXCElxEg/zHVOS2g98JTpRsh1rcxKXhVN2k2zlLGkVCvqfwUeI\nAlmPHZstv5gddf7P1lTws1wJiaxX0YWxPLxCtviBzNQd8ZX1WnfnlFDNRXhk\nrKnz/PPFzM15E6ZOHo4CdYrJaRsYFtETAc3lt0Wf0FP07wCmY8pfIxaJ6FDF\nx7m5P+WbFFxnGtiD4LJCcdb+prCGXH1S2p2SD8FM/m6d7Ew77CMeEWJDuraA\nMyxJgE2UJPHCYPYgsmJ+4jACrShWQLJNOu7eSK40zYFZneVp7RP66Q2eng7g\ntfUVBUTz1GWg7ikEUjizTMxhBRtw4jYXwDau+5FMPYUjL1dOZJd9llK18E28\nQTsbxTflI6NJXV+51p2lAWwcTtzgdzyZ7Eo8eI3hzrEGZf3CqMcsQMx4q1dU\nsFxRo/ON6/ufdEh006370Zne3nwxXf/Wdm8QgplNqw0K1ZptaAR5MheWI7Yv\nKt0A2VWms1dYkol0uNXmXSOSJ5N+QkVurCNZhmonpi1CiDtf+803VavRb9A0\nD08Rt9oi0VLeArfkNl5QkUR+CEtcPjTsKlQeCJCnnnG+IhZcByTn33OQKBvj\n5Y597OXQBWmw/Se1iBjy5Ad4WVwrv5izrTmYSLBQCzaylweYstaulWZjhppL\nNAGf\r\n=QszL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c2482e1a73ce6bc50656b6301003a970d9a1601c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.91_1588201705499_0.7301900937870427","host":"s3://npm-registry-packages"}},"2.1.2-unstable.92":{"name":"aws-amplify-vue","version":"2.1.2-unstable.92","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.92","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e0eaf977b14381498290e20d4dae0aeac93c0b79","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.92.tgz","fileCount":47,"integrity":"sha512-vQ1ftsk/0SCcCQ3aCI9leMxfmZQDXyDrz8kOAP5qmTfiIi3CEThi8Ip6TfAT+urz8K8hz6PaUZ7LJNcwsohRaQ==","signatures":[{"sig":"MEUCIQDHYbfJHHm11npeMWpHd7mqmfWM30ujcOjHGdt6my5qAgIgd7oDL0E11GMTbEGrbHcx/DlM+MJO34/MiargcoQZvP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqi5VCRA9TVsSAnZWagAAuHoP/25Bgl66yl8yQ4wx85bt\nfYlnwj34DyzlbNLM9bkQt6aim6aVClT/bWl7pPXDsUKQSMys5mjTorLcYOzx\nQapH939PXPf2RzV2zJ+FPqRS48JAYx7Qlm8uOtvjWfdV+u14MP30/49+p6nO\nmElITunB0+UQFqaBnwRyH2Jmz4wcjm4RzOx23EtHdB7xxnVg26/dSso6Nwyo\nthIPNLD+ffMFrod9sRhxT/R0xjGuCaozZ8ZVVk9ZtVmMub35D3qvF8/sBCky\nk+UUDOyC+As8sVM6rfcWlyDTrv9LKLe3Te0YCAYATqznWV7TWsW6Tuw0H1Kb\nveR4ZWngjpiBhhd3QnycVntyAyFZ6SPJMIubgyCTZFZTWXinWPTMTkYSfxYR\nDBBXjy0+qhg5aQ/9gWYJ8Ec9aUWUq0NGZMbq7dx3BUDRnUgDpXb06WJQt6uk\npikhhyDYJVkM2rnZrRksk+Dkf3nDk6bD0YDJWFQFIIBm4g6avEzUG5DRVRgm\nRz7Rp7j7zR+VbctWQ8qPYo1oRZd+c+bXN+gMjkV+IXC6GINKbd2Gpjk6kAOk\nHewxpth7luiVq0r3aP9XljCTT3hrUFdw1fc3oEvYVkeGEcz1vCWesLgGfFnW\nylqrmUEqCtOkz73e/5mmzn1SVn/caRCJdvXyt2Ci4otapy0XsLm4dGBp3i65\ndfOE\r\n=15iA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"41fb52ccbf95a537b415e2aa54128b5f079321be","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.92_1588211284632_0.8505048129290436","host":"s3://npm-registry-packages"}},"2.1.2-unstable.93":{"name":"aws-amplify-vue","version":"2.1.2-unstable.93","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.93","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b0000af78fd078b5e2834334460dfa4451328adc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.93.tgz","fileCount":47,"integrity":"sha512-/eIceRroFpGMbsstVUn63fsIsEReiOWt0J4DxLzd/O9RGlByc3Ahi0E12CaDHksvr5P5NlR8XoM46SrHyFlobw==","signatures":[{"sig":"MEUCIE9A0kJIX2lmeIZn/Hbd3H0O0Yi7k+0+75VGhMqD30FrAiEAy7qYsha1OsKcm4qNIJbgE2Ab5sbiZZv7H+xzWi0x7r8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqwppCRA9TVsSAnZWagAAe/MP/i7v5b+ni2wY7fNu3P3Q\nHTnTuRQmUyx/ZC8/mi0SKXhevseZ69Af02Jn3SclYuLGlsU90PPynwLaqqQ0\naz9SOhABWouMifsJaXDRqP9yiXHOVT0C8amu1prY62LD3ANJES8PjtalFPnZ\n1IwgG8dk31Y7aGvQ42waSQQePVE5jCQW57MXFtgyddxsIw801u9QypcMUt81\nC1rmoYBQsaW037XZ+hL1sxUBHoEts/caQXZ4Nu38b0ImI2Cw/Fq6fM90tXng\n2p3T8oihm/n/bjDDn4j4WYFykuNx0wL2ZzdhyDEL127iYC6aJT4N25312O30\n8NiE6zjswGYNYeP7hRKMrvzrqzndp9hNrVFzpaT9DZBiHsCnzzP4ck5i2Xso\nE+sK9SjaOZ1+aG/vvwTR15MfTroQk++oNC3Hc6RJQyPXdGSUtayQkFfXT0fG\nV0Qg2nQlWWp3euKkoeJ6wizHpD5WR4Pwbafy4vUHgf9IGyexq5ybqZLWihRw\n5posrqY8PIqUV1duC+/MGmSlj1cJRkXVL1vOIBVgwGB6HgNJZUxAO5ltofNq\npuUITK/IuEdMq3t111RFxac0zw0iZC5Nr6Q3V5yjAfsjQp/308XfbC6tDMr4\nWJfDgJGQ3sogC1Ax1qD6rElm7R7/HVQ4Mq70nSWdGvunWUwVeJPejsJesaRG\nnVM1\r\n=HBtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8f03e22509f71ae27d5ff9b19267f8104f6573f4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.93_1588267624647_0.6113400415056669","host":"s3://npm-registry-packages"}},"2.1.2-unstable.95":{"name":"aws-amplify-vue","version":"2.1.2-unstable.95","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.95","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3a1f9531166264ad1bcd9d07257a7a029ac04f3a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.95.tgz","fileCount":47,"integrity":"sha512-M2SvcY5GCDdz39io4ncroXxmyhwSNd+cDE9+PooAPfBEjgOLZgMTX7KR2pQzMoM6VATO1IQnrTTys6TeSPwY3g==","signatures":[{"sig":"MEQCIEKggl8J++GzIvVyuBkw+zd24swSa0Du4OS7Pwq55dHtAiB8ls6CFARg7+NRaRHB3+lqxC0ZVPfkVoIauhZdEJXwJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqxT4CRA9TVsSAnZWagAATz8QAIuvdCoZkclFku96j2RQ\ncV3abnJoVwhomvsOHqIVCnL0wSGI3JHmYU0T4VHOq7o4S8dDANQXrw1sRY2+\n9uzPKkOB0NlmzxLgb74aiS09TUF18rOVc4o55rOoZJbaPui17x45sxLnwyh6\nfReu9nBCXYj/MnEScesOZ947Fv5UBY7FHqv2kLBWnzLtwSCgTzsQ7YmMACOY\n3objXPnukhNpkyFiUG/450fvTl+tTnI2UfqVlxGy1vmvxMlIQAgF9X//We42\nCpGddFwLbFWLODIezWwj1xrSLrUAl4gd2EZwFcbS2otGc5ysXS7rTV8ZsS2F\nXXDSusUn2REarJKbwYKKLTGL5zJZEi90QjX/EFZ4NNYSakYCjiShGNTP2V/1\nQ5t1rq2G2U7NDB/5/6vSCXckctIKVm1OhXQCzHNepGDB5NjxuAUYati7ffXh\nSriAG9VXEW+vIwshIwnuGvEyPRAA8n2AEZNjrpkvTvrg5bhvJmSFDnQyflIi\nzybKSNIX4G+b7SweKTZdMyewU8VYh46tabUNl79wXNoEVsP77QSR08MgvdhU\nElqlQ7vBABT4c7CbCCriqZTklYqIJA63RT/ddqwnAVR0PZQqEalsUz9YcTgd\nyKCqkZ8dshCPH//U3sfdlUWcYvd885xDwntT9dzQBw0qJjpX2zEHZT6Kn5tc\nmsAA\r\n=L8Vc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5ebdab74e145c4de51d759d9f6dd536ccf6bd787","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.95_1588270328090_0.49802554030133916","host":"s3://npm-registry-packages"}},"2.1.2-unstable.99":{"name":"aws-amplify-vue","version":"2.1.2-unstable.99","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.99","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0816569a9e0b91b6159dd0347520d45ec3833aae","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.99.tgz","fileCount":47,"integrity":"sha512-KwQekZru93T3VZt0ZtwWbdFi8nawOv0eZxTB/tNeVXNCwfiIIRhkfbppftDYDxRdkktPckxDTcAlBv5aBDHp4g==","signatures":[{"sig":"MEQCIAfjSw+47J5CkCIhX8M6v/4hfPaXrgm3EOWXNXPskGB/AiAYhgfO9XX8CNf/iGHYzv48qcWcYyStBDGckaK2t4hAZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2961524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq1OFCRA9TVsSAnZWagAA6CAQAIZFckF151lf5VaYYwIn\nOX5YK6QMrvTadNVI5hjsc6sVz1qQBRdhS3hvVKDkPhLVqvG9uEiShBbFP1n1\nmPVPVqpZJkKrXE7H4sUQXW7R4g5yRfAxczLdvFtzZzLVZ/fDqnhrJd5uqne4\nZUBFNXndVyXVSf0mTdzFmSx6hiTbMnZpaVcZ1MgCP43iOIJ2PckVn0Ta5dpd\nR+ZEeB30rVdsOrtwd1GMb5STHtJrw6ivoqFCs3Zeudno2Q7l/idC3GKI8Iua\n1+SWXaZ80rglwm99GaPK+H5MlTAaiO5EQbXLnQADOUxWBTswprxkJ+R6I360\nc0lhwRxG0YILNfugJ8686VlwkFae6lEZ24tIaVcNw+YJj2q5QgjP7ZFaOPpf\ni2xQFnPSiaqc3Oc3Owy+x6nJEdh9VuAXogshgNKCwnMUoa5Cn+HfXVExqgeI\nwHpP3Saudu/zETlBLrH1de5hlmg5fZpy5PVD55ZMIG2xZi72j0aJ3Pye1yRA\nbNGKJT/VDSqdqBnfKtzixU0T7ymn8DHmjZ3VY8NUy9CTSEOWy6fxfkS5VY+j\nloYGBw4247c5RDCJ6G0RhfpHo+0o107/er47LfyEv7boFAsX88hL8OVrCImg\nw0KJCq9Kl65S2KOqEOl2mqZM9FcqBLK/JbqRSt1yStm0jgpc46qIzKiEZ4to\nyqN2\r\n=/cLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"77df5104398d38cd69a1ba4fa0e8fe51343f3f92","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.99_1588286340557_0.48486878191175453","host":"s3://npm-registry-packages"}},"2.1.2-unstable.100":{"name":"aws-amplify-vue","version":"2.1.2-unstable.100","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.100","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"69d430a88e49e98e0ce92377190d1710630da415","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.100.tgz","fileCount":47,"integrity":"sha512-avzDr258KD0tjzKO34SwxXKwAwnox1xMT2kKsrFRaWkZLGu+42V4ZbP16mfiF7kG5DlBt/RepIkrE4MAP9NDdA==","signatures":[{"sig":"MEUCIEl0aBJeIXER3pCFq3N3eKdR0iPd1M2EM9lWn+ADzaOxAiEA5IMkAV6cepxNyLrNECNCnK5mGUtJ3ResnGfxksHYt88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIlWCRA9TVsSAnZWagAAjUQP/AnWtN29AiXAdH7bfbGH\nqZTUobiXkumLIlGlm1N+5nX5tu0+7zMJ6u+aOWAVuEJRwZVrtyjvjn2MuG3p\nEt+CWxS8Q7cN7eeFmczxjV4ZgNoCzzfS6hpu3bmW0Xt48ds1DETCib/1nCvh\n5vfgwV2X6kObU79I/f+BigXi2zCxzgN5LU6Xgiw3G53KzucnWjIOjXtxfChZ\nFrWNswrj49wfdKGCDBusnZvBC+0B09/FYjO32q9sx6RJQJWq7igUdMOTyQpe\nvWEo7TKBp4MEjyorrIQyUCIZ1mCBQBWGROp3sz8+YBRVPbPP8zg4L9Z2QzzB\nBR2RTwbT/kt6diH2CT1OXZOIgMkDs5Kil42gqcRBN4lVNEiye2MUkzQ9tWSU\nbto6RXoJh+LTVjHu+Q0wg/Lv6iaArBImPk5DYpOpPax0dVMCYfKzc7ejF2v+\njWJ9dM79PQfIyUhTzn+3B7dojbByUJ9aw9QGaemTNTBtXsV9hOuHaSuKJbZj\naRobeUJXnjKUzTPkSsb4ZiM33ffsI3Q96a0GBfln1OfUVEtpH8vSpmKYBVUT\nN7+rOcm35B3Btg9WG/CPs65bBHzGCyxFCNfL0bEpAjyH5FvCCTMUa/df57i/\n1+d32TJsD4tfieAs+0JXuyolZIxaHTc0iykIfOMUPXD35sAiTRFaCidM3GDz\nugNo\r\n=+xE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0f17ddd4052d329c40efa1d1ea4ac2b9c82fb0f9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.100_1588365654051_0.39520504563589354","host":"s3://npm-registry-packages"}},"2.1.2-unstable.102":{"name":"aws-amplify-vue","version":"2.1.2-unstable.102","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.102","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b615e6440ebe3f3e04f5b800a8a35c004f351d8a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.102.tgz","fileCount":47,"integrity":"sha512-lPW7fDLuZcN9Z3J7bTvvRUkmRg5XNxWS+Me0IeLBqTxwckF3LYnHGju5oxTEPHrOtedXyeK554w89+eTMvbCzw==","signatures":[{"sig":"MEQCICwK0Np2t2EtDw9sV5TeM+WJYRIQd8eohmJYa4JSjgijAiBBgdpI9V+qe46CagXcQbIPnZxACBPDPtAvV4iDqBarLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKWDCRA9TVsSAnZWagAARIEP/3c4xAlLUASBV83PhppW\nO3XUC4dOLKjkX/km9MG6blhSFVWWSjJfb9n23c+QiRAXrmXJS4Q1paY6ftan\ni4rsWrq/9RrUVhBkDsV14JvCckDTXxr2NddQs7jdtOfQf79ccXA1hXdGXKOj\nN8BBoYSsnlXxMwHeeTrv7PkdUky87Cz0CZJ3R0xRjQz4YizW1sCDnirMYDIq\naSUEihQgMIJDNzuK82lK+9HWMfEosbVFC2kxHXydvcLutNXPHL9NWy2Xp+4h\nncbzWknweG4K9gydVakUT/I/Yv50cvDiDtw3LXwqhjPjnPrxBDJFrf4K51xh\nl0nvtDheJs7IPUy2TnwjzNA3vb6xJzygH5NYT6WP05WAprSDF9up+gKqaZ4x\n+/aicjvg+ztQrcVIj6Q2W5yfI6rHcGFiJFMdghXWRqJDxfSQ31uAZgB0JrHq\nFlBG6M8UO3y0Ume3G4/E8z0+fB6qpAImWQ+ojJi7luT69CD8Xx8gryGL9TY+\nqiwcW+0fa+aIMn2bR+V5YXki2+ZQZYE2PWpvRxWJbC/5l2RFXV/KaFsGBb1h\nExUXHDHimFkQu5op8aJjNgBlW/6Ghy0/kI8ZngCTV0UDGc3gH1N5Nm0dNY7Z\nNT+/5fIXhCmnEHoYJn4eUuK7QZsX7gbLi6XB6L3YVySdncD2ffZ7FNWXBaFw\nrNXf\r\n=I+b7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"be73bce75bba98fbfe3bd09f0f106cf60c97f23c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.102_1588372866686_0.970078829737844","host":"s3://npm-registry-packages"}},"2.1.2-unstable.104":{"name":"aws-amplify-vue","version":"2.1.2-unstable.104","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.104","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a35acdbd5119062a4bf192ef64aebbd2d21ea447","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.104.tgz","fileCount":47,"integrity":"sha512-9sGPtJqh/u6m96C29q8I+KQo7R0DAwiqf7hK8BUgjidBOszVRmuLsF2HZZ7xk/dDI3UZ4kUyIf8kAUbNPKgS6g==","signatures":[{"sig":"MEYCIQDf61ui1JrAP8J37E6yXh82ahP+u4mHIw1B8LpZvtTb+gIhAJjysR2EzYmxJV/LydPYeiFaLZkfff/B8QhUw4B+vad7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerM1/CRA9TVsSAnZWagAADuUP/0NfIeXqDi9dCv1XcDQz\ns7JZI3G58AmsVhk8lqv+Q+fS61V78+3zbbWC6Y8UdER8LbvazDCPd3qg8jUO\neWkCu+aQbAsClEQRaowQESvN1sgCYlxWG41zCkHxwLHH8UgcRng+BD1e5AKh\nT3+sk0aAkVtg84Yv7SQwovIzXcSg1ITD0k0K0vWO1Z6wFefPTUCiXLbxiv/4\nK7HLwHvorJCv+4/Juv0SHjy79DfB0B81/MEVJHsOanPcfCerzf8ti8eRhpkT\nBjRJ01OWBXd5+G2g3aY+yFMrrIm0gQ1NQoWZPMSmHqU4JDC1TSNtMSGqWqML\nPa9++e8B+9YwM4qEw+pcfWsqP4NCpZ9IEsTMWwjTcvzh6Z1LuakS0SEl/KGd\nRIBv7hzLxWONWwvlyJ3+o+BqoyTWVsQZ+/lvipGB7aNHhrZRH01jAf807KlB\nGJgHleHNUxSKzB8Z+o4c1tUeHcf/XCaUdX3gZVmd/+p0wo7Gw0sUB0R4N6GJ\ns4ihswGotniVDmgWzeWV/IRelHEQBw8Tyy164pU4IS4L8QJnhftQ9LTSfRzh\nviaGAM60S19xqrGEmfebJFaj3Z+skHThkWBw9tdKx0zMKeg8tvEsvbB4a33q\n7VKHf7LCfZxBmThH4jZ3o2G5hlaHPKGQNP+aPqRs6qajoeucsdLQGOLdwQJG\nda+0\r\n=psIg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"22a8903e6d75f18bd3869fb506191afee55ffd80","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.104_1588383103165_0.15720139992435556","host":"s3://npm-registry-packages"}},"2.1.2-unstable.105":{"name":"aws-amplify-vue","version":"2.1.2-unstable.105","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.105","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a0df2de9159ed6b8e84cffb4336046868cff9dc9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.105.tgz","fileCount":47,"integrity":"sha512-JdqhJa1uUTztTAsJQjxjpIjeNOxbjhX+CMqr/7YGVAgV3wQIRGeedGVctLmXx5rG6DIOZ7sRwQDDwrccgTZFcA==","signatures":[{"sig":"MEQCIEUZOXg8Q5RElQCfrmXosyZgjtJvCzQBWF5AGlJNObRcAiAkv6Se3QT/wpwSZtnyAiUAW+IOKv9a13/J5H1RW2Z79A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesGHfCRA9TVsSAnZWagAAKjkP/iOoleu48CbXqiHO6UW5\nfEKhWozc4SvrFLv0W5EjC62QzvGoX6nhRMGrZRvHpVMabD8GFHMKiC5YW8EJ\nyudJQWsNkgZSIoaY+nWP/YzMOled5a4TzKz2f7FNYzJaNO7rymCO4fbQiVRu\nG8zAbK0mzqpsVaaMyTQthiTIb3JQ5/L3pHdX9dhTmHpB1VoWcnAdCW4azQYv\n60MLzeQNyQ9k68u5Hd337Id7Im0TtrMI9kNyt0BmfmrSZNo1uJqg51Gwf4z7\nrL3lBLgP8EmXnZrf+aFbU2sSnQyiAVsP9yKKsMKtejf6An4C0g3ACSZJCjSn\nu00cdsfyB1TipEbNOoxF6i0EftBPtPbl+r4V2CvROF0giE5W52JwdrdZuEXo\nxdh0Hv3gVQ20onM9G1XamrTAktBv/HPdszU7F7x/uwn1GH9ZX6aqSHcLH39F\nHX+8xFEkxpgS/b7S68CPO4uK7pQdvUBDgti5XM7w22guBiFnbj9rDe5X0hgz\nVQosdRf1xVcn07yN1gGstgnHyo7grkPGRB3LoLdchm1p6JNmd7YjuOCraW78\n6VcCUV3VNgULrAeuCf+zDGp8aPwYkAo44Oc6i5Bz3myAo9+tFXTJxzYroX8q\n362+kNc0LR9Ez/U3Ks3DDw61QP6KudaxbUtDQCxg1ffLeCfeBhJMW3HyA1it\nyg5z\r\n=kNdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"50bb84995a7b15d969f0b0ce10e6b254ec95c94b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.105_1588617694322_0.6778616405069104","host":"s3://npm-registry-packages"}},"2.1.2-unstable.106":{"name":"aws-amplify-vue","version":"2.1.2-unstable.106","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.106","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4e4613169dbb6b02ac7c35bc168e5d042b29732b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.106.tgz","fileCount":47,"integrity":"sha512-6NZG53IpgWzou+wck2jp0XlxnMF4zTbuDr9MR5kB4emYAdtMKURIY16eVsDiml/h6ic5ezq/048gbdDn6KIgqA==","signatures":[{"sig":"MEQCIFvEvILm8XJISaT+G0/ZjvG18Y5F4ng93oeK6WH0VqS6AiAZ1/LiGXcqNFRZ+CFXEUlMTRw6odlooWMQLQy5fWVALg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesYh7CRA9TVsSAnZWagAAwhIQAJ63KABpEcAy9lIfE1ss\nL8Ga+TyeZSIB1VK0yW/v/wnLEwTIuz8BqzG0nJFniSLNobkwRI90mtu1jQoU\n6PvZFW7K32SLO6fr+Nkh665KOFALfefx9e/NYiMz/vOUdal0W8P1xToTlT3e\nUFc6OSQWcgrXA+tIL3akI/eRep5iqj4WvdL+P8JpHG00kHFkzK/uaDoWKYny\ncg84WeQCriqfRfrONvD5KBzJ6YQahP7C/8FIyOXUxDOQWERG3lyNKP9g6xVS\niJhtvAN90gEHwDjZ2SiopkHJmETkmMmeR+8W43hJ5mVDRADOG3URyi7qMkAg\nftBclVEU0QK8k7saT9Znen72Kzzh7+eXk7ItIXjrdQ0oe0Pdd0KlojMWqIRp\nM5KGmrOqoB0eqq+UHjT6o+/JJexoO5nm984vqieKCxsqnJ8SbIDzzWeEdRfZ\nWpowcpy5sMEfrD2mHpqWBA979WywILc2qiAqAoy4KQaQLg4IYS27vgVfgHZt\nFrxB1LosVN/GAc8QeESS9ZVrTLU0NqxS/qYqvhGlBTFY3YdNAti5Apw0e4PT\nXIYx9y47yXl+Zu7hryTeUy26K5xX3/7jb9SqljAU0ub71OC1eI33NpWQg8Tk\nw/Nhrus262qLjAialGpSR1aNS7OU7kc1YBavtINrEU+z7Sx3oo6PR4krrt1e\nMFlh\r\n=xgMD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c73974b15dfa924423c8e368ee851af000f365f9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.106_1588693115063_0.42935365476380416","host":"s3://npm-registry-packages"}},"2.1.2-unstable.107":{"name":"aws-amplify-vue","version":"2.1.2-unstable.107","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.107","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b125df97ec13888998030dd7853ae8fb4c23a2fe","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.107.tgz","fileCount":47,"integrity":"sha512-vRAkUBna08TQWdRMljJcZ522CdCvZKFd0Tr3Qp8lOuHcKAfI/ZyxZlt3JPa3EYtPznqRhC4pieuuQJEuj8FEbw==","signatures":[{"sig":"MEYCIQDSjPJfET43UkQn2QRAMNwY3/YSncVPwPn+3T0QTDSp7wIhAI/P/IY6TP9mLJHwTcrxxsPqXbV93DYqAiecavCTGz1q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesbL2CRA9TVsSAnZWagAA/04P/2REBpLx0A8n7neUXKlW\n3EKuWj5/dAuyuEYg8FC6/Lj49LAWyECJwaeLvfqYphozclTY3yhjy+yfvOkQ\nFNRG+TkrViwraMDQsAwah9td5rmbKPm2IV5Jz+PIiNXBV0vLvW+zUU32CLi8\nhzDnbJW2XWZyg/Xz4TEZYRzagc+verg4TU8HSbSvKSDnnoZ9O1rw6BdaJvfM\nTAgg602PvGJZVdqKZRNJky0JFbXqTP/Dj/xWNKswXpQZ/+bFkPt4P6wD+Vc4\nppXHwCu0e7poS6MqCAY7Tnu2OKXQQMbKZezBM3UDQ2uPtt3Dxcqew+STWJa8\nUdzt+jDRRVwEEm1PxUzNqpsQ7Lmt20D2KhM0Dz1N1QHFmIJ20GmclFENT36r\nWbgImYWt224nFtn4dtl7il4YN74RGwcXPOxcJdQUX+BufekuW6h1/eIZ3dYp\nakGqf42V6D0BI4g71ZVJ7bu3sn7tqtT+ErLB6GT2u5iEfnXBQ9RnGbBE9q2o\n21i1sQQWGMRLrcd+Xc3UWFyIOx4jbeAtvW4nrVN6/iTPQCLkxWETXhTDbtNd\nQozoA1IIz4Y/ttPGlpkNCOgcJsm947ie4CATalTiV97B6LBhkcI8H9iJ/CTB\nqTwn6eeNSNvt75nIha92p0GmmvYvL2Ng62BYbVRrBFS0s+ERSS0qKm4vcb6R\nvOra\r\n=q5O6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8cf409559754aa7dd41d42b7a024845a6226709e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.107_1588703990135_0.9902936890153611","host":"s3://npm-registry-packages"}},"2.1.2-unstable.108":{"name":"aws-amplify-vue","version":"2.1.2-unstable.108","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.108","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"66687d45ec6072326d98930ac25858e9cc8f20df","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.108.tgz","fileCount":47,"integrity":"sha512-NW/uaaoSyH1RXs7rh0+Gb+wkfDe80rPc9oGBUtmzx1kf10ZW4rICU8UOiZCLI0n1pxD8fSXrMOMauTyryoiwmw==","signatures":[{"sig":"MEQCIDv32yV0wOXE/qMLcfVIhvn+YP7WAInXs2Wnmka7rnh3AiBS90pbjvdPPIgr2cob2xZTkfRVtQvcNOVhVfkjwu+9Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesfJ9CRA9TVsSAnZWagAA7mYQAJLpuku+TYaDogc3qcvD\n2MPvMA1VqHsQKySO9sJecd+nY8TKEKtFBnr74X4homkgoYaA+otxYnrHQBXr\ng28UmNNFCvB0PF+fuUZUFZz9StIJvd6jSGqgyIMjvs7RP8iGFX1UUQDhDt2t\nhb+XMLG6agAgBvWozTgAij6shydBgZAd3YY6iJPUokj9zF5N/jghm+e1k0yM\nvsv/CiLqdInpNUkjU4bFTuz23yFMtft5Mvg2KdcJuejY9AuKOxZOiAQCz5HB\nAYGXzYgVxAIYOMDCeFzmi7PXLcnftHVmE6VVFcDQH5m1ftTIJuBAvkgQg0Fx\n8+zZBtUBX/QcLeCDmHMyPaXkzfCNUW9pgj8ojXw0hLuZEoHhr+zmF7y9u+jk\nMeku9UFgIfmP5O1himbqQ+mAyaEd7whwKiclaGAUKZJInpFEywZtMKk0yDdB\nPTDuKSnG68wJX4clillVqX7fIS9ZBxcMf3BQvcYUjQyW5OMsvK9kyWqRYFjt\nxs8zKQm0JEn1fB2Qt77nwpwMwQMtAZHq0g8kExDkAw3mQcDJIXQOBO4cGMPb\nf+PvksSx0AzKf9FIp+o87wIDJrKe1i9Ppy9zzpTk3JInqwY/igSXyut76AfG\nyYKIAhifRCvGvh6rH5/4AeWshuF1oPSlncU+XJJoQjcSR4t5DklIzrkzpqJq\nrlEt\r\n=ENtP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5b146a4df9496238597aae9c50919dd46ca01aa4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.108_1588720252454_0.32325255017317955","host":"s3://npm-registry-packages"}},"2.1.2-unstable.109":{"name":"aws-amplify-vue","version":"2.1.2-unstable.109","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.109","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7096504fdab661fee8e5038d4e3dbc584479a265","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.109.tgz","fileCount":47,"integrity":"sha512-fhugyCvEW6asU+kwvMPCKVjeFNbdKQJj/6pxD7DJrg3CMy1q207FSBzw0krnd8yWk4Aeu5tQYVV1z19ItDXmKA==","signatures":[{"sig":"MEUCIQDJfOWDcJ8xVI3EAHZrgjzfhzIMyOPikUdyVixtiis1BQIgSBxrZysO7w8VNchKBAJXPp9ubqe9nv7FfMBh8uAAKKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessG6CRA9TVsSAnZWagAAAwkQAKEttNOrjjjzZ9IV3QVr\n50EaX5k0SXvsw7toaovWQjs2GMrnDQh6cJPtGZes4eMhID5qABxvDFZOJZoi\nV4Qy+TV0NtHPQ7HZzxnV8m1h1laFwXBwAcQANwvWrE3Jy+b2C9aW4wX+eCEL\nWoY1a33sdDZdyM1MM1rgRsG6vWL8YPmiIBr8zeCTrGJ+aAnQGEK9DHilE/Oh\nq78wVttgPiFQkwVaiRpaKpVp1JCHQZ2jA506bUHK4OGIjG87QMfAgn/d+vaD\nRFI5G+1RDfNFxYYuL58Zpwysdk7JdzrpkvLC45dputMBkwqkFy2ScuArrhRD\nXQfatV1bhnX6GcJMCEfAesN+hmx4uwRdMKYSQqlTN53hPkbeQOUZq0KNSATv\nXQ8zEsQWKUWYwyhGbdKPOt1Z8m6HH5sj5svYl4KAT/t3idDHbTv4Ny7mL3TM\nNudjmTxtbweRZNkm93Yyag1BFzEKGhKZpIk2GYABWr5vwNW/UsDCKCWQiNss\nnHuYuod07n27mzgE2ZzUgktb17/jXhsbg90Uh+iHj3uTdFvNeY8IkRWSjTYI\nesP3os3C7Cr0670nCMC/eSFtyY6nCM7PEQve38club7xG+MJl1zlYaMe8PtQ\nk43p6dkIfGwdTO34eR30ejlgRC0YO7MLMTP1Q+IdT7zLFXubL7sO0epkzBmU\n8yq5\r\n=4Yz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5e5974a11f799dd0bf8e6ad834fd94281f6e49a9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.109_1588773305892_0.8930277259744113","host":"s3://npm-registry-packages"}},"2.1.2-unstable.110":{"name":"aws-amplify-vue","version":"2.1.2-unstable.110","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.110","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"966a64757565731c80468a9eee652d72d7b5fe37","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.110.tgz","fileCount":47,"integrity":"sha512-548MwwCEO6nIxqZ04q4fuQFvIfNw6isMyUUR6RltsIeCoyTjN571MO4z2qogl754iwb/UyEuRxmDrAZ3qF7JfQ==","signatures":[{"sig":"MEUCID7hVGvl/BvogNivc5Vjvoq5rm6lGCH/0S2riFldjkJlAiEA7rGURWMedcN7VTv8quV9NRn3aMDJEtQXdDeax6cwN0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesvIlCRA9TVsSAnZWagAAxfgP/1ulWjfEMs6sWgP21lZH\nq8LbflGxTumAJAuozRqMYTaJcol3gWhCTOMr6yU0UZHMS/j0EYWV9wabbd29\nwPfLei/BD0AnS63f6F5o7mCE4/PfemqPE3ZbZwukYCa7dq5L3nr7cAAm+aQp\nJjbij9bpXu7+yGCijrvjbrC5Ss+6P7csXGyc880DIzB00B+2SwAYwbrq8QOb\nvGrges5aRC0Ix9xnXUZrB/T2aHXNHCbSuNWnVNUt1/udt+arAw75kX7nu8vU\n1P/lCaNSRsaNPidygF7a9+3iZF3oenZC45vjnim/VpPZRArGNdFN0jCydtpW\nHWZdoQsfJ8YZLSW4L9C2JWhmh7nm5cgqjrYY0fCPONRUm5MdFUYtfpZdVQ1D\nfScBYxNyLbBr0EBkBYg1ayERww2YR1Ih6HfzvfL4fFzTJzm+ZGqlOjUm1t6W\nfhB8BQ0RJl/wF4GIx/zftyUahQ4EpXMwaN8w4gjSZ3iJY9z/Mntdts0qXJFE\nZJtpJ+v3urIevAiNGQK7+i3Ya/Tbi2hacrLBK6LGaRVKTjdZBeRwHmoT2K87\nvZzqg7CloAF4qweh4OW+mBRP0oizoHLy8RutHw0CZgIpw27B0xlxGOS+vNOj\nX64HV2oigC80UWWr+DKvVSK/Y6DkYWhd3ukixpPPvXF4VGU5Z2B6uJnj4o1w\n5G68\r\n=xZSD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"825ed73218ae3074c536da2d3e444bb965506a97","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.110_1588785701143_0.2563013378420793","host":"s3://npm-registry-packages"}},"2.1.2-unstable.111":{"name":"aws-amplify-vue","version":"2.1.2-unstable.111","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.111","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"bce5e9bab1c036eea2ccd60a42c6c0bbdd45e6a8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.111.tgz","fileCount":47,"integrity":"sha512-94foPFleyJ/XiDE8TUnawustopF2e7lTXMNKNmqrYy0lto6zmTqx+IgtJMtwQq8g3oqLxmS5iEYXgDZciSDJWw==","signatures":[{"sig":"MEQCIC4HzUv6qBAKNdbq/g6B5JAonwC30+hPvsjK9FfJSSQ7AiB/1aEZLo2R0lr3i3iU8dxdpnbu3lQ/D7aXVWogleEP+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesvtUCRA9TVsSAnZWagAABPMP/RGjq0UREaB17Mhr7R/2\nDnpDMXxOYFoNTVnn50Xslg/bxapLmQjYdZmF7BMth2+z3UR8oyvlO+nWOyR9\nGaHyTWnvtM1Ox8IQ2LQfrNgpE6QAwzQIpbIfm+tFeDgpZGe0+s5YoqzNd4iK\nsgXdx8LG3HN2dQ70S579dtxJlcNNLvlFHaYGcvRN9OJB2EWAnAqYiuKhxUER\nn+knNOWavxVPbJNHwU/VcZqNM6wUIzG8M7d/XWruq/8197QgfeOV1bH9DrHB\nL0lyTpStchQ9wNQ2OOjFk67Sjx22K8IcpsX86hHq86AXtScfAIRXpIuWDtrL\ni54M0vK0TN13GvNjSQtipIbIsn4exmgK/OnT10lWWKnVPwHjF+jDHLQ2asIP\no+RFtDzrVZeHJUGb0CRS16LatnALZf5jiVTVOYV1ApdOXqXCZseGzsQzLZEf\nQvBwUn0Hb4YBAIBKIG1C0Hpc3D3Bgv7fmBO7sGfCOARPghJATmVf715L/F6a\nHVnHBXqbsD9zjszvzVgX3LfQvxClL/xw0Zm1loyidj5fCTFYJl/BRVWCs7TO\nPmnR60FDuJ6z/8eHsMMtJRBGxc+mtd5kOSzOpORCBW9s1M9cYCC8Lo+r4zj2\nIym37fJYWzReBtXFznQtdDqxlNXTjsGJJcXdeC0f9ikw347yytcA0DEYnI7o\nu3Bx\r\n=S5ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1a3cd7c6fc78afb87f9024e76288406065270466","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.111_1588788052040_0.6385391948893264","host":"s3://npm-registry-packages"}},"2.1.2-unstable.112":{"name":"aws-amplify-vue","version":"2.1.2-unstable.112","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.112","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"50ec41b18e184a9094669a0371e07ce8adc2cc50","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.112.tgz","fileCount":47,"integrity":"sha512-0wI/viQQsbhVF+Gg6p3BPw7OGiCtOPYYFnH2/VdOqPnb7CXzT5BFSQjxhrx4VEBArPgLZTKi0GUJTiKv4PPoCg==","signatures":[{"sig":"MEQCID3Qy17v9tq4I129pkX2noqxBJpX1w7t1lQuUZ2F49X/AiA8Pu2QtXi9nn/DZ5RHik65H8VHydz2WFJrKEdfKlBC6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesyx9CRA9TVsSAnZWagAAJCUP/3hM3IQIPwQVq+dj7Xuv\n9Z4aCKeKekmKR5jOoT1RpakvUkQGLC9FTL3AqKTpulwRK+DCg9d0M0uUAdTe\nWr8e4eO0x8MQwEGKsAc1PqOzuOhJ2TXIjwZoHr5yenN9bRfbJ8r6gjtzg6Ak\ncy4UaAA/wNc5BJRwbY2lmuC3kpGczGZyRFURgR0Hi0q+on2GemyFopLfMGDN\nQwo+EyAxPKenHnzFy4jeXEGYxQgtUxBSH3jIwWJYHdPDi0IVBG/XOqAzv77D\ndoZ5E0Gpy5Cw6iPBMx8xplUaIgf+1jfsmjTt7OmN7fPT8oVZXRMg/lWzzXMs\n/KA+3LrnkA33KLIsDnFaGCFQ43CzhT/dIXK7yyBRHNByR49pYVlD6w3KM1UZ\n4yCGbYt44JIkcudCFSfB5Kc2npMPAk4TQIAysQEQWWdtZ4ihhUQttREacwWb\n89urpM7hq6iJkKOqgEj6g883c2UT4Plg/RsW7M3uVkwDXd8b48IHJMBvyXw/\nHQtQTP6PhBL1pA9A8JYCeW/Wb6Jb2sjA7CwsZR/d6Clt5zcwkCT0iXezo33C\nQI1d8+i8VOBbsSX7Fa6ssNjX8kxMTdEPCHDUNmYbdyfBhAxiPpLm5mgxMIZB\nONc+qimTZCGlaEdsW+V2O6NfgP78ylQ9L/ibDhpqVcyZS6mZadQQWZEVt+bA\ny5yL\r\n=pBs2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b67c6d0a78aead904c90ca930c245ffb15a51afd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.112_1588800636987_0.06415347306806063","host":"s3://npm-registry-packages"}},"2.1.2-unstable.113":{"name":"aws-amplify-vue","version":"2.1.2-unstable.113","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.113","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"95b243281cfba73b1b34239b2fe6e72e466d3b9e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.113.tgz","fileCount":47,"integrity":"sha512-3NL2cHCbDdgWZ0RkY+b5hESycLKk1Bw0rFDRGs3nWY6VhsDKbxBaZIhHlFqChmLxLE5hSe2k4P/QxFf6Kal8Gg==","signatures":[{"sig":"MEUCIDm9c/TtSJzRB9f6DXz5IVSW4vU5fgMnFALuOsiVoe6yAiEA9+JhZgojv2Z2Im9FTZ3MnVHNnMiLc19H0xjs9SbCa0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetD3kCRA9TVsSAnZWagAAuf8P/i0fTVINo4GfoI1vzSdG\n5JlzHWXmAtOyDnK5GwukZ9XCReDZSC6jgyv/wR2QsLo4Db4zRoz+Lg08jYGX\nNtHvJOrKkbi3lWzCdSqE7nyxhQiqI9iDme9RpkS5/zH2EFR/+z9pFYLRNjGe\n3l+RIEEN7DV2y3EXpRU1iYCPeEdKn47CoTNGY91QBr7XvORZMUPR4nWIdhIx\nzhNIs7FXvY6ScTDLRiGJNtclM+lGhRdOJ/+HfXD6VL9EeSlzhaaSlp6azcnf\nNDdQRcjauhGyZ5ieBYG/FMUfDDsu2iwOC62LrVdsbF3t04CA2FY2JhsgxRLX\nCEFoFXrG5m1ptPPxAE/wtg0h3rkThvj6UAkzA8u9fl+tog2E3t7V5jujcqnW\nyuFM6BxXfYXyfD+TMHfntxUWKkEPs8p++yixdg3oVyxUlpBcwJ72bG+kDTK9\nIPEuI/XjuD/4ID/ZUbywENSharwCnwvkr8iD/MVtoVJEYRbf0cH7FbJY7rMq\nX3ujCHvje+/HxFm0EDMTHr9jj4N16n5WAm6cle/Z+QZ+zonw59yFtLnzg7v7\ngGrRQ1SgJmFDKDfCPlxdRg0egWPipLV7Jzms6hd4jo4ippB07q+zxhLk8PuS\nGrVXkEEh1ZtkMVyeATJ3OjnlphJd1+rIuHQNcy38DOmktlJvDuqrL6VOG/Qk\nyTYz\r\n=H1o9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"af7c9ef10285bc682bee0e95532c829c72d0929d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.113_1588870627657_0.804054427445162","host":"s3://npm-registry-packages"}},"2.1.2-unstable.114":{"name":"aws-amplify-vue","version":"2.1.2-unstable.114","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.114","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"27f276067aff16a0bd3dbc84269ac69b67646d8d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.114.tgz","fileCount":47,"integrity":"sha512-J2gbKf2fUf1Uo4Tl0gnDbvsYca09wWuezDK45M8RZd03rSdj6uXPoDnjVn5BMuElo+jvwWa8rEWdt7dwhqcxdQ==","signatures":[{"sig":"MEUCIEsFatMp5SONqag7tCtnQRVPcef8U+PXsPVtjJV3P8O1AiEAgCdPQ1eovMRiAL5wQR3fJdFst9h2ynPf84m5754SvgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetE7qCRA9TVsSAnZWagAA2woP+gIObi5JSpNiwv/7P2MB\nsvVVs+NnMhjYMXPu1STVjycrQ5uwK5j9Skjrvan+IsbxKhMjmtuse3R0zw6z\nzk2B9P7p81GavIwX7MroJsyqfG2Jr3hjCmBMaEt4ASNHZYasrsFQp/sqqOxj\nruhAZMuGLyT00BPpdRhOVH7rGwohFMj0VE70pYLEZOKoJYWxSOY9bumZ5BsU\nPX/RdFdkHNubTmETkpukzfVUtRfKoIhTx76aLfn45ORK5ZGjMez1kQ43mVas\nw/h80I242NXsE2lUZiYJ7QNvA+Fr7RwjheLSTcim2K4LJdEYg7H77hS8GYWa\ndsdqh06PKZbgmcpbPzFjmV2P0QuHeXadCNxRpBxlUQOvF3kK7hVUQWQotBuq\nlt59QrCorSN3Mm45jVipq0a5pS9RUuRT83mCdYecRlBKZaTecSlyD3PFNViR\naIpbcIewhEcNH6WEylvSF08Lezo0wxvzjdtGjyoI4iEYRtRPuV94TkrWYbOl\nG6WIqgJKd/0lyXwLqWE2seFSWR7mVneQ8fBFOAb+2Y4E6fQ9x8Jv+3tniIxh\nFqjiBaCqadbGHuUcx1DA2HcNAuIIaC06FHbm6O9/hXFIsU8YREpeqa65CFEx\nZXl3TBjMPwFosTNojGkJBl4BHyPM8WQc88iufIMownxpqllTH6VOw5KdXHWv\nz4a8\r\n=tUDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3da13c851485eacd72352e9a28ab98c572b31ed2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.114_1588874985304_0.4052991261950598","host":"s3://npm-registry-packages"}},"2.1.2-unstable.115":{"name":"aws-amplify-vue","version":"2.1.2-unstable.115","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.115","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"208d684124b288d0da9ee91c55b6e0c78676b0d8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.115.tgz","fileCount":47,"integrity":"sha512-Pkc3m5HFpY3ycDjCHwCDI2CzxFlRVbEcqIKcz+3Kw2wjOoOQbTQQ7euOWMSq4+M/p4M+UU6Du/0XFKPI7EqUtg==","signatures":[{"sig":"MEUCIQDrgOT3ha8XoWJmVa4RiwVP7raX/+jCAV0Kr7vOyyGJgQIgYEwfx5/3p4z73smrB4ZmQF0zds6Qk51uAf6qYxVw7TE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetNLaCRA9TVsSAnZWagAAbEwP/jebCPEMcxxxxmLfgNEt\nI2hDJPFtBJZrfZ1own0DA49n7qUWn+bKHB7DWIlD/Tao5VHK2yq6fnozRr5O\n/qsYk7yK6o51xlcwyTaTCFXwqtIZnvsSGb2Rn03CknuEXHzGdwsi46+zQtZL\nkudxYcuAd5iShipirgjhW5iMEooK9sXha+jY3IgXYEiEByHpCCTfNs7MsgB2\nfFKtPhz8b3tl+8jOJcgOK9aKIMDAtA7nAFL6n4zV47C4Yc4pIVZUcmYnT54n\n4GwSpoIecMvs3eZBrh3MQXHv8kZkb3Y6Q318MTbJEwnb+yCF0b3h3mpwbVgF\nMCq0WDTt/uDDMT847TwAblmSC6NzoVAAIEBYbPhPr6azoa5STxHbzJ9ITKFx\nIwZhCxcnWQIkQfa0MUhMvF2Ki8km29YOL9lCD9p2TXwd9uRirzRLKfQHF7sS\nctUtf+v/tQgnkK4BAOBJ2cLtnMbJw4GvKjs/vZblUHQX03iHL6SGD8yqcVVt\n0wUFlk7h3FX3BfMS6rHe5lj3GP3Mhz+ICDi988Meig4bI0hM++pMGaJDHWxM\nRvkJF5RkMzkOeUkj9trTVw33HAFAF9ZTSsmJG+Cd3n8bdCwRvsa8Dql3qm9r\nizcTcb4JAWdio/hA72FSiLS7n9CcboKhTbLFcaWqtETrJlZHM76SBcx+9Xn1\n7e/B\r\n=gyEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"acc48cde6c7c8cd60c5dd1a8d08773a61e4b07f1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.115_1588908761764_0.41208812376134274","host":"s3://npm-registry-packages"}},"2.1.2-unstable.116":{"name":"aws-amplify-vue","version":"2.1.2-unstable.116","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.116","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7d2eca88b54927f725d882570e47b511ac8687d2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.116.tgz","fileCount":47,"integrity":"sha512-+uXNj0idP+vo1K1Q3mrRvU8wl+sRKL2lzSe9hkiRvFnpu6zsHnP0mLshd65KqBR/aaGuXgEccSFzrq4C7LieLw==","signatures":[{"sig":"MEUCIFjTPTPJBUDVtJmTug86H37/y8paP8IWU6sk3ggr34bVAiEA+FOzRdJ/hnJygSFuCuU0ySi8DJP1oVPHwjr6kglc6hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZUxCRA9TVsSAnZWagAARUsQAIyz5/lAT7L3MNteqfKS\nGoMzcOQpbG2NrdEBEYm9kxKdyI9/qqrcOYQ+2j2ruEH+Aku7g1+Sd78qXeJ5\nhEnyWVBFTci5w/283MYMpQlK36YVxpDkvGuQyrJiFE6bkRuGY1mweiVLkLEL\n2PUauGX2tp64oCxl1Qxqvul7fKXfAMhKVN/ivzcq/AbLKyQB0uT5hbyz1TWh\nad/xDYvQQDs3iQ/4EJVQdrZV69tfGxGcVtmPOHZ9Lg2BS1t/lY1swsg5GuRh\n3XDZJsJ53fwGhvC/3teSpbauhPrll2PHbBQTKd68+kGkrcF0GGfLML/uoV4r\nkIYzMi4IVbblWk8QOFcDh/v72VXqp4MgB5emYJL/R0xE/sSyenKWO+NSjggb\nhOaFIqJy449UwJAqvtK9VdSCEnPPaI/CThPeF5TQztWZgcwmrEbv5zPMDsi2\n2Iufnc/8kWfSwPhFBmcpaSu5r1OG2Ok77zzX+FDcznaiH0ScpQwiEpFyyGLZ\ngi77o6Gupv1ILXcC6hUodFTN3KdQwD6tFAy6uwsM53oEmjlvVgrmbPuU1zGt\nCrjh1ZDWtwoyICixButvZjh7Kfmum2YXSz8Esxi5Gb7LZDpxnA6Teqi+Iv66\nPmc1BThPmbEuVRq6S4mrJr4wH6/Dief5fTAn74Y+MtgQGYSzPTX5bo/malyw\nkc3J\r\n=2cha\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"160244bf805b3065b6b297cb4469291d4aa67631","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.116_1588958513186_0.907264992003221","host":"s3://npm-registry-packages"}},"2.1.2-unstable.117":{"name":"aws-amplify-vue","version":"2.1.2-unstable.117","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.117","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6bbe164d6cdcbeb23cc56b6ec25ef5bcaa7648d7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.117.tgz","fileCount":47,"integrity":"sha512-MpLLo7ku46AwJMSzgtnShSOvI3itqYVXw8YEV3yU0VipriQ/DkbvPQz0AwCc0GXh767/U3rAA7TpXjzMDweRmQ==","signatures":[{"sig":"MEYCIQDvHh5T6bjkuywC5ZIRd6JICdEMdcwycBI9/oOqu/whtwIhAJuMQc3TMw5B6ER7r8bVGOFlehaGesfwJQOdwM1PNiLO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZ9fCRA9TVsSAnZWagAAEj0P/RWNlJs91fJxoVkWrcgU\n1FKg+pLseuN+UBSThMBSTUZdUymh/wFnMZm2Bp/kStrnmHrH+9hocfoIGvAC\nChhFJiMGiAN5sGyCq2Z8Yta0feCDm5EroCqaL5yrugTEiqM4nKPMcR+wKNxl\nq/XEYd7/p5ZY6W3X8pgWu5mDtzIWKO5j4s+f+8h57DeE7UeMk+IH/NNjVXQG\n8QigEfNkWTcbdZnpPdC9WgpjysN29CJ8ozBFlRyatXIlKUcRjdQyc7We7IzU\n79SHlLj9CiJJULikSed5AUtrP9DzXcSwxgcrW62wn3fCpLUiI850AVn28qnf\nx7b25B32sXLWIOvePJq+Ki3KP29viS6N8Rz7/KQC4++8E57NrNK/9axIyB4m\ny/IDkK7FZK98+jRj/+IFUMxsOPfHo1Rcvnr9yU59v0+3kLcB2cDxPyXPiOSW\nhUgXxldf1gGZ4j3kj2LBo1GmMPPQ7tKSh0QSoBR68zp9vDkqaKdYu5qsKYKa\nNCBULzBpwgOpTnEQyrIv87uSl9A1f/fN1u5kEe8fqREHVngyZksU0efqi/C7\nTiibzdWPUu8lMdDGUz8lRmCktGAlMCvUeNgR1Yj3mLUCPA0wl6E7xqbjXFQg\ng8BC7kYnrKXqMV0yQbf75x99s7Ak/V3KrAcWwZppMxbgpJ2za/5l2B9bqKJN\njHwc\r\n=ANNv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b48c26d198cc25dd92f1515ddf2a97deec5c9783","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.117_1588961118757_0.8959476282069763","host":"s3://npm-registry-packages"}},"2.1.2-unstable.118":{"name":"aws-amplify-vue","version":"2.1.2-unstable.118","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.118","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5f05698b5489b0e1e78a61d30d2b86880a4a4fec","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.118.tgz","fileCount":47,"integrity":"sha512-0bVV9JO7G3n1LbzhX7GxpFek18WT0VrXCqb+6ZyU0jOgB5wrE9jcNSqkTcQBUwNGLJF1AsvmTN0xhK1/8QulEw==","signatures":[{"sig":"MEUCIQCEgmc24zQr7d2KDDm0s56rSbohzCqt5qR4zKU+f5l6XAIgUY7XSl4aAgXvTo/dlZRV1FowMqBK+t2G0SCe/1yg6js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeta3SCRA9TVsSAnZWagAAEXQP/371mDUTNqpfdpeuYRs0\ngQXSOlLnj6ULlSTm32Kk586U0EmkLUaR/8R0QdptZ+H3uk1tWYr10+BA27TZ\n+CXbQ3BvkuDHBQVw7vfUhN8IW0Dk9LpZBhcLUTtytsAZXu7DYrAH6+wt+vna\nHdXrIiHwGWCU6aIphQoLrwCVSeoERbFgQef9AwRNJ73YZZlO5uasUTcom9Y9\nQBbRhDpOnEQ25dvWIjosPMC8nLpCxblUpoMtyWDl4Tj8P5TRwf/BLsiJU+Rj\n+zfIOmD0oNuJtanOR7ymREFhUKwan9OCTrK9hkcZy61irInPwaqDSL/PtTyh\ndVWkVkOQXs+Uc8ycZ+drPuMxknWs99nX5KtIykc7cAz/4H0Om5PK0+EypTu9\n7vDLQP0jJUxz1OPvwYbmqzNUrMfKaJBWdIygtQU1W1yhwtSlfiTOZcgW7sA4\nvl+6fMMfENvEn2cQT5g2Ph+wDf4kX2hx26ryjjDRfZqC168h0CvCoCdW9209\nyvx3rhC6+hsVReVGn7bw0brt5jPdLwbWmN6nmKUt0Ft4CFwkJ2LmT+CLRbt0\no5lweQ9iC8iyUB9jhVg/IlGcUvrrNt4aFkXlpRK0avgtg0Lt7OvuArL6kEQx\n6lRkAXzlrW5q+nAzab2ipFxojJ9NPJiboQrSZAtl45P+EqgWHUs1+4rj7U9o\nI3hZ\r\n=XbR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7ba56478f8da4ce538198615d73474da618c8b31","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.118_1588964817982_0.18188131725847878","host":"s3://npm-registry-packages"}},"2.1.2-unstable.119":{"name":"aws-amplify-vue","version":"2.1.2-unstable.119","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.119","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"26e3f8d2fb8466bbf8e668e4f0526cee50fed10d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.119.tgz","fileCount":47,"integrity":"sha512-Kj/h8zqpVyDZhqAE3+R/JlA5TLm4H8mMj1PZyGrz+a4cl5Conu/Ijc850ZxsTi7owlCAyuFxKA2O/90m3yBoLw==","signatures":[{"sig":"MEQCIBeWBB0lTYA2BM0VtoABxZBh9l3alX38RCGZOipQv6GfAiBMqD9R3M0ecEAmqp94CBUHlLl5JDaEo3WnCW3U4bsCKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeteq0CRA9TVsSAnZWagAAnjMP/2aMiJhZoDoScvBOZfA5\nhquo/3Td+FPOqQIDZueI9vbmL+P86rICSHLz62xO4CjakGH+Cq28o+es9AfL\nPJL8nN+8n0vjGrpQpMBi6hWMedbSoz3rzu/X+gztKplcLGwtFnIqiPZrudb8\nvaE3ofyrdxglzCeIeiTYGxyz2W8ff+Jcmyycshm8YWVOtBg6C8tkiPujKjUr\nIIQdMeNIcySaZ30aDDNm0FY2M0Ou7TpuBb2om2mbAIMmbIpxZhq8tVeyP2sc\nnw4m3VisQohvkG1tYgyAYNl4zga99ftKuyzSwPFtYGCu4mO7Yjt5q0AS1Qom\nfmzQrH2CKHVpwXgXUwHCBC3d47o7+IF1HM+sbJS29JKZXsiVkwW3pvVzHq0J\nyiFIrEtgwO1L/iF9h4m2bURcmFFbjqizUt7ydqeozD8p+YMLHWATrN9+86OU\n4QOlSSSqmqUwQlzQyW49iGAEEjVenFMFlnuTkiOtlbVCDqHj3k9RzuA0e2Pd\ntTRUk+HdqYYwdFtgxPkpUERi991mZr5KkTPZJLl9k08NuR31EmlScvk9Gw94\nHpHr7deN2DvEQukLn1zwao1OacnW3SP7ksy3mpXXveozBEknEaTo4GfaP5/R\nGvXPKar61/QH/wknikmeAMMdtkvPW3NAplT8hdhA7T1yIQapijyXpw3kFmae\n03aC\r\n=oCyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"31709c0a75f11e085f7fd8729653451d9cc9d488","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.119_1588980403867_0.7304762449677162","host":"s3://npm-registry-packages"}},"2.1.2-unstable.120":{"name":"aws-amplify-vue","version":"2.1.2-unstable.120","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.120","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"059c9206f130644459bb2dd0979361a2f5cd323c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.120.tgz","fileCount":47,"integrity":"sha512-EG+lp/K7pV9ozcehWGMqSBm+dT5Im6H5Z6LnKsR89pMX6P2uUVRkF8Dltf+QSojIZPPzIHlJcASLh+jQxyh8JA==","signatures":[{"sig":"MEUCICvCk/aHT3q6Il0Wmt0DLf79PvgAIrIY8vfUZxkP5Z2dAiEA4QQ8yRkflW+sLLunN4yArqxqUE4qBB3+AwhPFZnS9Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetfIPCRA9TVsSAnZWagAAQDsQAJqUNMxuhUjACKTJHVok\nqC23zBovHX7dr1DQlk5wAI2ZcNTiQ4lsLzy6IWi110uzTdy2ex5tulVqB9yJ\n+MVLMxXSQM3D6Tk570rv4KvDnSTzZpGHhqzXR7fUIQgrzZLkcJRlbtPlmEOV\n3+2/eXyoRBu/pR1SONnHKAxJ5TaTJftH4Ex/7kiYxmD0/kwtWmpRvxIIErU5\n4NuBegzBJLXAGwcwBbJrKDZUCUmaLl6H0MD2Om3man3OTAuGtzuhHIR+P7eR\nIXqAYeG/Y7WTQ2M4rXyvS6TC7Y2/oeToUg04nxWi7mTK8QHrs7oSEGtw8df8\ngvtWVsLoEZgqmtXogKUxSIKd3HVjVth2SEb9UbIWWbY65LDTHysfK0/505iv\n54LK75tLP51xYXQgFX6Ehf8uKmyCd6wcgpbirbOzKqiF4g467WKVMwmzbGcJ\nLTe7yTmUiv3YVYn52CZZFx7YpfHk8flj/72rpFCPcHhnrabmdXi1LxOCadsP\nOIMImMokwlNz68ZzWmgaL0FA4/y6XMzqNofdpBzf3WPPUnNhlGGnqmWHNeeF\nptFOsCQkYPDBW0mHLLc7rNF6qK6yqkE6scoM37ZNclALI8KS/uvcHQ7oFLTG\nfYKzoR8MHKeyuJ8xYnrzvb8j9TSmRQUtK57z9dBEXVL/WuVFYjoK9F7fGjT8\nN8zZ\r\n=0uyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"491414523cf81d3fe07f4b86aaf5c0e3540be561","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.120_1588982287155_0.485304336732445","host":"s3://npm-registry-packages"}},"2.1.2-unstable.121":{"name":"aws-amplify-vue","version":"2.1.2-unstable.121","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.121","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ee4dc763b33408f8d2bdb75aafd0d611b129d6c8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.121.tgz","fileCount":47,"integrity":"sha512-CJU/kPE5a5qKfeke649oH2D9cIn1LvTM9CID2gz7FeF0iuDGEPMLw5Y5JqQ19Ucp+AUjm3Ti6owxsK57W3PFGg==","signatures":[{"sig":"MEQCIDrdZTsxAym0vLAn18P0rqYOTMqCydlOZlGaOyPG9D/PAiAI8BimgCtEc8RR6Ilod5hlBdhJ/Ar5zGoHx3wIr43xQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetjBpCRA9TVsSAnZWagAAFm8QAImnXP7IFTyBlnIOhcDH\nTdj3fsaRyl+h0O9wlLR7V4rZdVoBZLjO3zcuZK9c+a+Qd7pubkojLzrlGzDv\nzysLyWB9NANCU6ZuS39W4iL9JezY4b5vhALyJjGgP5j9vCCm1VoCAC1LLmg4\nKB8ZlPMosmC+ds9Ay4/8DihgbbumVwJh/tDuM2O5n6nt390ABqncoX8bH7Ro\nxlbLEOczUx0XvtK3tAM07AO/Lv3XtWExQJJchsJkJUB9wu0S92Qnk7lRQ1sI\ntQkPbYwA1Dhd+f9keqa3X8FUu48YNdXJpCUKYHpYmPhxQxqrCn1MNzK1I5iL\nVLBJLZiNkLNIT1ykJDCXiKW5eync687C+S5nOZoSGpG+bq4iNcmx+kavk/2P\nLJn16t7zPJ+DNUuJRckvpuPxKUcpUf4XMfCyWpc93iTT4PKVVcJxuoxbbk+2\n6RffNwfSRL63Ck+3f/oFf7kPFn+quTKtkdceEDbAh9P7v+gM2bT3lx4PFxGS\n4rCO694x4hsmzlUoBSqqQIT+cK5KM/rxUR24ouI2fVw9oMcZiqBdofwGigiD\n8o8wdK+ixAqPPEU6WPb14ry3poGY91qr6nLi3vaZhLNDadVkZ6fkA1R+73i8\nhZ9DXhk5paOl//2NuH95NE754RwfEiJZo6sRuBQkO0wXn1ljvk510Q5uzYlz\nJlFD\r\n=QKcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e9887cee066b7cde991aefb8c632b8cb45f7a996","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.121_1588998248511_0.8756290336618651","host":"s3://npm-registry-packages"}},"2.1.2-unstable.122":{"name":"aws-amplify-vue","version":"2.1.2-unstable.122","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.122","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2ce751ac75109d9944d3decd3ab4f227c8860f83","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.122.tgz","fileCount":47,"integrity":"sha512-J5kahR92Egjj0XJLNRLYa9vXOsSGHLrir7MGJbyQ3IRHrRdDU01FZBYnTEVwWCxMlCvox+RKzzBFO6DqiaLAgg==","signatures":[{"sig":"MEQCIE3Cn8vo7PGlfqrbNjJZMBzpbseJGyxi/t+65YmbmVShAiA/H+TR9WMZGJG/kpqpCWYj+Vii5qIMEhgaM7Ov50t0Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua91CRA9TVsSAnZWagAA3TcQAI8pvZLRjPCpy2ai/kc+\ngHP6NbkiqZjvbdUN6rBo2M0WM32wcJI3TeSB23s/E+3fnQKH/iwBErCRcEN5\nFGfHi87eqQBoBhPQ8fbmhohedtoyKF3YTkCH88XqlHVDFWPfbARk2tC+GBW8\nd4A8Z5Q0/P1+xjoWny0csaEAtZqjvm1DynKBN0a5wjj+m3jwZ6ZSfggArk7G\nm6X3q0oG2CNEgNli4KHgzYs2VhYB/moLDbwvK9Ry9yPBCw0vFdiBKvCmQbVd\nmC56n6Fa+FfOU4+dxR2PtD8ZWcehr71iaoNF/rHJqW/HOFA0UN8FdZlefefy\nuj4sqjNCxYjVuAcYPG4gCaN6g7dG0zcKeqoBXq099q5/1tN5sAi3+1PLcz1e\n2JTjVa2gDCnDiC4DM6JyTk9BsjhZZk9QlLhBrtxSPlWUTGDcnGFcF/vCPeMe\naAYz4acj01ojhY2z39uKn+yNmhTRHE1ue3hFXefRIDf449DkuCYT88Jb+KdU\nUMXlawVGQyNUoIJ01ECbZ6aVp1DqMk7+DloA8hXgmap8etePy2RW4y77U0Rl\nwg7gBSIVkY3lC3882RSGskMpyN87ISGj96ydxPmujm4RdKJ+DZbNKvhzv7eW\n9U5J+g8TmhpTMg993DoUH3XWr3CFjb+EY+pAZpX2dH1JbhoHHBuw25eKConL\nbLZJ\r\n=Jpzf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4e40512ace51748dd413b59850b5d9f0eaa0c66b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.122_1589227380769_0.7886699474884098","host":"s3://npm-registry-packages"}},"2.1.2-unstable.123":{"name":"aws-amplify-vue","version":"2.1.2-unstable.123","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.123","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0d7cbfb5318e5e0c6d537560daf7774f0d3718c1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.123.tgz","fileCount":47,"integrity":"sha512-qc9J2SVZqqJ8E16fbBwUmX8m4hy2rJbN5neq+SJxh75hIYtPcJi3xkX7pqjYC7/YcR97gVjPVdL9E5dcfWbgxw==","signatures":[{"sig":"MEUCIQClnZeXuDLEQSAUPROS21DQWSHv6be1zmb1eKT/038/OAIgWN2g4zBS0aG667HwVIvo4Z8kmvzqPKOlPq5ldDGwDdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubeyCRA9TVsSAnZWagAADBgP/2pb/4dV4fqOjPaJtBVP\nR94DbkjY9kTEFPciDTE5/B559DTRdDgsb8wzbJCLuqz8VCWFgLClPkyh78fM\nu0TDg+YGnloNEKbJxno+dEh/UgloZ4MGZ1W8NnKvzJ2SfMzFGeaSE2joDP5d\n3BiB2FsjiznzmJQSaYpnOrlfjTlQuwucPCNvL79RFFMfdfZplgAv/CyUYthL\n+8UP0sPDt/LTcCzRqQPPFTLy3FcgDg6yC6VxlPuETtT5gJFfojm1lhthnX6l\nBDXMyx0CLPan81gZHfSUxW3tVIhoZVwugRbP+aqmMiGDi62WM3ShbBn5HouA\nc9zSB0p4mAc1reAZsp6Q4gcyTB+4qgMHNWLvIBSDRA5w19IKSKtudL4e6wMP\n+61AoTw1hveT28YVriqlNYq4qT0KmPSma4C20WrvpPK0hIrCXy+ONm3caU/C\ngn84NvHsVN5BPtYn0VDt7OU0LX93pjkhFf62xe/YxuTfM10CDagBTW1va40J\nK82XJFSQI15KcJ5HxnYUjbK3D06qngoK0ac3XTuMDeYUNpf5urrZqz0b74dh\n2l122Zx835pufDnOk/bww3slQNGgAVyencp1Y7vlLt6KA8jzSHJ3Puzu0WGr\nrCt1ZzTV7tXeub055zPkwF6u2CoYZka1HygVDbrV9/z/00l7re+9nLGDxNGm\nWtGO\r\n=CwOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"44f2f0cf7077f4e50dbe944cd04465ec148e652c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.123_1589229489486_0.41274340984048097","host":"s3://npm-registry-packages"}},"2.1.2-unstable.130":{"name":"aws-amplify-vue","version":"2.1.2-unstable.130","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.130","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b4451619642d56631efe8732c7bf7b4cad726075","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.130.tgz","fileCount":47,"integrity":"sha512-/lcpfZALXt0Ne7vFODWtQtNz19ja3SgiIDfityc66siv0LfDDmrWn4NnqXw8Ncw/G7/KI+FUnjrjU8Irx62lNA==","signatures":[{"sig":"MEUCIGCXlMynyezFhc2qAM30SRHnUB2G2GFkQj7VGR1kCoUbAiEAv3wK3zQZE1b7rIrkGtu7nSkzmX5WGKyuIzRBcf5gIMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuvH8CRA9TVsSAnZWagAATZgQAJthUwlslzLJHukAgAUy\nzPyCkZm+25MjQ9Na1iBG3l5fSGMtq/8RlIaKWcYNLQlPmVtpRQxolqPWwRH5\nekzTM7LKcrmPEfore4ulKTvlBgu8FWORNME6HWqaQ9MsXCxaN2TY0Fv2+LJu\nz/9s/zpYO1wF46kI/BdR3nbdRAfMXg2m1R7gC5Odt/eI4LW9fxDTuofdH5+e\namr0C19L1ywcGvHWytMSK3FHpDdse48Yj7wwfUcskW/l5JRhCss0VAgMdH5T\nIO9/S6Ab4H5bu20cyO4iLv+5ogIJUD9uyiwhVxMbx8JM+Ud7zGqc96zeo5bA\nBimJa4Lgwplwof/rniw1ckQ50kCN/IPg0TAvmJNAipJXO1fA1ySPdpNBQ0qW\nQ0LkTYMIjuAFmd483f07mrzx6/vWI1tvZ8KuczPuSHoDWLmhZg/s2g4J79Wo\nCrM4021BAjFiu/LOsi9en983uF5D87UqLUr5JPJU6aJH6L0qNgnwLGfCKV2n\nFM6FkQYeLdvFLJpUwNNKhpV+V9J460RgLTsBDrEJfycWfpH3jU5ZXC/pdFV0\nRvBgUv/IWqOPyas1H7gXTk33hkOlq+GEAWpyC30Cnxm1NyG1IEzUqZ++2v9B\nPrWtVq7LS29n+GlmpBxfqVcJkZL2PVRSp9jW+6HEkFgeCr21csiyeRL3FpVo\nc9yq\r\n=CIo+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8a8ddc38175d3535b5742bf17b7f52edd9ab7531","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.130_1589309948036_0.2809395261714003","host":"s3://npm-registry-packages"}},"2.1.2-unstable.131":{"name":"aws-amplify-vue","version":"2.1.2-unstable.131","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.131","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1f7387cfa5574236522febe925ac95ca5178b2ce","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.131.tgz","fileCount":47,"integrity":"sha512-iPDgVfPeooq43grteipH51JjVybrVZs7CgSPYWeKbI1G+n6cj4CR6+VTutYdnBQ1aKTBHwkD2je1NrFfVKFbDQ==","signatures":[{"sig":"MEYCIQDA91KUSaqt0Uqc06uty89YMeCi7ZUvx8a4ECeT79v5yQIhAJzXMQPOIvVSlbQGxEl5gIbpmmbI09GEK5ZS5aGaJpwe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuwPACRA9TVsSAnZWagAAYz4P+QHVDAbU5XUbinj1RKqZ\nesvBcEHBwKpj8buqK4isfKm+ADLe0OU/OGLL6G+X9QUwSMRP1AXSdC+tYl9g\n+13STQ6YQ02gKbETdk0cD00Mf7yZVIQnLL4js2OjXTyC0HzNWY751cr2OSdk\nMveBGUsTAbrAUUm/C2er7jEXOjfrRXQahLdmR+vvNF/dgtxnAucMNDoaHdoY\nM5jS77rt/hUT/dzS3iIh/vDUMQlglplm0wNCRQNOLTRD3VmUIYf8IoyA/rZb\nAUITa3JxmVXxS1glwjYWH0J/xVOwytphRu2/X5qgcGi2jP8tZ2u4xtC/1TMl\n12zeS6kN36uce2vrmEHq7owXztRg+XAotp/QZNM5aGyLvIrdY2G8Md5xeSD1\nTwhp1ge9P/09+EFmbYJ1/AfLwAd86I/Daa9+FLFS4io9SWK6r5wKRVYwLm//\n4KImSMecsWfpTYCsIIIbCmw77dsbGPWdvYz5WY0IpryPwgCvS11oWC7FLzU0\nLyc54LhpziM+9Ew7n6Bh/1nD8KfVF/bRbayKh/GprsV4A8BsFXT78L+ohdgN\neRRZdb6hmktWuK9ONiDZicj4yNi0uNmKzJFZMAcMAoaDX38Qc2tdE20hlB8t\nlvUpxeD+18mUFqsOPyZXhHUdCzoRc+Vd2cLPK7IrfuTsTSohcX5cJmmrc1hY\nLOyA\r\n=Gn9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"87c9634fa278caa29c0b2627a4dd867505605821","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.131_1589314496317_0.005794014847860796","host":"s3://npm-registry-packages"}},"2.1.2-unstable.132":{"name":"aws-amplify-vue","version":"2.1.2-unstable.132","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.132","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3afeb4824c60bb5cdc85ec582ff0e6e30258907c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.132.tgz","fileCount":47,"integrity":"sha512-2CfZ5FyTUzFYkZknHsaV0wHYO9ohVRHXIbMX7JbdNXwinS9v4bOWKGHIcScoDlyK+NSD76A3+p6E1+UwpEnQMA==","signatures":[{"sig":"MEYCIQDSFHm62an95iWxt9MdJdhvMNJe6dU9BaBZ2z08H36gMAIhAOK5YIecCXZ7ZA9nbnoF09YfokvObJH0aa2bVO5IIxfr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevESSCRA9TVsSAnZWagAAE0oQAIgx0S28Q5u1CUHGDuiB\niM20CPWodOWgH0Zoh/ImttY8PQcxnIxtc1mSF5xWhZhp/7BOGwN0b64ERXGa\nQ3X5voYS/zrfwdgyWuLgs5mjjz6itsp0ygFAef6ae+lIfqP/Nw21Ot8DArYq\nCqm2AzRc5fQ67KRoVWuLHZB/sZsuMcgYCY/DlRvLN1Ss5x5cjdbBY4JKc7Em\nF8cygJtXR9SpVcD6cyKo7XkoM+ZPMtVrqhUJwVcI+DdRFqPMckeRRJ6fyDfm\nlXSb5rmDRzZVFZ2ikBzD0vGV6hQMfWhKs7Hun0GFhew5rpYRi+7WBVuGvpQe\nPtMACUkBbhGtqRNCKF2vyoPrKkwcy/BFqOaR/n354RQZpfTU+436Qql/naHU\npotY3k1Upyoupusbg1jOI1qVsoWM2RPIX159hjLBEtM8zCt2QNKnDmgOMFBa\nKE8MBhKvyIBrh7ROLOI/LMFOfYAwfEAtdCPWz3UVwzE+0lOoonxqmSonnO6o\nYfczrKBgwqTsxn4IgbA4XORN/y/njTOHvMNVlXwqM6A3XLWLYXBnUhqkzK31\ngN833Jy21Wip2T8DSjKisJu16nOJptBZ+L+hw7ibgN4BZ+gb0u+Qt5sMBxfX\nspPHHEsDPo3CcIxmGABo9yTvTSH9xQ/hiQpHRdtJ3gAQ9btzgDurce6b5nQU\nwnFk\r\n=iM+8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b80c4d9a6343ac43fe9e32407b8ace2d86877017","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.132_1589396625505_0.41944624805872976","host":"s3://npm-registry-packages"}},"2.1.2-unstable.133":{"name":"aws-amplify-vue","version":"2.1.2-unstable.133","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.133","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5eab5959ab9b2f86bd21cf205ee1393a411e5288","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.133.tgz","fileCount":47,"integrity":"sha512-ikCZZfVRS419nyoZ9wYwyPIzMuxrwaNlbZdwJzrG51CKhU3zigRi9oMfZlzQ6LLzjKR5ep7sccJRboJMEiUOIg==","signatures":[{"sig":"MEUCIQDBMDmLmqlRSiAKu0Mc5SzQP80+C2+mFebC4YTGH50G5gIgB/Fpn/5lwdCxkLd1F52CpdWfECi5HQRIkKZoXa2GzC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevFMhCRA9TVsSAnZWagAAUuAP/AudB4YCzJVdmhghcTuP\n7v7zYla51lzhkX5vlRXd4pZasqap7WGMrGkaHqn3rzTyC9p5yd4G0XWYCoXQ\nWy99eFn4sJQ9C7YJaT1yUF+O2cpBoUrTNy6TKH7EQfPU8J7C0JM903Xmalfb\ndb7DSvyzzNQLUVmHsQPRj45HREhm1CxMPmsLg4hR7Ml+nPLOp08hgrhZQqCg\ngHIsrdexJ228Syjro3X0yR90Tun/JQkQyh2IkeOAE+eN2y0kMs32uk59iHDb\nv6+hLvfXh3WRxXbH+1mB+mzH/Wjtovx7nCDOG1IKf0GxaxnuCHmUokFBIAHJ\nPbscBY3PDeKDrJrOt3eGHt/+Xed5IHAhJM+1YBegTnfyha+xRJeA/EL1/NHr\nlrX2YUFfb2x9L4Q5/RMEH9NdtO8Jn9ajxmf7nhGScz9nv80YxIe1A3sVnVh+\nXvcilG3uBynHTHSENngnsESA1kyO9MHv4b/D9cdj253pJ1D32ZdRYzmEN1FV\nAxz4+tkMkgQJ3pCKDWTtjpXTuPAMJyO7+YoBCNie/RI1MRddyzJSa/kWE0P4\nJbem8ZRvm3fBDvx55Qo0Ivrw10GT6Ncy8g2uTlFgkr8HZMh+GX6AJeTCc1zu\n3JEjrRqnYdyWeDiRq3XspK/s+cdl6o2fgb/MAiOvpmLkJNtj4Rgj7Ro6uOVM\nPcL+\r\n=Tdg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1123cef546e906ba1beecedecdc60b3844f38297","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.133_1589400353205_0.5972087175049376","host":"s3://npm-registry-packages"}},"2.1.2-unstable.134":{"name":"aws-amplify-vue","version":"2.1.2-unstable.134","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.134","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"82da060c32c48a2067f8a8a2a52510e66ec88d5d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.134.tgz","fileCount":47,"integrity":"sha512-01Y/A5re7aaocYUUtjvr5W73AgTuMO4orPhRlBsVTYIxMKMpZXlLPUtLLYi0CujLkYEEKf+0qXn/GZ+lXIoWVA==","signatures":[{"sig":"MEUCICzKKVVkmLnLzZMM1DY7s0CUbSBZpwl05s2yqnO+JLtXAiEAyxbfWfVxxjhwqWqSsvBq7oM/OgpZ0/9jntxtfzdTCbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevL+5CRA9TVsSAnZWagAAg34QAJQn1Zv8pmptpHM/fwGZ\nKqE/qr0Efn3qJGIEt+ut+bpKIKEE/pRvupuWjvT9IQl+pTdXNAybnelFpldD\neFDVDiPg/eiaxDubWoJAEtSKka0sv+lCQcuAyBYnrnU959CXFIPCocvCutf1\nBV/ovzsiCPRM63VyS8Ynnqmx+MswgLtvxj6gJbb+hFYMR9PMd+HoZAflGEFl\nyltmQsdRcJRVodTfxVc2qMze87lF9S42ewHWuhTGNOi3I4gCWCCO3//K8RU3\nMCJcFZ1E9AlOXiBak1zHp/DPmxWM2551vPMexWGiyshHQiPLlzvOON9+stS1\n1YlViFI+YC0yC7+vHF13naWlTKbMDoDPQoAVzJxqKSjwZQTPpgv4F+HjCbzy\njJedZAzqZ7Yy7eYdZL9fvAFMiF0DAeWlw6eudeEFGitUb6LZ6KdrGtZrq+he\nZoCqt7a+zmoQsUWm5rg+ihHAJAQzFFTys1IEWyglYKi4XkZ/3hGi+lyYuZiH\n8jtTDRXDkr6g/e54tofFxccBkyVjDsYqiTt5cjtsJjg8IqOZSEDtuIbVY8Qq\nlVFSxz9UQwdKKU1vG0RCrBdnQO9q8XZtUbF6kKEVSmj8uPp9t5Zhi6RwFzR1\nZfhHRJOE+bHkB10m3rWsQxJ4f1G8jz/e3mo56BpJrh+DtMf4bvO39IcuTaox\n3bJO\r\n=Ex2M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"437af5cd20f3caab2e1b7140772641170fc94624","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.134_1589428153446_0.4322635338060514","host":"s3://npm-registry-packages"}},"2.1.2-unstable.136":{"name":"aws-amplify-vue","version":"2.1.2-unstable.136","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.136","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"87fbb8e31145344535f149d5cbfb349845285cba","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.136.tgz","fileCount":47,"integrity":"sha512-LMVvYdaDrQhten1qCQhiGcZvP8BsxgOBtIUkRC3oJP3B3ila9y+pxTOCadqS9awSgCE+Vy4KKiGgJ/2Kdfdnkg==","signatures":[{"sig":"MEUCICx0dXCjasoOl8MXGBgRBNnohi/y6suZoVKoCVM+cb+OAiEAuOozEsf3QE2WMCttoUv3a+w0FHLaOE7OK9ZPwRCWrEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevYxECRA9TVsSAnZWagAAai4P/3t2ve8395LG0GGd/VMc\n4VReIeY5RZVBpDFhvcrKm40O+K4C8NkT/cA4Dolq6OJZcxLeDVZ0PxOlXnnN\n23YEwP352Ik+5uDr6pY0K2lhBRDAGH5Xea+th5ARmshpi5Sg/7gc0aa4YWO3\nxArbd37416evWb2nCVYnIC4JuzGBXPmpSx2D1UazAhUbUHekc77p07aVvEEf\nORekn+a3i2opNeQ6f9bR/l8VphU7nVtKTahS6Gn+rc3ca6+c9KDLuXufQecA\n9fnFQLLFDD53eJ19z7W+j9noClF4OacSjzAgs6/IrDk5s4ghA4If9XzDF/2g\nAAN4ddgVMFtOPgPMLUWkCVur2fhSvtxtWEn+ZDg6UtiW2R4DTnNQeQzVzUCL\ne6nU1T2vsUqyRiI97OaQY8QwAAtK6lmu+w2ryTZskakkB9K7352aTQ3PNJzo\nibkt6qP1C9UQHZw9i/CXDerTI07EqbFJEi1+kDfK9Y69qR2B8G+u2HJFok9f\nuuFRIHhLXEm4KDeoii+XkLudka1TwlDLbEno4264SNfEf0RZHY3CuNQ4pZCs\nxckTxcLNINpWe+RyX6edsY3/txwNb3ZJ2IIgZk3Y08YojGmCl3qfo7rIy4fP\nXn+7Z1cGvKanmen1lPOmIMyfuYZHuISgkd28+kpA97dYhATSZY+BI6yq2wzN\nft/o\r\n=UiaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9019acfd180d3e569e64c999fd216b16a9d6b799","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.136_1589480515563_0.846983081270233","host":"s3://npm-registry-packages"}},"2.1.2-unstable.138":{"name":"aws-amplify-vue","version":"2.1.2-unstable.138","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.138","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4d57e7c5c040d37b04031e37c23627472b5ff5c6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.138.tgz","fileCount":47,"integrity":"sha512-QXD88QC5/GgYvCkygfZ5lPLhApQNJX+MApic5guSL5QCbS3rGhAGpqgN4Ovev9cLejgbvfK+695pU56oiE+i+w==","signatures":[{"sig":"MEYCIQCgFraWa3jCyKfpSlTrgswnc1MSQmT8fmXyQ95pcl6bUAIhALhOiAEAvARsjh8qvxu6ARBwM+HY5XK5qbAlxEp8qcKn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevZeWCRA9TVsSAnZWagAAlicQAIfDgQIsKpGlU2IQVVT2\n9/AGDqvmXgMnyQikGcvBf8DPVrpdMkj0fmIRVPQuVhoLBIPG8saneoxjNxwF\ntaK2h9/JyLhfb94kEmaFo2oGk4h0G2/Ngxk2QncGPQrjZv/qB2/jIQmyAHkv\nLj+abRUiUKJyqCyhPwJx+OnA0aGoDC2izwi6b+qWEslYvmZ11TxY6R+aVq2U\nZA0HVD3zTCb5g2pmbcYzMqSQesqjYoSuFjv3sjbBnJPgPqSHYK3scAWlC4vg\nRKrZaOx/nlymtb/k0qkZcVd/rfXySauPn4o4UWEKYayuZRk5ca+Jf5dIXzbl\n482a89OQIUi1ZI0dvbvyRajZXEq2TWgC93tSmgagyycJ7UK4Vuz+4vo4UBV3\nn4n/lNka2yMIbzPlwk7ZsNQc6ZPMPZPXKGrUhpzBJEOkPTq7CzydWnkBPi5x\nUcxlXLJdUyPZ5fHvPfnW3rTNFKXWv2/1S7V6PLNYJ3h3Mjo0t1JhTMJBH4cJ\naQMVABQs6kLd9vQW1RK5p/e3R1UmeB7rqn8QVH5PuGxeqV07j204Sk86D7di\n3IlMgSf21+gtGjXpzPGbx/LY8KEh7lFGif8OIy+/w+eUH4uonrNKb5EgJK8B\nJ2cVCsHH9PHDdA0NVEoNdJouXjERfrfrIY8zIilawZ6yE9nOVr/i1MPyxpzm\nBVSW\r\n=QmEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"aca7ecb25e7eb78fe4367ee8b35c9add688a2e2a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.138_1589483414227_0.16220403075271927","host":"s3://npm-registry-packages"}},"2.1.2-unstable.142":{"name":"aws-amplify-vue","version":"2.1.2-unstable.142","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.142","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"412154a8ed683b670712b2f1639a64511e747c67","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.142.tgz","fileCount":47,"integrity":"sha512-YEod5W/dL/2ktdBlr4AFK0S49WLZ8n8pOtcmGUK25OkqbsOct+IdDp53ZduKJ/iFQINTrJ1kemayGvsepITaaQ==","signatures":[{"sig":"MEQCIDMbFJjyzS8F91F5dGbMEtpS5hYfp8NlPEvQjP2eEm2jAiBbHsTW9FUgdSc9YtdkEaL1bmNXREGlvOgxz7eKzYTEcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevrz7CRA9TVsSAnZWagAAUgoP/A75AupqJcrjCcuPmhz0\nVdzoQ7C7NYPcJo8t1lF4+Lq0iwok9YVTmTnxtR1omEXHZoycO8aLQ0qVmbgC\ndnEx1DUlkiUnA0NMDaHraqgvTMJMTadDccbNoRpoW4OC+xlO21km50YM2y9T\nVeMBZl6zjRgeHUPREw3Ffyu8cGHRwzNoDQnj+0NAD/A+I75M7bvOyCxfI3O3\npd/YOFnzeSra0HOxeIuTFzSmiAVZ2WMZYYbWZ9Dnh8zZgub5nX4TFk42HiiQ\nlpbbJMOq3/q+5/qvWRyQCiFeKm7W4CW1s+9JJ4umtq2Ag5q9kB8m+KZdy/Ls\n60ckPdQugkQKYqJz9l4ct4aetZPPJfEGOVgLbvTw1ccEZS+vgMGjcv+rRK6B\nGi2Sgj5KCv+4eLgC5B71+CGGoECKRtGQ+ETdOlHyLKRlCXYiQz0efZoV7Fm9\nv9fqT7DaIp+OexBPfPgBXeOdBM2ML4URPSGByXw/X/KLA0SKxLNJSRY09Wmf\nw1MnoTiSwOjdpq7IVaU6UGbeNSbLdXVSwQVjKldAIoRa2JhclS4kWT7cLbdQ\nnaojtTUmAwJnt6mBT/aJX0VHMmowJGFb3TFlzAwHxdPGhDTcW1xUJY+UYZ1y\n0ZpmVGUXweZo8Zbm6nGH3cQ9S4yNG1MZbTbpkVYHcqKXPjustxNRygNKjZU8\nxyC+\r\n=beyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"45a649d6e9b80eeef4cc7badcbb86ece10686996","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.142_1589558522646_0.03585452370725184","host":"s3://npm-registry-packages"}},"2.1.2-unstable.143":{"name":"aws-amplify-vue","version":"2.1.2-unstable.143","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.143","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"da686692f33cca76cc6f0859cdf2d75cabbcc73b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.143.tgz","fileCount":47,"integrity":"sha512-iQsa22YBkq0KKGrmYpx86rSTmQRFlnjI2iurZCbSU1cYchQ6v8kq4kx/Afjy9RkiQtMrF9CuLp8zVhGyhpLBgw==","signatures":[{"sig":"MEUCIBTPa8qxqpHzHv7Bt+ml8YI82lc10X5kz6GoB3tktEKdAiEA43PfX9ccey4JLJui7t2cgJr2rqnep1Fixy08tzXqPG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxeBCRA9TVsSAnZWagAAVW8P/A8oiy3VL+XEfvghqvAr\nWjnWC0quJsfHEkN0ErHtq/aIVG31vJrrTZhBPAYb4ehAh4jEa03HM+RdjjrJ\nx24/D3GK23vt5aMfG4p7NUuQN3muluoZ+6bkAWvgNcbww9C5/XDfPXOm2IO2\nYmbLdzYWOrjEaQBUK+ygUxx1A0UpbIgqquywtwB3r6HmDNJJfySe7ygUI8RR\ntEAmMi1EsZNeCXCUrv9skKAUd8RbwSXikbEBk75RpMeOCCMw2Dwu4ejzdtqI\nKkwn31g/ioy0N/Q7300609SG63f3rG1vuFOjW1mBR0t6NZBKKVgJE1kUfLfe\nLtBaMj3+/1pID+fePIL13rvlnI/jSU2CMvMtqhOtcK/N5KWYpWLfkqTQpJoo\nvm7sxRIsKjJZzoqsmfN6aVklNT1woUJKyF/kYa2jS1vl0nv6e2kH0bYTKY9D\nS2TLuHS8cGeqIJ1Ryx7aDWgkXpQB7voINHWsTOSlnRtr1t2fFdPNATtxr2L5\nFiFUOYGkVNONmLf0s82Wv8Ro2zcDZVEUDBq+K+lVEY/t0OWQmrUBmXWhh2H7\nzkQcYnOFtC2BuQm3nJ+tpdlCNEKO4ZvUeB7hakio1AtBDc5+6mti+E5VzsLS\ntqcQ03H7Atith78bm3Ufme7lSqhtPY+qEfcMfvGnoMtetOZ7E85uVzkfHml6\na5AI\r\n=zsjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"821249367744631dc60b075a04b0083c256fd31a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.143_1589581697171_0.8759709714685826","host":"s3://npm-registry-packages"}},"2.1.2-unstable.144":{"name":"aws-amplify-vue","version":"2.1.2-unstable.144","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.144","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"019edac46d19678d40c6a83ee04e97a6cb58bda2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.144.tgz","fileCount":47,"integrity":"sha512-cSRsUTmPg7s7sZ7miA6vK1RTgxu8/KoUSgFi5mNkrTO6pefFVVema3QXQ70/Px2A6yPnYWEdTKtbY/b1mfmrTw==","signatures":[{"sig":"MEUCIBMkd4Hsfnj0GfvDXbDhtSo3vlGpU1F1HTEeKpGxItEYAiEA7GQXDxDgrdhSht6ZrS+DQc6g6LBEHVWcGxpx9P5uiQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevx2bCRA9TVsSAnZWagAANtcQAJExmWubEb5Y5yiW/fc/\nF6oB+36z2wjcovwGkArA4n8Xm+c6BgfBdXWOxhzix5kP0jMHW7r4m0a0lutz\nuGtEJUbZuIMgNHvprPz32yqIdZwTfLF4PPuOAG54tgtnOVN5qWv6COsYD+WX\nIsE2w/A54cTf3jcgPB7fkPs/drpHr4VWdIuqQ9KLCZLWyuoi/7Oyba04Y5EI\nvz9eOGnQeq3nb4k6hNotgD3gso/5D3nNwElsTKInRfhsxrqTVDOs+d7u/I1A\nqXGdgaP7szWVE3Ql7Y8GBRdPyMb4w8dYwQ4aUlMpwQQAI9G8pF5vJIVBRFX7\ncDiBLiFViuepcYuqD5GS4TO9+nsVl5bbJ2ZAxQT9Z8hve9ihnj/+deKHazNV\nz30m4BSLoQb7MRtRTWSdLKfjgbBvpHi/+tK+TzBQh0AgmLZiy1pLbmtOblsN\nr/ZcMlTJHVEkp9EeTgsJ9KOLfLxd4RKf76CPTUMPnq170zorQi8MhTGz5rUZ\n1EcX2i55W3mg94Pb1jKWi/1eO4osV6TlvWq5fPdNU5ZCrKYLKG12lGAGlF70\nqWu6zy1O21OgxXmG3r3bohLmriMdAvBhm+vYAgmzhE2S8xgNAlORWIGglvNG\nFatQ0CXlem/IR9RIu/CdhwhJluEEmZj5vC6JO3k84QdsJa54qwBZ9is9UBD+\nvwGa\r\n=4eq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c274ec6ea76b30e80f1dff644d4071f72127d48c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.144_1589583259086_0.27661115702148575","host":"s3://npm-registry-packages"}},"2.1.2-unstable.145":{"name":"aws-amplify-vue","version":"2.1.2-unstable.145","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.145","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"97132e22b6eac5c899e526896526ee0a05c13a3e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.145.tgz","fileCount":47,"integrity":"sha512-XVxkiR5oA16tVk15cPa9MdFfH3Wshw8NyoEDlOnsrmsZCGGYlHlFkz/+YRGaAFsx/KCWVdVch3dys/um6iszpQ==","signatures":[{"sig":"MEQCIDYz6nPHou2j2AM+pF7wztt7RORgnIbZwCgaOLVjWCiSAiB6dyvmrkkDGDB2teJaMRbZNxmI/RzsmKKrfqA0gjCmEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewqqcCRA9TVsSAnZWagAAeGsP/0MA8oHt0P2abwID9RAM\nq0NfwLZBGypn3n9dJz5c9Wu8r7OwQ5B4AkoSX8KRnLnePOcfdIgAEiG0O2JF\nTrzUy4sMvFtoEYdghsHgoaokh92HdcsC0wMWg9yZz3XSdO2Qo+oDNw/hjyUY\nuJ9I2KDQBqmKS92j9VsIraMGlT2VL6Cy0s/LkUHqQeG8xz7xsmm0zBN2xvQ9\nwaTtm9s0MdSGVUlNMMfwtEmqN6G73+iB22i5kTv3TRBMHEDsPlhNqwomFE5Y\nZgoLt/iLEWU98QhM7eniF2e4zR+TT6/hg+I7eGPz5Vk2Lovm8QsHd/qf7ML+\n37povm/0iswYpyA0t44YbAe9GS/cl8cSTdW7Vj0zKx2mcCXgkynLt0UxDayj\nMjnvptBMyMll1UsUvp60hU8KtFUnOffXhF1O/ed2XP4WGt3gsbzi01+K7SNn\nrh4fnarMkBCPrss3fJYkVcyB0rCkNSgD5Yd8JhAQ8v9yQJkrNfMCDMc3eJeW\nANfB5yGbV9naFyCoX3aFIm7yZ27oArivzHR8UZkpTMstNIGxp4bNa/Gtka2b\nG2upGDLbbDXZTQOoSVrKf+uaJ6vm+AkzYeRi9auc4zzD29B2Yi7nI66FVnG+\nedM//oSOFxfpzlDSQhdUSk/OSkgf041Ks7jHk53nI7+4cCknY1c+AzAcQG5F\nC2xB\r\n=9zfR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e8b63af76498ff88c0c2be43024487adaef6fe42","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.145_1589815963734_0.8564521289338027","host":"s3://npm-registry-packages"}},"2.1.2-unstable.146":{"name":"aws-amplify-vue","version":"2.1.2-unstable.146","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.146","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ee9e4b26b880ffeb1e3c1c01b72dbb94b18b94d6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.146.tgz","fileCount":47,"integrity":"sha512-lmjR07PAu/zQDtVw0eI36Dw8rbrhrm23iRRvRz/vYsCjDJV3BunbKLv4ZAlhn0DSmtUmmBi8gNx+01uQFBdPGw==","signatures":[{"sig":"MEUCIQCBkEF3AHzd4ck8GODknXvewWWEY8aS8GBjbk7MRumoCAIgdzl7Qfor9N+l4dSc68bGLBS82P4jABzRJIMLqgElN2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxNdCRA9TVsSAnZWagAAB68QAJA4WcevRDLjDl4FQcql\nbXEJb3q/AJOffgJcWqg9ZA6oVu8qlr5oHumlmDtgWg8ifYWISBEuG1l1gROB\nARcxv7QvYupKdQrEtn3yT5XJ8Ek7t0QK+knCRXiFW0vsI0W1ccK20jVZHPtD\n+1uVFon6EUVZP4Md6PQ6WhbjhFaJ71qY7N2Sn4dSvDS4dA627dMxxNetr4hX\nSXEO0dSvYq+5S8vq7iFOri7LWn6Dak8wYVqzN8BWJv1PVNOrC/95WgtW0u37\nLouSaNID9YUvj2LHh1yjsP6fzHkeK7nD2nHRF1z+2lsXXsheXg3LzuZzwIc4\np47v8etVtCvF0X0sdrbxi+hyARP9piM8PzHYyrcFKfpokXbqkfRrYLvFDUgm\n4tRNHZ6SEAIj0xeff1HuaNtdqHXNmYTjDs/qBBZUZxC1QSN/EnXFE1LEjc7U\nQW0ta8RE81FF07XvmRYSIoFEpwN6FLNV9DbqPX6yEx2d46JYC1T2nRjVQUDR\ntiYWqYJHtEqnk30/y+cv2Uon9nZ3Ccnzs1rQ+aXGOTTLgIZKP2EOf4PZrmwO\n2Geiox8VxQZCb3IoRXSQI0/UBmNpc9EwuEaDqmADqSkeTWfVMw7kt64AdvJ9\nuQ/jjVBbdT43tgTgLy+/gGy4pHZxdoowpgsPKbQrggTMIVKPOg8NpOzZwwuM\nzQvh\r\n=cS1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2514581061110bc5c661aed83fc1edd57c50a8df","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.146_1589842780412_0.016383623090962418","host":"s3://npm-registry-packages"}},"2.1.2-unstable.148":{"name":"aws-amplify-vue","version":"2.1.2-unstable.148","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.148","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c34f7026a6cb99604e2c74c19697a9e54a5ec5bd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.148.tgz","fileCount":47,"integrity":"sha512-GAIjZ69EtvaZ79agIOtz8m/QCpZ3HSH3FFMfPI9oFzhNDy4TJ9gLc6ICyMNpZD/sMpMfC7wxCNzK/ACUR4FkWg==","signatures":[{"sig":"MEUCICCc7ckmCOhbMVyfDcRId/kJpq95iUEanioQ6gdioMJNAiEAyazQuWicLiFVHA5Qx3fX6xK3iEwZcqoPvWvccwTRZMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexDVSCRA9TVsSAnZWagAAnUMP/RrINRpw2q/8H28cUG5K\n0efR/D2YsjmTE6xghrqlziM3mZpTs9GIrDfdvJA8WV4i0bco9XahUPEsLnBC\n8wNT9w9m4r3YiqPF6EV50LALHULkz71yXBud4NS2ejld9GaClunbRxumLY4q\n0H2uZviqmeBjgtKZpWEKT7OXLwNgGmOHrvvTWRmINGN6Z3ilWtY7L8Sf+m7s\nYf1Xn4E1vxyVxkVUP2Q46QFYfDLOxSvCYJFfdlQ5vwbuxaoMTe/TBp62Pbqn\nOgSlJJufYrVdMUMakme8OSCCkXJQq/WGpLeOasjFdl+DgL+LdaLUOIgYd7fR\nNzPUDUc1zbmzA0rYq2M39VJdgBxZ7dfAzQbiWMEX1hgLdGhA9aW/RSKnWlbH\n0PxKMBedSq5jOxeD9d4N2PZEv7z1w3b3vmBxqHpK/N3cwEHmHDi0oW1W4hg3\npwS5CV3pLEho0fcyueVSas2FlRbAtKWMssevLZKnJsRYbS39yGJqio6Vsf2/\nA+1yZ37NfGmRBmgz+mKR9YJACYxDPY++lb+HGmtL299vt2N9z2R4hM8+tcwu\nS/2cLJtJLlJjQwEcqzQeaY48xLatXF1X/1EPRq/Jje0nPuSsp2ukSL3TqRiT\nB389P0MV9yqGjft0k6lcLVN9Nr7lbvBQlx39ty+dInV3uVvm8Oc5ZU8eja1+\nWuyF\r\n=VWFz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2887d774214e6aa1120d7237201fbebd696fb6ed","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.148_1589917010090_0.4458984623755333","host":"s3://npm-registry-packages"}},"2.1.2-unstable.149":{"name":"aws-amplify-vue","version":"2.1.2-unstable.149","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.149","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"29feb6e1bb72351cb4035db672673f6e648b5e31","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.149.tgz","fileCount":47,"integrity":"sha512-OqCuSQh+PTnkl5QU23x5rBGIQsS3zFW4C2NHJ0e+08EIyJRM31us+XoRogCkiIU8pfa0pT5Fc/Y2uvLmCJVSnA==","signatures":[{"sig":"MEQCIBWvmPKGS9rBD0mDnCzUMzVtYZK7nUnvZ2xzW/UyhEXnAiB/elsGOkKMKpMnAOArfbcOC563QrN8sb9b8YnP8Eg/0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexD1YCRA9TVsSAnZWagAABsgP/A8igrcMykLeenumYnfA\nFJnTvT4RJm2a76dmJyqAH5YeN86QY8XUfoVrSMt3N2hxbcx+qLlRAIztcHYt\nlx+nSclY71st0y/m+OY2rmyCZWISREb40jwWhUXCvmF67zTZDMZrLnGgncvj\n6HCRms6f4I4ABiLEl6eNbpAW8tk9exXwTxZiyq21xjz8wSyYoxnuiNPopZZi\n9QKIHPr1k6C3O6Gnh+cBu/A4F2Vwy8MzaxiT4pGQodlRjKVCFFTUa3jyTmfJ\neu6JP7YU9s97CZ0qJMWkQZlYQP8ZXUhMzdJxmdGIWGQeXqornKqRrKoUxTwB\n/EZwVlWptStGWuhcj+I0meEZyUxHfhG+qLisnBD0h3tvbOyGUnRZ2FIY1pZD\nbOYRAS+zi8YotmG1qtBVeAtHS7mhQki7QRi9dONzkx8r3z23jH09jpFMz5uE\nUrH6wfxtgz3byj9ESr6tOY49Nr3tmcOEof5eZkEnhi51z5d1ADXzQKhO0Myb\n5riMuqUwUTMxXzhskwQbTCorZxmGY4LFX29gOImtFNB55g14H3+ObZ2wU+Zp\nmsntx4T4WtO47mtRkAQ4a2HpChs99Kon0EDWce5EttTk7ih2neaFDVMNa4kp\nkZNG020XfvZOVEeMyddqSvTW42dSwEMdfVII4mEyRFRqayzhilC0hEbD7xHS\nyjtm\r\n=bsPo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b2aa9e47af4d76d42173e87deb2142c73ac09799","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.149_1589919063612_0.10495621940955324","host":"s3://npm-registry-packages"}},"2.1.2-unstable.150":{"name":"aws-amplify-vue","version":"2.1.2-unstable.150","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.150","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"92ce286e39ac78bad25c071d4dc20e64ef8b6bbc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.150.tgz","fileCount":47,"integrity":"sha512-zgbv07BJEXnSvwyrHYpV6M92Lktixbv0QG1lwK+CK1gKRNst2uceHzmXyJXE3OL7Yvcj0JQ85D9fDUfD5Sy+Hg==","signatures":[{"sig":"MEQCIDnxALJBfFYUglHDXAVLJDAuTpitTLugqNB/lAyRDcknAiAy2AnKq8g4/Zwpc2mjc30l+9O8ujwLRTMV/zzhpsCZ6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexHNmCRA9TVsSAnZWagAAi7AQAIL0uATSGYNG62FtlC4m\nP8e0p7KtWccqwO1P6uoNFF60354U/l2FTAp8Jz9xOoQaizXRCc+iWHHTcanp\nQcP1HLsKXJ77hESBahFKtjZZlxB9WVNhh0S71jTusWClJDURGSPd5KQp3qxF\nrUtAI8kx0zc6M7r6aa7CVHkoc3Cb9rZPTs0T4gdyw79xmnm1k/Wicjlizn57\nVqju40eZQyH65IyzUadqGTnPhexL8O55Ha7VooQV2Bk9hBEpIxCA3MHzm7dA\ncNCbvctteNignWZa3/mGe6RNzlNt+9HO/Mkmovy43Il9EvAXTBNEs0Bjqpy2\nZJbaPkmN4Upfb0wNwzI0/dBsyJ6FJw22aoSW9VNBK4/kgUdxSJhfNgs6dJPM\ncXvBQmocBZ4zLKkqu7Py2gl7Lpeq/gJROJLJQTVPVvBQlL4bzovIZ9EXw6vg\n7cqvNXC3KwADXahZNCgBCf/mHdSKKZs/zY9/z6KzsOofyGH7Rbe4gkagRTTD\n94dT7s3OrLXSJU4kYy1RP8IzZvQ0j3kL+hE9xA4KJmHzokupQZloXqNSN0XF\njfN39RyiPKn/ZUzI0kvh9t2aVjoYAhyGd/Uc4rm3BOn5F4yssNXU/igRdj1L\niEonGm+pHkjuTHDfEyN2du67bLDIZiRcXNMbhZ8rr2jJelIhCCgQhQ5V6q0s\nt3rY\r\n=jAl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"02a95b237e3eabd71e6bee8a39944bbcff22808e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.150_1589932901945_0.9122922708597863","host":"s3://npm-registry-packages"}},"2.1.2-unstable.151":{"name":"aws-amplify-vue","version":"2.1.2-unstable.151","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.151","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"033a2feb3d865c731d6f0f75ebc6fc1c28bb4922","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.151.tgz","fileCount":47,"integrity":"sha512-nzf12GcYqGJYy2ejioYGD7ZXOgt7N3r1htGp53qepmRMS5q31fpD+sFBjQDCYL5LSL4g2YuTBwpWdRb43Dw0cA==","signatures":[{"sig":"MEQCIEs4bYhM51fm7YR0wda8NQcLxZOVO0ZkCC16w0gy4Yu4AiBkA2ra7glUzLPmPEWVgilQ7XMTyTF/bxS4NJlchwHc8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexVQ8CRA9TVsSAnZWagAAvLQP/0dalXP6CxEVa+DwNXke\nAmLuGB4UdjSke5ucgAETwC49rf+f7V0k+4AhdyWGArCUMlyRHnrdX1FyfIqu\nSze+1MGh9pdLK4J0ZE/8baj63X9rAWd6XzrcGsyyW3RD//lQTMXRV62JMQ1e\np+2LgP6FiVHQ7MGxp+aa+DNVVAex9VcGD/sVlTpeHRfmrH2znj1/sDfE/4n3\n93roXlM6HETKW4NtNMxTqv3r2Lrh/LfYxkPYa0VdKTHu4ax9ay3ym/DUpkp8\nKH6YpDjL45ej9nhLOYAuZIaDfeH4n7rV0z/FvSc3AiNOth72/7jR7rD5iK7u\ng394t4Z8gXiafPOy8l+TEfeMRx6k6PlatgkI5Fsf8CYCKyFXXfWLzEwfp2ku\nQIEn7kj51Pwgwtc/YWQFKrLOJpppF/luw9fkY2o04CElJeRniu5Iz7vYgZCH\nc26OqCwi1ELat670Kg149Wsq/WO3ZrObF+i614hP+jSRmMyIXaa4YKBb5Lpg\ne8wgd4ZTH3VJ6zwn7c7g6OAwkf4Vje34MS39vEd+mV5sJIfzgVk2xEG263j/\nFPAlqHcDWcmN4yezejxXudn6YY+k4YdenrETEw/DGu6uIERkoms1EzLt2vfN\nVgS+/0UGGSv3oSh1G76iVKB+gE8QaRJyCgU38p9OWrwq2PRTBLUUnqvQG/bk\nKVki\r\n=gZC7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e71fee58bdd940f5fbcd4268f08f53e2b85168bd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.151_1589990460245_0.0458957715019741","host":"s3://npm-registry-packages"}},"2.1.2-unstable.152":{"name":"aws-amplify-vue","version":"2.1.2-unstable.152","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.152","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"59cbb4c917666494a60d362a6e42ef444e16cf0c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.152.tgz","fileCount":47,"integrity":"sha512-ppkujZKh9+9/nUBaLW9LsNWxVHeszj/W1ZrlKOmJs4gTnPAa5mpJye67ZcmKqd40dVYaSagEJ+roWQP/zHeHUQ==","signatures":[{"sig":"MEUCIHVWMIqlSo1lAMgyFZh1TKZ4j1Saq9s9qnsRJJQ53MF8AiEArYskcr+FSwEFKCutks3wOn+gbXrt0RDIWE6ZIxHsQp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexgVJCRA9TVsSAnZWagAAgowP/1PO+BmZg1gq5LbHIkS2\n+cItu9nqI139ILMChvnm/Y3Q46+sg/4khcMKF741Ec/3Bv+3GDqPpvi1GZuG\ncWmjJmqX+KUZHMu+fSnYUP+agnEXn9UmbmmJEFRwq4OEZYi/wJ8Vafp8wOI3\ng9t9GVuc8ialZTFhPC5Cy0NSN04TlzU1ON/BXmJ9RoQC4d+WZ1Ac8txLiVfW\nM56fYNYUScp52is4dKojike2nkFjcqIZZ0ykVOMT0EvNPDgtBeGabano3U3J\n9M2SelSDDLHsoH0swgCRG55rieGmSHZ3wz7xKrEelybj1ixTbeWo4kF739C2\nY8Zoplt6heq1wUDc4vLmoni6L+JM6deLxz2eY18RmS4tunljUwcSXrTorPlb\ngTXo6xU/EW/odokc8Ifqw3IlLf9FkId1hygVGXacMzUk5LdPV1Br5oqHR9F+\nQrO9VSyfDu87ZuzIGVsoiA5sGpJPmJNJH6MW97BwhGFpcQx4wbTqhxyRWw8X\nfG5000NaED3wLiJV4uTXMEv1+H47wF21OwzDiJKIH073/yK3H2ONgIiLqypH\n2CfHMQvlryW+dkjsiCOt3e3TWsQ0s7xf1031GexkUDGaJRVxsdsmK3LTcEMa\nMK14uvWTGnO/Ssrw2lvgN6avAZESCpz2Fk8w6NSFCwUqZZV70h50G8AKJpVg\nEUwh\r\n=7acb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f89e545a93f370f0ce91b437514f833b03c6202b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.152_1590035785067_0.014329699700831089","host":"s3://npm-registry-packages"}},"2.1.2-unstable.153":{"name":"aws-amplify-vue","version":"2.1.2-unstable.153","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.153","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"84a44f2dea5d0ba74ef838ff0bca86319a7ddd3a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.153.tgz","fileCount":47,"integrity":"sha512-/CmtAh7EPRzl8LsIp8Lydexn0UaDVN2IozCSzOWXRH/Vv5Ius05b7DwWI1yl8vUpGLHrUhPqs/oeMjauETKGlg==","signatures":[{"sig":"MEUCIQDyWjufDUtZlD5vWFZmZ52/P7gyJEHtja09BdFbhLqSggIgPWB9yS1vWxStF7i572YZT0JP+a8P+/eSwjKbT1D01I8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexqVkCRA9TVsSAnZWagAA9JEP/1W9zAFGtpSE1sYzHQ7I\nKJ9MhCgMoLMMRS+ATVHCK6uBtqyj6ltUVqeWGCk7NLURxX80lrvnyM9WNKro\nJ5usza2sCMRnuqZ7xx0052+ByQWmLAV+wI+jSRgXLhK99cHnISwaRV+nwypt\nbSboCW7wvmM5Q2B/TZjJhgSaNQlKk5gQ7vo+TR67uWH6b2HhZ1ijBsMOKHMA\niZMDfmJGcqddCyYVjErwIWga6SjmTyAUePMN3akCO3+v8mimIPtniNrH200m\nFRc3igD6KiHv2GPo5lLml0kFWorXcFPKYSNvQkYW7KTW67QxqN3+FCsqBhiW\n0V6bdyWUsF/qWXIVp5juQeoeVmbuzRTS6noL+/pYcAitO8T3IS3uy82pwwJl\n5LcyXpBQPLheDE/rcjLyBzo3qqvz85U5P2gI1QHblJa7I1Eq05+69Cw0jL3q\nc2VA5F6H98NFWv3Pd12Bjiw58CkJghC6K0zuVvQUjwoP14vpoKFzmCBkCIkt\nn6TgvQGKAavdvYNfq2a13BTBITCnCuLqKj6pUPduxo73BMQfPNb0oCHBtma5\nP6rFCEnLRIm+ISW6LWQY08m9FxJ3yx5zX7LcMiIhavUPTF8g9/9c+Rx+dWy+\nPevqFg3KJ84JKeo0pbKWArk4Q4gRXXfUXdHrmOVDh3uEP9/lOpUqSTZOW5iX\ngQP+\r\n=7sNr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"24eb1048d480aa477e138914d8c82c36b2077147","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.153_1590076771380_0.2464097244715968","host":"s3://npm-registry-packages"}},"2.1.2-unstable.154":{"name":"aws-amplify-vue","version":"2.1.2-unstable.154","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.154","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ca48455754b9c031b714e01bf68708cead926deb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.154.tgz","fileCount":47,"integrity":"sha512-HaYDIKdsQAjDG4eZiYNE4MMEKkdrn7tFNmjVLcFDCjiCTgO3Det2b9O0bRro207e3/euAisxJMF1/G5HorzEmg==","signatures":[{"sig":"MEUCIBViPEtw8gTJlyMSkDP84pVuSFHBZ4bR5pgr2WzlYFE+AiEAtOMbSI27it//eoivxEUOBRU/HTX+henGBpFjKK7/Gv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrLOCRA9TVsSAnZWagAApUEP/2dTSqpuLq4fSBrFz6+m\n48pqw9a5YLCQoinlfPQMoRolmg7P+w9qpSZmDDb8m7jD/6kFwbshQxNKJVDl\nhMj0uoC6e1CYDI4gy3HhRJi36Xq0Kf/NMCD/07TNva66yxOfylvBRu+Y84mi\n1eGgUbA1YHw5hWdO9z+xzXPp0n1vStfnD17FnLlP5lnEUrsQItMvoLqLi9Gw\nhwSkdUKF9pkgj/RbM2HjPYHekor2gx7dZq6dwvaN/5aEMhXlfdsYHcYe34kE\n3103A/l8HtWoVTflVgB9jXjac5GP6qPxOexBKsOYAkTj8GXQbWiM0hsHaURg\n8HPI0KXcZi/RasrvutUfIri/i0ABklI+oqCFYf/GcSlEcdLKUYy9cHOvcUgf\nsGPkzg1MlPg/lL4UwIR5m1ZC2YTN1p5/0a8G4SdYFJstqzBlH8PmY+t3+AVj\nJa7dHOtg7IwyYxDdXQiF8hXZ9RMfCeKUnv7LHTXJXL+5nj0jatTz4IyA1Y2v\n4Bq8WSW2mYRR6Pv5JGyQy4rz1xZrftkgTi8dAi0W1dorTfbVDuQsphnUvW3I\n2B4POJUNgGu+Y6ufygsmeyRj7gi8Og2mCqAbQqifCYGNUB4qU9T8oIlE+led\nO6LhhRq+OFgtmT861ocGQT0VIzVtIGks7mv/bmY81gqmUH/qNg9YHVTiI0NC\nuEtd\r\n=P+lg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3b2ec1b5704dde718649991aec42ffa25efe27cd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.154_1590080205998_0.9102260939061309","host":"s3://npm-registry-packages"}},"2.1.2-unstable.155":{"name":"aws-amplify-vue","version":"2.1.2-unstable.155","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.155","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b97c7e9d15b9ee925628efd332722553c8615d81","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.155.tgz","fileCount":47,"integrity":"sha512-+1sWNgP7Gfx1OYf9GKAbCEwleCzhG+TR6ZTt6PRmD/XKECsU3zpbSy4OuLYuSQA7Gtbb8Y4rO+1/xUdrU7/WoA==","signatures":[{"sig":"MEUCIQCLh+t1JWQ96xF4d3sGRdeYUYhikEhLVAIYBiNLoECpPQIgWcMLR/KG3v18nHqeTmpMX6o2mINqx8imlV1yMOeKwvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyAqOCRA9TVsSAnZWagAAim8P/RCkgrgdiVJ/eVN6DI70\nkYzWTZon/pvqZ7uC1pbhu9i1rliB3VvkLOXgUmpnKK3bQyw5Jkjang3p5iuz\nc9UwxFCBt/z0hUKj2x0tBNBIWCulJ9ad1T/hIk2mjJFYKNUTe42G1p9K5Vpa\nOmAt0TBsk5Jn4OXWpuCeuATFYn9m/FfSsM7mSV2I9nz+wQupSnDSJlRxZERW\nKcc2djJ2X3L4VdWRW7kHpLaPAbP0e1PGaAyNPGbtpTDn+s2XlyXIqgpQ6vQQ\n0PdmpkddRyBww6kqSEhhHuDjrc1v4kjMa7X0xwJR5QN+0ED9mLT6t0FQpKXO\n5/FLYYYxjS9nQcKQUv7WnVWVHSkMVbwYNQroSk/PqCxs3wzUIc/xC5RJujdO\n7ZCg7t/wOsM1+pYPeTM/6bJ0s6s2lJWc0C0WL/VwZF79XTh9CFO74c4Xq1te\nzHlyl29UpULSq91kRMCf/6i5REHWnqBKMehHiYokVzBpHAO9eRtE/SWCBRud\nW7nDbLSE43bx0qf8+LY5ZsKTYpMsLBk13bIydoK6ipW21kek9Dpj2mng2soO\nSaAzN6Pk95RmfyW6MBGmQLfs6ASwZP3LDO6l3Sroqaj6IZYVDxHhwDh68W0y\n/vlFC99VgvwoTBE75lMVb8jzr+lUJmuIC4pgCI8zia9N5srL+LACog0kRQBo\nNRPn\r\n=kTtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ca02b504c8b3684e2863c55f68019ddb5058196b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.155_1590168205278_0.982071317746162","host":"s3://npm-registry-packages"}},"2.1.2-unstable.156":{"name":"aws-amplify-vue","version":"2.1.2-unstable.156","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.156","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"dcf8bdef8de69f6ae852e1cc5d40e26022101905","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.156.tgz","fileCount":47,"integrity":"sha512-rYu6qgdR3Y3+wjlD8pXIByud2sVNgorBOch+6hmwDWshHaOkqOtzMDt57yUeJSRphY7QaEAT+HPn3clYcln9Qw==","signatures":[{"sig":"MEUCIQDMiLuhxqr1BPKISpyy6BjhUNQrJ++OB2m2jN2bS7+e3QIgN3rtMfi6SzeaABvtmdwtQVPAZw6Ogrjwpor+gWrKKGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyBB6CRA9TVsSAnZWagAA/F0P/R33YX0HzJOgDVOln1al\nGzQY3137Ir20y6NS+m03fDBbs0aaNfl42w4mT2Uc/z2rmjr77Aq/bMOOZAk4\nMqlUUTu0DZ2ThAP7hzlLrGQRAOllGvWBtMKBJ+41C8a8HRKBh0SRGkE+Rxk1\nXF35VIKwhjHcrkHhuU7aBbP84ROU52A6MfZxWRtU0YkEII8ygbuY+ZzTEkeN\neln8Ta5XuWhhbDiEUKsoh3CHa+jreCZUL94FiVK9dvEr8XYs1jqriFxVCJKV\noflawm1JKPPWnkAfUvADaDLnsA64ewow2O+L9Y4Y1jmmFOLxK7hnq7QJT5tl\nc2Oe0ACBOfWbjWweZVImYZk9aVnPhHjmx0w08+a7GYsXcAaQPCGnjjHJJo8Z\n9U2zhwfy2E7s38idaHSJZAyhZrfMrPSn4kp8WOw4POCtkzo7wOBlsy4XLeJW\nclUa0C3mm3adC3fwGl1+ws4RXAnyrjGKQd7rHOzKK//3YBDiH6NOSS6sWfom\nit5VGJplwzfGETZUfc+DOovgre8FYc9kiLk0WJ3lE+LnUVelWK7/NX59Po9X\n+fYugupLsi+whPvll0MsM9T3FubEc+FsYvctXAt4EY4272Fm6iyS+Q18umdX\n1HqAOkk3rqV3Cb4YQojKkhsoIrDDTKM1M6t00nqtmtj59JuccV7h0CXafVZ2\nDDZo\r\n=Qe7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b1eb0435cc8248188f426f37f079271e3e4d8760","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.21.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.156_1590169721502_0.2650338817977753","host":"s3://npm-registry-packages"}},"2.1.2-unstable.160":{"name":"aws-amplify-vue","version":"2.1.2-unstable.160","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.160","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"980f254bf1a1d6457388741f671ea43def6ffefb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.160.tgz","fileCount":47,"integrity":"sha512-NBADbYNhzZY5NAZg7ZhJTy4z6vU+/qCYgV8zXMiJj4QvDo1ma3xJQHW36WlRLrd/tbgClB/W8kLslblCC8je+g==","signatures":[{"sig":"MEUCIQCMCCjS6BoxBcv8ROMdWGp40L0KGcbt84hx+6F5FN3L3QIgZMThiJIKuHdQaG6HlpVIiAVNfx73bgkHtcQtakWLu7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaD/CRA9TVsSAnZWagAAU0QP+weh1GV4LszIvacN0VcW\nWOxI7u29gvawl7mQJ1Njo3jf37iNhwXvdWNG0lgPHljgZUp4LoP13Xoy6iXQ\nti1h66K/45Lwn2uGZ/vQz14LXw1E/ECigP8r+Lipwcz6iFholCs1BPNF6dd7\nM3tx3xMf18iJVpOx5Vuh6leMiGyTTQQ1Tzewfa3OO5W4KWDT8uYArzbpAGlL\nXJKMxFEnt0hxBrQ5p0vgR/i1psTOffxgc00sMHBnIFX7OPHG3vdO90X+0Tyb\np3S54ewzeeosCPf5iXs9OAEwA9mRk52c0TJsyRn4Fy3hgnoVVn32FaTD/roL\nQX8xH5SG+mWLtIWNCIORkXdL5XdgArKTCVVHIwvDzwmaVWUoGS2XYKGmd3y3\npr7MotzLAGfN6hOfevnyv4g446zZnXLg7K7bxSgPl9T3NIAATXpSp8qhPEcq\nEmACMwmu0MWoocT/5AljscGqGnkXig/uYwgHCJR6LRR3kQbyDKHYEwzA7Yml\naxzyuhF4lspq3+h1lqH98WZa2IMGIEGZtXTbDH4Hg0wqiUCuJrZWpJJ9fvUL\nVxPLxdVnGPWDnlH4dWqoMCGcz6VpwTcMjMNhH+g3hKr0HfhOWrzpBmX6Fgox\nIxe8w8WuSU7B6CDRnPEB5geZnXrk+k9uVELjt6LjfM6gBR1Z+gqBwYRNhuNQ\nEbsr\r\n=/L6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3bd2d2509c2db59cffd7ac81c08ac4f9ef298198","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.160_1590534399142_0.30252626558335893","host":"s3://npm-registry-packages"}},"2.1.2-unstable.164":{"name":"aws-amplify-vue","version":"2.1.2-unstable.164","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.164","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b40186f43598bff4d92a82911f948e8134bf6600","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.164.tgz","fileCount":47,"integrity":"sha512-EQ/O63qkDEHnYUucU9tSoCoLLyluqdHw6HYxcJ3rxT4FW6vB/TrXvZr2WijizmZ5p44f4Oahd+fP9FudWFNhQA==","signatures":[{"sig":"MEUCIF05EXSPuX8Wsp0AFh5ahn4NL0Ffl42ZEDdz32reCIzDAiEAwFLfeNudgw5ZcQOKd2jKLuPFrbxWcynpN0CUSndOzFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CNtCRA9TVsSAnZWagAAogoP/2shDVQWd5tbTfjm4/mn\ngHUw6L8dVy/3fY8yukRGvg4Gd7S1qW1NKwMDrvQFYbbA+SmtHgxSFOV9FMiS\nD+IXys4/TZ11SfEVLnJJZk3NZYIqVWQoec5dbHRwccd9JP5nc9rlMycpIZDy\nrCcNSA7JybSFA6wGUCqmoTDHcGE/wXDPrGiF3Td2e8hqJ2ivbsuuWEZTzTXQ\ndIr53l0bC0R/yb4neSZm9CNR5fQqLitT7Vve+YD1Ta1q86+tcdaObgS/aGFA\nF/3h7s9G1Zv9Y8dly4eTPF4+wqxqkPh+Ef41x7z66ENwjQ6iMpCZ8kxZxOGt\nZ/NTlWNzVxMGE0GtfAiXeJ62j+Iq0Ct9Jxd8dblg9TBKL2e9t9EQgOloiYuQ\nwiv70nhBB05P9kiXVnqzE5eai8XwRAZiw2LoCevl5zdkInDhKdziheg2UAxM\nNnWNvLGTL0YJJmZKInCSC+KSCXyKwgf0f8yuW7fGIKhYYYxcUBAQj0HRVnOy\n43Quay4hOkLFmKEAr1Gx+b/N/a750e9IcNKhm7XuPdHjIuxBD7TKwWiVE4b2\nr697HdQh/V632CptsMJOEwmu4xB7j3jbFSL5pY5XT+BBuCK5FHanUNaGrBi4\nUnXFI3kBe75r7+rVbeGJ3GMPMtu6vi3MLAgmYkbKL6umpkNQg4AeauoZTWeX\nvOwX\r\n=shep\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eec214be88c722614627580d18b175d3fad76779","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.164_1590698860645_0.508833720655749","host":"s3://npm-registry-packages"}},"2.1.2-unstable.165":{"name":"aws-amplify-vue","version":"2.1.2-unstable.165","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.165","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6e15f05a4666560b88c55d14ac4f9093f9e86f8e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.165.tgz","fileCount":47,"integrity":"sha512-X+/llkAscEXqdvXsthFZr/LsT1KI5lYuQDCDUiSjw9z602KyjTVrvWia48TA9xNAETlyvIGjS8OR5oblDHPpYA==","signatures":[{"sig":"MEQCIFjjQxAlAojkCqXhF6g9YsdG/F3Oo1hUPbH8a/QtZjftAiAMwJtOQjT9x/NrylKGjKTnXhlMPy2nSxnCGYgMKuD3+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0SPFCRA9TVsSAnZWagAA8EAP/jrGFig7pD3H4Qr9RQxW\nC9JzmF259hNSE6IQW2VYk33VCFPyho30KyzQgu0191aNcSy+90SIf90pPKfj\n0l1z7TuatMU3936IF0qB4RdnJSXBHmm3FN07ZMLG+FCtsu41WUJEmqqRwxLQ\nB5cOYdMJc/e/moOEOAs8wNu+nhV8u48uV+MIYDZDD9Ek3bOBqXxcDqoTktZt\nksdMsIb3Z7+a4zc7UXiREfNQH7lIY61kNd3cVDOdVKsy7yvTh18TYFSP1lig\nUgWwjw6MTqqHMBtWStfxBnAxOzWK+5PE7HfE0SVsynpNHroNkt3rT6hGrFrZ\nwZZlKrHTNs//XwDvZWV94D/iONp86ztSit+x8gXMWsX/kFOncHzXVcml/sFh\nb2uFTqZIrnmD/7iW0eIn0WyIlWLAaXsh+IXj6qbGahJM69bzCg0WVo1t55P4\nBMhZhtvtSrsozTlJj/jdPyrMIDOLYoC681rJeC6kcMzHpqG8N1C6fkJwF4eE\nlxuiVBiJks3WdNPi/gm4Iho2NdWCAElM8lzC+VFkXx9argl9H8+QA2bFgwts\nwlneKwB6ehDhTlsBHzN3eaovHlAVptTDxkeaW/c/5szoprCpdzCYs+8AAnxA\nXuNRghU8t8yrOVKtVF9YiLYSvUV5TUndhqg0RxTbolt/xMmhcp14Ooi0V1aQ\n6jLf\r\n=Wm1j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"874497611cb69ba7272e216fb688cac0934c9cb8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.165_1590764484773_0.664252750601457","host":"s3://npm-registry-packages"}},"2.1.2-unstable.166":{"name":"aws-amplify-vue","version":"2.1.2-unstable.166","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.166","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3c411434181d7d9cd53cc85d8ae96d44e6c303c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.166.tgz","fileCount":47,"integrity":"sha512-8VHI1EkUr4km4zjqW/ejWAYpwhCJV6ZhJJ9XS2K/8ckGW6VJH3WeR0Reo6bjFH/MgTYkclvRNSY1NoC5DlHPHw==","signatures":[{"sig":"MEUCIQDfJtobOyO2b43HX1voxvsmiGQOpWsitJsITFV1hywo/AIgesbInoGu2MHHOsanFm6miL9ChBEznEGnY5CNXOm1ZUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XDiCRA9TVsSAnZWagAAndoP/jP3Ndj5iO1iVWKrlVpH\n53JNfYdehnDpFj+xQxKAZ+VvM+/JoDuDM62Zg4cjeTiCbzFVvL5wdO/Qdfc5\nzQPv1uHO6gF47nKtlV2ZDoGG2QtIvCgfONlaa7dQdvcsOnSasuopJvckW+Fn\n9HVoy2VaCJ4YX27fdECErNuBO4ui0kaXe8/HE/pZGNKWgw2PXmMVx+EEREbV\nB3QM4dUqmF431KcuFp1TqoIzQVecKW0usWa4RFFxM9ZnXfL6P8vgjXkI+yt9\n3yaJjs3S25xvOOyg6gRQX+R9gFfkv7RLNrX5hfDr/hfBxtkW7N4aoEtpGIQi\nnBTPIl5/KC2xQcWvUVgC0GQPPCSpO2AYuaLspAOzMcjdIMS5KeQeXLcyhLtW\nI7TcWb7G8TvWy8KFm+O5gkR9kzw5gl2jljAqtnjKkCIzUP480ZcpwoiZiYHG\nBIPog8LJqXI1JWh4MKxjC61KzcKQ9lRV8q1AXU3NWLY5V35RpPAAdxqwUX0r\n2Wpf9pZIf0hcz1bSCYqBrjtpgoJ4hPWnOX6XjnIZBuN3vCYKOZ3AcY7bfm0p\nnkg0Y0q6Jz5vBvfx0+kE5M5AZtv983ahJG7o803jmp7GQm6a2ir1Ym7XN8hK\noinkJeGbEbwrPtaLVBBQGy5GH5iXbKFe+LLldgmswRk+PgtkYKNlinTfWJTt\nl5Ia\r\n=s0/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4b6fd33c88636bbe9aea81532857003ab52bc1be","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.166_1590784224989_0.5263075995875697","host":"s3://npm-registry-packages"}},"2.1.2-unstable.167":{"name":"aws-amplify-vue","version":"2.1.2-unstable.167","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.167","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d9699d1aefe387cf707e8534268be416b1eb0b7d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.167.tgz","fileCount":47,"integrity":"sha512-M3zT8JTHkhIUv//lxShvYonn8ExdC8YKiopR+XTw5fA5Rz6uA2bcGNYrGI8En/YhOmZ9Yby+aPbOsQUtkE1Xjg==","signatures":[{"sig":"MEQCIFSNe6QAxsKmVP79vHH97MTE9/JYgCxDD51+BCHp4o5DAiAVVA9H/a1M16z6g2D2Ktf2gtw4hZsKVCdSs3yhDrohYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Y4ICRA9TVsSAnZWagAAU4wP/3pvQD/A5IjPCdAsVViV\nSS3ZJ/Wd6pj02IhhilehwcwQc29ZZzXA8taHLkz4Vm1pHMxgtDwebiYuqztR\nVgjLFJXrif5cnnaB2D6LodOPv6vq4+Z+8YudwICVp3ddF7oOLrPzEXaGgLkW\nYLD5w22F7anml9DRg1KyoFwzQgf/XZ11xdmQt2B55zrCG5KBLvM+4tqW0UM7\n/GOBp0xmWZmcTamrG3m8s1TUe6qvfZyeCgd3e8Q2tLx/PxJr+lxx+J+sfWf4\n74wWVK6aV0KSsVECIuv954kkJLDeFU/Gxecy6a8SVig3Hl5FGUiPN8D7E/f6\n5k+F87CFRcA76/z3vea39bp4seDwOCLZhvVXqDTgcwBQjXYkLr5lqUpLumc9\nE+bW5mhEJ96C2LO23miHw6Ow/EUca+j8zcbICIkFJv6iv7zHPZwmNpK7/FMY\nTxJ8LwrhyqvUvjU5WhpXnNp9/nbwfifeBDRJkRJW1WB4BSUczm358S9tt6h2\nWqfe7cNDfcBjVo8cbrKeDUNwVOdt6vNzDlYuIbs9iX9cX4FyUD4jz9AKxJW9\nsYXJLV2AeLfB4NUgdSAW87wrOrEDjpBt3zZ4aa0IzlYl4WSpE02O2o5Noe0h\n6jOltLGM6B1or6L66JwKTXcy4nWOHxVwH6mum32/YE78SfGKoqmOUY0SX4LI\nBbBp\r\n=tD2C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c63180ae38dca5dd22d6248b34c431eeef981a0b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.167_1590791687500_0.7346640544653833","host":"s3://npm-registry-packages"}},"2.1.2-unstable.168":{"name":"aws-amplify-vue","version":"2.1.2-unstable.168","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.168","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"306c91a751edd3b5285fe27295c3b2ee6bdf091b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.168.tgz","fileCount":47,"integrity":"sha512-B+4Qa4FyStpSCXppWIzGz+aqhuqzSYbJ+oFjveLpFfWYSRqCDCPzmxw53+hfBXpGEAURMRSVfp/3D8X2mNivMg==","signatures":[{"sig":"MEUCIEZrP0HOh6JnZ77HWWtUJUJj9XYuJuBNTUa8k8o7sUKKAiEAnpJLcZ3YU75L+Nq3BFDQHjoIX9HXj56Mlaog5G7ap6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0d/dCRA9TVsSAnZWagAAbpIP/Rg7xqP3HNF+u0iVj4nV\n5SS91PA1NJqSLmDa6IZiCY5H4hNqYZfMntJ/Pm3HAYV5qPTOuTxjUa/sXrc+\nw2IwaH8BqM+8RDXEpOCDy0j7YUFHaSM8je5uD5H1LDrjnzM7wZnydBLKdn/P\nB5K3bVGMrKPkhBRFWh6fD8Cm/Qtjb5k7tskXatVlJdvAmGkGl1TOqnYWjUcs\nD/m3cbJPOAfGXTvOTL4y8Oagrist3xYPM5/jKfLvdIi20dGOPrvxP4MhSBHY\nnY7ePGCF4do9Tu91GtdEo8B2hr6nUMyBctM9FI+PLgXj1Qow+Y1IjFczYYk0\nCPT9sFkmJwsKlsmg6vZTyiV4ftNvPDnjELL8f47k92JGhP8Kse2+vbtxFsSE\nj+RBs8vQ7MG6Vxn6O65JqbFdNORLN0HDkBaz4YOathUWVS7jmKARGT8IAV0y\nxllwXmyxukTgP6wnq7T4dqgzjLuGbM1iWqiIO2hbLO60wz6NkX971IMwVtbl\nmxxWBP8WvkpSu+ZUU6CZXOGr8eu3XoQPcDOi6X5hzOgpC8OvEeL6QFhDFT8y\n9zxrqaQO3GjzMeqq0yoSuY7MsxQ41t3AusgBJ3za+mReeGrLDLylapLuHmAF\nZd2Hy/a9wjURrrCmSTgF6eou3uF0s+6eELEwq+fBsUZWwK2DzdiDmO5vbsQF\nOBWp\r\n=HSIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"67fac50cd734338ac76797d06111fc5ca911bd48","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.168_1590812636608_0.8363783125395676","host":"s3://npm-registry-packages"}},"2.1.2-unstable.169":{"name":"aws-amplify-vue","version":"2.1.2-unstable.169","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.169","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"47d8fce0c99febe3cb04af21bc1abe1b1700a0b7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.169.tgz","fileCount":47,"integrity":"sha512-XKK20hAbYrs8t7MfGXLEFKVkiy6FLqA+E5ie57L/wF5IwymOK9WjZwGSjVDdcT22xQy68LLLAj2KLnsDoAK1Cg==","signatures":[{"sig":"MEQCIEzLAVKigqydmFv1g+cY3i5jEv0oA6nxxoOaCMOOdw8qAiBT93g0u77tseulsWYxjStutWwuvY+V0G+E0JZGwBGoIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1X2hCRA9TVsSAnZWagAA6g4P/1Mi8yGAmrjHIikoZU1B\ncM9Hp7waKyloOPSJbQhlAoQ1PC7M2knKZOZOBsqDQxemfNTFZAo5+nwFRBkx\nCeWmw/O4vC+x9VUwUpftay4vOFTCM427L/wwXBZbGAeZE++GLH5oM/7nVm6u\n3MSy7ML/t/Vpt3Fv+CY124tFZEl801nsR2ZuG+J5iq9JEApI/L1GDLJA0HO6\nxklLQ7D3ii22PSUmYXhrC4lrN19Sv/kQjDBTZe2zS1wVjyw8WHM1yxT28GyB\nkMzSgiIJ3Sm8nNlmWnx+pmwWHuqIquMQBxZlY3XFnG1FuZpLbie4DORcEQNU\nP31RHDO1F0y1uw36vdSbvWkDQtAahvDKhIxLervcmPFgmkvYtUwDcQKpvPxc\nr5ixbfdA+cDM71PStAZ1faWR+ifewqjjqA4CE57AV2M13N1u+wsx33eQ2stq\nDWsQeR1k7SF3VoCBO6bZHfM9NQWKBVTET5mgjx6WCHZ/G9EMgy6GdkueFvL0\nxeCOFzVAhVcSzRJt+ZpjtDnslOxGLeoQvE9j8r6+EBW4552BWG6pXmxQ3rZh\nDxBbR4IUWma+CrdHI/3ZEc7fJBG8Q48yMI1y/Oqa1oaVQMj233dM995D/ZV7\n2lh88/2yWqGgBYyGkmoYElOE+5CYR2zp/auX1tiT1UIDcmoqguf+UfEeDHxf\nzjOF\r\n=of9X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"46fcf9659b8913bd522167d3a190f5918768694b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.169_1591049632892_0.26451323792816916","host":"s3://npm-registry-packages"}},"2.1.2-unstable.170":{"name":"aws-amplify-vue","version":"2.1.2-unstable.170","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.170","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ab3d26d6b42d948d832ff33a1f745c76165973ba","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.170.tgz","fileCount":47,"integrity":"sha512-pVVNHfzJSkiJQzO6mcmVGgYtWjQ3SMAFlexcOscZrmrcaFuajYQKA9k0Z0vPkW3oK+RN7Itlvv5CUgU5nPWP5g==","signatures":[{"sig":"MEUCIDkaFadJy+WZxlPz5TiBvS3A7yX84PybwmXZnmA+rtb0AiEAgpFNnS0qkXZqGIOTNp7Fd9mAjCVdrd1LGw7uViYP790=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1aFPCRA9TVsSAnZWagAA95gP/AoWH2SSR355pX1a4MpW\nmamkvEkqz/TfsNpIvK9F/ZsJjugMsvtGdcLKwuYzTPB2aUc/Lxm1j0y4P/Td\nMWTLq6cQK/CrGshKW8YkYhPGfKZaa4ubZHELWRDQFKYxjN2KtMZ1GFagKsgp\nhe2sE/sd7E05LlQtpsboHC+xltqfAuUQG7tysgZSiahcXKXw6SCVDI8IcHNS\nWdsjuo/Noxz4eRX5fCjFRjVNdnj70HQ8umd7pzQ4AV5zqWdf4HXH/aHYq6gJ\nH78kt66tZt7Kv6MwdR0ulbllD1JRsKI8PrxzhwEAETVlcNLLj1JzMY0ee8dZ\nxLX3PrdW5RzGQ/7Vccm7jzEiZVtnqg3io9S5jRKCPAIDoVwMp/7WDXlXsWbm\nRrmLZrV/oVpDEs6sln4xF+16MTnHXCeE4eVI+/WfekDkFzRJqjY4VkkYlinQ\nu9HJ7zr0seCP0H/AXx/FjxzNTfFdKoQn5uAylI8yvmjuG9nDqUm6+d+LfQ9h\nLf3SCFb6lsjsDy5NY0rP3i21YtLzNS0U/XDHsEduHz/nGNo15h+pMhROL0Ok\nZWEfJBqDyDOjq+SsYEmssVMRNYjlhbLW5y3swBjKqZ2/v6ULQ46igc65obb3\n9Mq06E2YjBYDI6c8msZa0O6Vzc0Rl7PFaH0Vqe+6en0RjrFsy2sVqskuHTH8\n8ofs\r\n=KXTa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3331e9a713b38bb672aca5dc667ecef30b8820ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.170_1591058766787_0.5960538635115047","host":"s3://npm-registry-packages"}},"2.1.2-unstable.174":{"name":"aws-amplify-vue","version":"2.1.2-unstable.174","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.174","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"78f4ea1b782a5320a60f94fd7e3db2f013fe4577","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.174.tgz","fileCount":47,"integrity":"sha512-Gws7I/hKVr4iuAdTXZraU9WMdAi9WTJbpYj9nDeSNeqJ0n85fUnbL7NFay+EXtlqDaAs+9ShYg1etQx3C7QLFw==","signatures":[{"sig":"MEQCIBz+jiMbXQNAqitOl1qn2zBZkLJqhYuRJJhvmC7UwlIJAiBwPsUdF+gKtBw6RP7okdpuFbKOz3F1YQG8KR/Y/Z6NAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1tkxCRA9TVsSAnZWagAA2kIP/0vpNbCM4kiFLo/g/QIZ\nlNzrEQhQPaz+LLCmAv4RWY49YAF82aQCdUmcQ5Lw980zxt+HDBVAPzqxa9QX\nJ7BjEWuBvbaA73+iNIbLrE2ttPmsARlKVFiS1PmdDKsfbWLaycbMOmyCZoTt\n7N+aezVi9lBpEF4fqru3e9nmfrYfS/CDjO+2qBm6aso0hnLueCZlqUOIuni/\nHfZ8Hn+dOUfG47V4pM0XtgTgCDTn/rhkuWdOO5OsAgolbq39FrTeIU0EUD6V\nlnvIwrCFuIJajJclv1IshgYHouPjLSIsQxeOYXw+aifTDTFdACog6Xhd8Tek\n3l6jvEi0XF7HloGorNLEsrhQVYLEID7X0oSa3FJke7RtyIkecydTVrxLaq18\n1KW5AMhwZYLAVu7Cc5OuveqCBZ2oEghZgfkf/f07vpCVFkuUC0KLAM+BB1Zk\nvxLmm7u2hplwV1yL4KfiGJuGDBHH+6Vq6QCdLWLBgqos9MaDXo2jjNfPWzlB\nXKdZx7WhQlJduScCqoi9Vc1dezHvoSM8UblT+rdlWB9TtAdM7RNndAI46nUg\nG1B3qhSOJ/8HKyBmyQaPLcZNr7nd55igqFq7F/gbuPrl5Bfijv7MSSfUbbxx\nda1o0Xf/1Tp/8feD7Vff9OYfdoFtJCp2uNEfoVbpyH8oYW1TewyCJbBnjijz\nxBc0\r\n=oz6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c2692c34c78f436f273dfcb22d2384484ced4e70","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.174_1591138608498_0.4951193184417899","host":"s3://npm-registry-packages"}},"2.1.2-unstable.175":{"name":"aws-amplify-vue","version":"2.1.2-unstable.175","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.175","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0be4c5e956df8012ded650ef1d19c2322e534b9a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.175.tgz","fileCount":47,"integrity":"sha512-Pz1TEEv9cLL53TXSItXiolApkG84ssGQqYDA3R5J7xMlxbK/Jvk2SiW/gn2gXmmgA55oiJrYOolc3rzQXvai8A==","signatures":[{"sig":"MEYCIQD580YHQyiS16FMXomCumqPQQjw/hmvgcDsLcSTD9HWrwIhAIM0GDu2fD5F+K8f/55lIkKlVJkBtw6nk68RijhBAjhs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1zbpCRA9TVsSAnZWagAATRIP/0eNoG6IRmBc+RalDAkS\n/F00S+RBehlof7+x+Eyge/oRfBhG+UStB4KELZIIL7ZymSgxouODOMA7II3B\nJRcGu6r4kO2GF6070JmMNSL2mgwSQtmn/wXt4nH59zAkWc7iVwt7bRmJPcc6\nurB7WFu36jD1UF1EpQdYyYxk1vkmOjlUUCIk98dU8yOeOcWAqgQ3TmMM3XxF\n1H7rNhXtMIeufvtKVJeITn6lrmucBu1YeBMdXpyf/W9KeqShNB6XyIi1mQDr\nbXNxkAv3eWt4z0iqQJtLZBCFZxFfH8QLW/VAxztW+fW75Rkdy/GL3q98Gb/e\ni7+bZAw7XiUSnWMWm3IdGh9isDTMNkgzg+B1VNhRDTKRz5z49PY1Cq072AgZ\nESelMPa2uIWArLUC1hLZiKW4nyI4LlRB6lqvmWtnvZ4MyHRsyxIQwdqf8iD/\nJ3uTmQTDxzh1qsd1hRU4tu85gMPbjVx8bImaT77NRlVLUX2sZ0IjkYR1lKx1\n9AdL9CX0OKTxl0DwBJ1U/V/4TPLgsoaLeOadslToNh0+5bJsyY4jLLTWnJO+\nob9Jx4mLMbDrLUVj54UjzYJmF8av5RZimMHHklPZGYb9w8zL7/yVcOICGwZ0\nHbBroZBG2OsNhMtR7kLcUVZG2mqvFFDMRNwTUWzPorhAJdMBAZl0wUQQ9sCW\nO3QX\r\n=7nLz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"da2726d029c63d7472a32deffd1431322ec628ad","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.175_1591162600959_0.16906582689533023","host":"s3://npm-registry-packages"}},"2.1.2-unstable.176":{"name":"aws-amplify-vue","version":"2.1.2-unstable.176","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.176","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3bcbd63799003068daf3d288a39705dac66502e3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.176.tgz","fileCount":47,"integrity":"sha512-wEVMEq8AKf/GE1vKZ2cQQZSuR5/VcRRCu2XynU6Abz6331icnAZyew9qGFmK5VvaxA+3ePWtR9VvEPsRaSww1g==","signatures":[{"sig":"MEUCIBUQA8C+fg6VmLFmlv+9J9DSSVnFPoIAqb+/Y9fVGejvAiEA4+JXcYh+RXVt7iZbJxkCxuBqQTONE2te9TaOtyk9KIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe192pCRA9TVsSAnZWagAAFaYQAJk3svtsCyOK2pPa8+Ed\nhB+VHD25gO3d4jg1t+BD0lfS6HcAJX77z9FdKHS44IoaO7zvUQtvydgb0aR+\nTUuDT8mKOiohg170wD3r+4vSzsEQ1FGLNJm10iBmLOsewCgrTdGppQc/BMHY\nI5I2gwb857vOM/0yYFPV0BntCzQYuNIo8faoL0r6Ct0UVqXLgzf33wpC9A0Q\nIWHw5saAW5dR7CbUMEpid5ThBsShgrwVggqrdITftJBWLsEotzTRIeNsQ7Q/\nHqWCmTOW1UuiWo7Q8lRGm+mA+CRWCywgpJxzsIRrWlSe01dhAUNnFQiv+hJG\nVTpgPRSlkH5ySLH3yjWXt0sdvT/RL54t0ezPat7fNxCoXDjS5VE72KgrYLsC\n6ypN31FFs7eH2RGTN3IsFabtk9KIPCjoAHJGP3b8nc79awjgGhEM3+3eKJcD\nifOTgpbuVncAawzSo+glYtoZRa9wwIgQHH873IECHKbL7RUmyPzkk2m9uCDu\nBnC2NTQQSV0s85b+A8s4XJh0rSuN45grwC6E0hdHRDQ8ApVjEJIrpyWLhJ7X\nxZT2eiIiU2gEQvQfBFDQ7A/N+X3FbSyq3AlDj4RAqYijzH1i7DMPUWYkILCO\nKN7oMtklAtjRQu9EQtZF0H8D+Txw6/shgXCRlXj5HX4QOaAxNCXZDoPF+s0h\nmsxq\r\n=QBzW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9761ead5665aca598b64578d29caf9d47eeee583","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.176_1591205289178_0.29038498127608436","host":"s3://npm-registry-packages"}},"2.1.2-unstable.177":{"name":"aws-amplify-vue","version":"2.1.2-unstable.177","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.177","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5bd5d91e989626c6eefe75b8114bfc0e9aae5c52","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.177.tgz","fileCount":47,"integrity":"sha512-ApnotzcZmF/Zpz8AKIOSS0pPhRhg+ScPuMss9QPAXdn0gjyRYYOjpPyWz98v0FAbilAZsHfYIKh35NDo7zw0aA==","signatures":[{"sig":"MEYCIQDUFsj4+SUwRAM0HM7ypaphU0o2tpKHfUBJyunN4YcAjQIhAM2MBSNYfTpRojOvohQrkxHUN5hkAwfm9OftrYyultbB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1+HSCRA9TVsSAnZWagAA0VoP/AgYXwM0RmWTG9F0HJ2B\nSIdHPKf+Jy5RriLu2eqm3EGo2hpzI8WdIRMIEwQBX/oy0ODydByIR0yj9u5N\njJJFLwlwNJRl03uhW8aKGp/EE+TKcFG0osqsf5f7EyCm0cETF7561x783xg2\nOCF8mQvf+db1g8Q7ZKqhXRuRwD0aEi2rUNLWhJ3AddL8lZVd4KCLAnYca3pl\notbRnOVpxSbDm5MDEbM5MWW5w0yN4+kTYtFwOpfXSFOgzLtmRKadA1NBIKIB\nxeZVwlKYDUGHLRDjmDTZ+q3YEKNdLNOCZ87L0ZyQyeapwwfHr/Uov+iY/jZh\nYXt1rnjQKONkdm89B7358HTfQtVTkwTPPzxAWayS6KgRVked9UcrCUlv4xWG\njuUvRRlyVKqcC/RULIXmNqDpRyc9fvUEnpDiw48HIjwiH+86NYSt39oTfuor\nNIg+sAROqRIaS3cWprPIGrC3SWVurkvEslqzvNBAisJnzfAolm1T72Z+TT32\nVvBrzXkKAKCGKE/QRYOvWmpz1B2Qb4vLeL/tWU1qINnNNxTYd14LrJ/dwweK\noCOmOTl26FxqFQdqHtxbEQcCAcg9J4/Q0+0npN2G8BoMEEd0s3wpxojnOVVt\nSFb7a8PToCnJIykJyYeZ1MR1EmmXnFV5WzTAxoaKhexm4A5Dz+nUjIaJYXBJ\nloPv\r\n=IMqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ccb69065a3d92ec4ec79184b0d55f069bb652980","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.177_1591206353733_0.19443759799145344","host":"s3://npm-registry-packages"}},"2.1.2-unstable.181":{"name":"aws-amplify-vue","version":"2.1.2-unstable.181","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.181","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"77207f1b412094fe8670c7431b7e3ce215b2c293","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.181.tgz","fileCount":47,"integrity":"sha512-t2uEMM5ErtON2qE4oAEdIqdtD+WE8eIgYDK/RKDOP0bdYLmeRVSZccN/lvGsqnMYxHLt24oMJ6Alv6GKDHY+eg==","signatures":[{"sig":"MEUCIQCztXdA3pEx6NIXoRvgXNo0+qIDGDtTpFYyePMA0sBrtwIgZNIn3ypORo2XaXzWWBqx0SPeyKRxhIyBUeKg3X1AzT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2EK+CRA9TVsSAnZWagAAmwUP/0QLd/SltpkWauEUVGJC\nEGvoBK1k243rv0hcLERY5W2hXX5nOm6n1vVI40Q/8jWQAVkKoxdLp7qagjRL\ntobhEYAmUHQ2MLnG8YgbCS5zof9tHaOcJ15G6rJrrgoU5/SykkEUO2G+owCm\nQCs5zpqWaoU9mp1O1Iqvsa63XdV9rD2vL2z++l61bs134I+ByThi7TTrQOoJ\njPMOq1A4/TH6jdB68eXl8Iako9Ltsg/N5giJ0f7BYS42u+sqLZKP24reUd+k\nndYYvC5Vtpo7D4iOD3aXjYn+b1rmDQjLuxLNqh5gNRDZ+8R0GVJbnFKIJB5Y\nRscZqNwsBRFB8HPAkDJgJgevIlC51Rcvz7nhPKu9buAq/2yRvVXmlk4gBtHK\nEnO9/QhENb/vPLhPtjqIWgRiXWt3rrX7WKeAE+tpxoEzq+TexqgW+uOzEVoe\nqyV6WCtIUhniyp1hXxtswCSmF1ZxQbZvyF03hWK3sUqFvk4z8K1dSAsyx3Sd\n8uYe1MEvnnXx4HLY+FqC9bat+3Jie1UQ8/448DlP/sgXJpsuan8QK2ukihVt\nApLR9Y9k7SmIUA32/nNL/ONVVvxgxM/e+x3OZ9YL5ujicN8tXmqnZFYDHFSk\n2gZNUiCgtRCIl1kfOTynl1sb/V6nucUsmjKSqPNJSoV6Ln9MZRcnkyWU7Vfn\nFf5h\r\n=TQ7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d2fc76e789ee1bcaf6c112e7b661089d746ac355","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.181_1591231166223_0.2659244141669548","host":"s3://npm-registry-packages"}},"2.1.2-unstable.185":{"name":"aws-amplify-vue","version":"2.1.2-unstable.185","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.185","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"e9ae3a79088587c58220c717af7a20be178a72ad","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.185.tgz","fileCount":47,"integrity":"sha512-sRE/+EFeBoZD7M4tuRjtvDjk80RzTa+Lfs8mmAyUNfLBSghvplyBqFT5EuHwbh6CgeWpZRgt+WK+VRI00q/8yQ==","signatures":[{"sig":"MEUCIQDewiGuwjLzI96xxLzP31i/UVY5n8Z3oiusV2kyuF0n+AIgXvvO9i+gtsOtlHl0C3q7ZWU8ACK0jvMqRauj3FXbA2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2Tv4CRA9TVsSAnZWagAAPYEP/jWEFz1XPvtqm1Y5fVas\nC71tonwQZRgvIaBYvjQboh5JvZoUaJ7/U24qWP6uYW/Z27C03JRJJ0W7CJiw\nFwln+zXi4ym3jH3f2UQsRk59IA67rtAQysqV6b3oboVX4kjuzRBU6iT6LWJZ\n78chkh8+lr3O8ph/m7KrrUAQJRB2ky7eA20T0WHRgni6UztCldD6tpzIkm27\nF8K5ZwQS/4PfRONa1MVWs7sYKCB0BBmj1wvoKVCXN79MRyQPqm+i6lPWDaVB\n1euxshFhqZvspaCoZ01NpFGe8pwGQpSYzVR2tgjFpC6kW6bXC4ncV3TVN9X7\nYLuk4q7fIfJMMQ8H2JdKGVJKeEBEJeWXVZMjpyBQIvEutOLndQbNHekoWVKa\nj9B+O36HwURtGf5bVV2lfkXofUZDa97KDLdEi4KK1WJVb6OvUQSsdP1s+dMv\nz6ex2tKvz5EDu63bYAgUg5Tz8JQahafDyNxukPx02OefYg+jzNk4csBsv3K4\nEnXKmJayapBFr0r0vX4a8ygWPWmtynlG3feZF7BglcGH3RwvcFHib7ZJFLk9\nHZmomn0J2YuVWSSIm3K+MiU3JFJ15VqNTZeZI7jMECbnIqvwvEvy3deOtUdf\nRW2TgzvXZjVi2F03V/+pxK6SENSO806UBPFBS5ebVs/Y55uQQB/i6YG9XrDr\nDg1e\r\n=DWYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"57454907249703f77f77c921162acdb3179f89b9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.185_1591294967631_0.025567812823862113","host":"s3://npm-registry-packages"}},"2.1.2-unstable.186":{"name":"aws-amplify-vue","version":"2.1.2-unstable.186","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.186","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"35cbf5a01a4706b0b32d88137285df787f31b1f5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.186.tgz","fileCount":47,"integrity":"sha512-bSoIcazwBZnCbUNPOZAd1u9A1yrrzagdNWz2a/SjGwanenZCGvGRq+rPXnMoRwSctRUZC6gaw+zk78FfLFtSsQ==","signatures":[{"sig":"MEUCIGpWc6t9r8UHNdlANGnJAK63hkt+wMgK2mGwD7TAzTCOAiEAr/tXL9iVCb9PlsRN0IOwlE9lQ8VZE6LjaiAW2tNcPeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2ZGwCRA9TVsSAnZWagAA1acP/RjW4x0c5qSRN7jI9pkI\npR1+rfyS1/Rm3Gk+fuJGBlAzo64iKEAVqkujI/hTVuYP4/Sbe9uaOMiYeBcj\nhK5okK8cg4MQszRzA8lMfTNsKXqrCfEte7eplzQW9YBYxJcQh6Q+r2uOClk2\ngacdSub0yG4zWYYwfKAnyhSX+7fT7HWaMv+I4hI2z5cYRW+x/TIQ0dh/JVAe\nCjaJ+ykHLi/PoE2TzU9692N7GR4CvgY9JXt2QYtLyeVZPS5s6cQ4co2WklI7\n5PMbTQc/Yejaoi+yFzfWdpF/evOg2srKULco8rjq9TVIgAJYYjasvtyGHltl\nHNyh82w76QaLvRJowAewwQ3Yk7WW+nCj8Uc5/RewPOu3TWQuxBu+upHfZg02\ng+Kz7PTtKrWuZTsVTQWN93Kb7svEhYkN7w6S1+WuG24d9ccQHBsPQPBffLFg\nYsVvSG/9En0QB0/LZyhtNmTqlthp2DhBsrbKK9kG9aZaBibvCCe5hKO0MnVF\n2wia2OWru9s9mc0A5sw8GER1e/ixWejUKDU2pp5s0U6mel/Hq2GzE7bY7YOa\nW4V5Vlb2kCjWeFWVxm0DFhn5cPghfWah1lioceLChf+8UpjN5q7JWVVVetWj\n6gtiW3ORypxpGOkFGQUMDrOaFjDRr3NuZ9McWsV5xmKjajXGpHPUVjtGEXSh\nkhpx\r\n=wXhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b5347ab620763551060741a1b78e47c1abf7ee6a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.186_1591316909017_0.7846211727897594","host":"s3://npm-registry-packages"}},"2.1.2-unstable.187":{"name":"aws-amplify-vue","version":"2.1.2-unstable.187","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.187","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d23a4543f9f2527551d37b82bd55b8222f88fc1c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.187.tgz","fileCount":47,"integrity":"sha512-XCH/WwjdFORcnJHN5E46cMLrvMe9KsJYA1G/mZ64WHdzdbV6TlRPXOcXN5KMHPhqnrH6UgzsFT1w8yCB/mg0mA==","signatures":[{"sig":"MEYCIQDKz3bfslEf2BJk9iQICOm9Ekgvo3l5zWUX3GUb/NtTrwIhAL+2g5FgKjBP7ZtQcrrQuyljR0MCfjel4fcA8CnoUHgb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2tiUCRA9TVsSAnZWagAAiNsP/iryTRWqFug9qM156ybs\nABhf1HX22gMkD/73Wxce6k4xDfLXYwsLbnar1uLovU4qA2a5VEpwMQVZ/EIG\nhIv/AZ0fuVsqm9wyOJUgMywz6aPKiGz9Xk6hQpBl2pMzKArhsUcHkw4ZiiwK\ndue2ytVYxnCfY+qbiHHPWuYJ1k4AQRFcGKRxDGDX6L5MeVP3Ul5ya0URjg3A\nJ11s52on/+pJYyEIBH66CJEQb+7W5i2injjHNFHZSSN9JSy2TYY/mZRaIilN\nNKR/dpEqxfMMjnHhIQGWwr3eAJxzonpPespzZNAFJJzjkImX2RUt2Uhj1eAx\n+yu5Ap2Hsp0sjV70HzR/wd24gAfovn88a5aXTAlJiCp/L3Z2KXK/EEVpySzw\nOUzDVj/83zyjoLOkC7BTM9wGiAUmeZlb/EBXPfj7GnAdP+Plzu56Qoo6VmP3\nwUNpgknHICxnNrRD/3pVrzJ8J/oGcMI6pUxAcnkvCPKSwJS9iy4qoRAq3Eib\n0TpgrO6wJcmcU3tYyXxvsX+CgiBlE6jIJGRRNSe+0aryp9l50FN8YqZJbqhx\ngAnnG/kymwIk4nOiBL7nklXqzT1DYvNkIbG9xCiqdpYSPzBWSy7wGXq2do2Z\nlTkhr9q/MKQ7ljJJaU+dPJWf+t1GCmEnB+CB1rCUD7adxyLB47tQPm8TaAqp\njL5Q\r\n=88l1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"441791c24242024fea8a10698824faef057323a7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.187_1591400595950_0.40645850199947064","host":"s3://npm-registry-packages"}},"2.1.2-unstable.188":{"name":"aws-amplify-vue","version":"2.1.2-unstable.188","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.188","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"aba78a9e0305cf706f130d41dc3bf162d01d9ecf","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.188.tgz","fileCount":47,"integrity":"sha512-A39R3x6wwyg8B1z7oidl63GGG0zpXgT6TVZbPOvPxNjWhYEFMb8bNiaLRIrtmFh6UVquM9lWzBo2bCemDOKa2g==","signatures":[{"sig":"MEUCIQC2/m0FWGLjypX/mRXr+PQvPlsvDUjgNffrKeAWSc/higIgHpP5VYkBjULjnaiZISkfpX2jevdxY4bx6aSLrjOuBaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2xlVCRA9TVsSAnZWagAAM6sQAJU/oeg1vPhC5ly655Wo\noYR7XUpcmvIAUJm8Z+M8JX656fRrc6tbchJyCWEpTxkuxdOXFgxJhbsnaTT9\nBWNNzOVLYpAK8TMNnSJHwdNTYzwG5KkT9TT0s3NDI1rFt0rUXs76Up47Fz+4\nA2NvYF1vFkAZtCSeeBy41RuaCkdRkjJYJPHGNZNNoNHBoucsO4I+er8RR+sm\nTg9/CkI5Jdo0edaYbZoOKbkZXXinsnrMwcF5PKWIzFnoJTACocygNIXzSLjm\nbdiY91cA9m/F8JNND/Eq1RciLmRI9cGw8QhPdUifWo3eDxUhJ5EqyxmysJLG\n8fEWc4Om90N5m4rm/BvfkPHp+ikY2D9IkTbTP3z0pIsExID4NRW67KaAiFOj\nvVR2eAD2vzSZ8ifbdvJAE4HQ/YT3oRkE/sz6eb5Z7oeSg7G1u8fHnKUU/aYe\nuJnHth3xGxGanqrgkOVVSGekQ7KIs+HBmXwHbcAYeLDWyY0yFLyFVjCOpqlY\n+84yDUfXWgA+g6qwSpZ7kPDbBVb6M9nX87Kqm/36iQwLgWNzRdSIq7liFLZo\nNiJwRYUaPo231IWsxWdwSbN4zEiO+e3IVCB9D7Oa1GJHj75xVG7sNXYwH76+\n+BGQKJp1ieB5cPr0/yMcuKZ1pfwfXh/dfG8iUkALgvRaMfMeCHKp0RGOdS5k\n1CLh\r\n=NLjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d9a5b3ee2309f1703a349a8d39b2a65dcaac5f61","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.188_1591417172450_0.2369869406646563","host":"s3://npm-registry-packages"}},"2.1.2-unstable.189":{"name":"aws-amplify-vue","version":"2.1.2-unstable.189","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.189","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5c7e087a2023936fe0abcda5e87871678f59fcbc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.189.tgz","fileCount":47,"integrity":"sha512-0F3Ya5LiokXpOESJ2E1pWyPC+EMDvS2JHMBd0SSR5IauMKmgg/oQ3Rxqv/4OJ2vkHx4tKvqvoEtkcPH8OOfDoQ==","signatures":[{"sig":"MEUCIBHVWUAZtjkTRO8WBk36UtYMINeNaRDJngagwW2SEM6DAiEAyDzC1PZUfY+ulqbUrw4Mfv/HsvCEFvVml/KssAFJvQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3GpZCRA9TVsSAnZWagAACAkP/izYFVUS8aq1gzIJa6nY\n/yHg3f572vQ4QRYjolpmoLElUQaXJE2AXdP/yCBQVweTnqBb21l1fFv74xjs\nxfPzT80aBO6qeF46mOLBaMvTZJct256gs/E73ekbXVEdoMuuABZA/1vSMmnf\npc0nd/w2CobTqcX1czznjOWN11KEzBYqHN8n0V+bsQrjETCtEO3GvPiqJvZ0\n5MMSTCihtKzbPsZqary0tBxsv2mHOVjsUM/P8lSehlMZF+U8Li91Jg4b7Fqc\nTntVi/kwhzkOHGh7ftxveG/ZMM5IV6RTSzmCgyMX57jQfn1rxiHBfMJ4DpRo\nssmWQjyDKscmCmSnYW3IKiXArfKU6IqDz48bsUVgBiKwyr808Z0rw126E1Gz\nXkCJMS6dzSECZaNQeNZ7lfZde1590S/7rvrstyTnM65BYvv2zw0//8Wu5Bbe\nGNvnkqiMsGhW8CgmOAFVPCB4VTwjWvBTUgBwHCNmyNOAhtAExZrv+21nWake\nVFQUTEVbTkKHYI1+gygD6RLb8QK1rbrW/mBSe3UkRvbQ8xtLnpAeJM5Yzbpd\n99NEIjqdqVdS+sbM6ipASIRLDX8dQd+ipSgbZj3sfXNrRgHEjpXZAPHvzRwW\nNir5718AXYRClHQV6ITA2ld8TljA5WBJhUwzbWT1nx3wia1c4e08bg+aofc+\nAQkV\r\n=dETV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1a6e0ecff70556559d8fef6028ec4011775f5b95","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.189_1591503449127_0.5326607724870209","host":"s3://npm-registry-packages"}},"2.1.2-unstable.191":{"name":"aws-amplify-vue","version":"2.1.2-unstable.191","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.191","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f22b33c57fca6e94b7e4c26b61026797bc06c47a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.191.tgz","fileCount":47,"integrity":"sha512-FczdZVzE2RBH/uv3u/XksVT//Vb37A0dFW6P3H/mJ1/wTZkHe9KfVgYpQ5tnhHtca1sEisLta7GrMgVf3fH5mw==","signatures":[{"sig":"MEYCIQDnkyNKDjnVP9qWElrcLKA4tsyi9JP1o2ohDJauFlYlrQIhANRJzvkizd7RQSb7JUOZRdoied1vCcCEIQU/CGUHfrA1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3tH9CRA9TVsSAnZWagAAYS4P/jbIZSGOFOv6ZzkC3Dea\ni+6sL4WGfdtjemF9odOLNkY/YU4fOTyP78X7twjhAqOR58yvPni7YmOuv7tx\npJsMNp48oOocVp6Syk8D+FJm6cObWaohqF60zP525UOJhCl4n1PjF22jK6Qj\npJP0KwST0OiGNqnBiSUPPjot5wKnSEMpmwgTf1f4/oxKEYA4USfallgsyjSO\nlH4Zj8yd8xJLMCjD77tZ+oJGtlhHGIe75hymujK9FaIJpmvzISYwvkSDH87z\nXz01cUU6Xewjs0XOhMBI1EQklf9LmJMNzSLHEiopbQRNrxJledNHrysWIwtX\n4gGMvcpiuJQm5eU9IeItjnMN4AuJGGMugGyEDl+R82dBz88EtmgLQoYbpPJ9\ns/hqzqqoG+VXr3rBhSCC9chxvy+wif3QDbV7cW1f8I9AJQEnPnQKfNpoRd+e\nqRZMQFEwHjQ/Zp6sm+HwdgF5XCaRllR+XdzHFfK8EzyxJCz0ADbJt8uAdQME\n1BPfjXxC+tJ3Ln6Jh8geV2iVO91VwbDKOhv9qCqVVUCIclPzn2QN3gUenMD9\nmg4DeI/zTwRaPpiZJeCIIF1GbdXnQ1XmAi8HRvScZm8Mzz4alH9LaVaDcuGB\nO5GvJWaBwN733hzxY1G3UvTF1RWkwKDSKHkQJkW3+aVA5OIMWkvpWlcyNbzt\nlw0f\r\n=KIcN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"084b2653219d5b8cc0f952ebb74039b2a97e6261","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.0/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.191_1591661052509_0.5198705029091111","host":"s3://npm-registry-packages"}},"2.1.2-unstable.196":{"name":"aws-amplify-vue","version":"2.1.2-unstable.196","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.196","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cc40704757ba7a9c3b48c4bdbba2f1e3f0cf7ebb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.196.tgz","fileCount":47,"integrity":"sha512-KtodyCndQAwane9MOU7xAkmc6mKu1+lBHcpMlgRaaT1kXq/23NabqzdU9WyZqaqwwQNJiHSm8ZgqUsrDZWLw2A==","signatures":[{"sig":"MEUCICwPSrCFLqKpVEH9oGvtwxPi20zl6gjldaLpRp1wZq5jAiEAyePdHsr8moibkI6ihZTi4ieb2yGAxOT2O0Zosa287VE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+T9CRA9TVsSAnZWagAAZtgP/jjm61ILStSiEqhdTGIf\n0ATkTitEdbVHZObEYv7gIxZRGRl51+6kUB3T6LcnspMoD0ZKzjoJ0bfNQp1q\npZDk3iy3bWczlTx8oGkG0cVjIdEAPLeqAEfzt4cjKcwLsKwvW0ZqOwzWi87z\nqyvr9FukDiGZhaXmDvwzQbxoN2E5lsNybz+U+lcXZ98Fv4XfxFGIdL0ZQga9\nVYYulOOpgz2wrAh4VgQS/Rz1SaS0UPZEOkXdDkuxUAlXdGnYbLozwtqnOVzD\ndMTqxBJRrUKA4FeEYV4n9H21nSeN+I3kcNnArV0pnu6Vzi9Z9mL77JBD3/w1\nMR3rcz75KT1yXLnOYnF7ONmqC1PR6Ut95PhlrVbCKteG7eMC1d2zKsl/BZ9S\niIu67yYvSvGQGh74csgbBVQeuIDak4vym52/9680ntITnYonOnSRWa0f1cCo\ncWhyQd+OduGlg5Bk/sYZv2L91HIUkAsXOO2fi1Ocx56sToICyA9cc837V30L\n6MZxaXEtFMv+f261uk/WoZ9uDgcz/zlHuqx+sprzo4g4lmHkamaGBJCkpAE3\n8e7bMxcCUgD2r1WiEjcMch7K/jATtumNwrlMdMixiOshAKmKMUvvVT7ul++m\nDNUh81mZfNebWWK1cZQxpnEQObC7TEFhc4mcPi/4mgoKI6pMI9fhcZfXbzM6\nSmwp\r\n=165s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1e8d4ed9cdecf8b91d5032ae6125afe6b9048873","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.196_1591731452797_0.5970009062202251","host":"s3://npm-registry-packages"}},"2.1.2-unstable.197":{"name":"aws-amplify-vue","version":"2.1.2-unstable.197","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.197","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8b88e76bf8e7b92642f5dbe76350ebb972be2ba8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.197.tgz","fileCount":47,"integrity":"sha512-+vvE/DALxwoNqBwi49d9qcS2CZpCDkveRd7Lnj1+oAxbpxjz85mcJkoUsF9igK2B9OYOmm6ZaDJHtScmoMnn7Q==","signatures":[{"sig":"MEQCIGQMpJyg8ybC5vbeoM8JvQn7q8EBM4MPZG32oJXSJ0z7AiAi2WEw5vnrnKuCCauYO4/XAzc9kfm87K0NqdBQGNjp0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+fQCRA9TVsSAnZWagAARZ4P/ji1gdNJagKNnKRXJvau\nCp9RR89nVlrp3HayX5X3sq1+svqgi0S10c+JA9zg0S4lq2jOBKLsKyjRoecK\n1flzhIlQLgkD2mvYeh7xJZK297rGVA9J5ndQmZIuVOGMl8xLDPzDE83eWnyD\nrWztp4cxpf0iJwiiNEalWPUscXfpM8bLuL9yX5W928f2ReYsu2kMx84ile3b\n5HOIW9AtWj5AaMKFp8k3kFuM0mbI+NhIxJ6Q6p6fzmcxdg5PELqExwI9ftGq\nJIvZosk+OtEcIzJ1OPnsnHgxiVdcLpIJWU/dn5HTkCKRX94AL9sPJUOQArzR\n7rxbBxkWUoHZAFcbyHgTmoMy5ucwOiYbmrivuAL3R8z4dtiSxdTD0hFNUvsa\n6wEQGDWDuFXuemCH8ykps2psv/kau/AasSu3hMKZqxLXz5dEW7jM/UgNt5/i\nx40vvjmXNb+ujSIjkZzV/ALfwepBGGZr3bGBhe7MfC4/iIjw2quMHRWuSvnY\nMeQsa1Gpe9V2dYrGpbL7pK5hXfK8TIpaX4jWLcWO56ckYZPBgwJaigBTIWgq\nAxlYaajxYhhD8G/oK5FSJGqoybwCC840d45fDgOUGz4Nffyo9LCa9LvfDv5R\n1x7mtm4vOr3jFQ3LbPLRf38AIQh4drcp3imVU5jH8nqf16iC49eSjwAqIKOC\nmsJJ\r\n=UM2o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"05257da6604917ab1a54accbfc9945c6bbbbb22b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.197_1591732175772_0.13325905744750122","host":"s3://npm-registry-packages"}},"2.1.2-unstable.198":{"name":"aws-amplify-vue","version":"2.1.2-unstable.198","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.198","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"51922d6b8b632b3c85ca3bcce28fd715517cbd6f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.198.tgz","fileCount":47,"integrity":"sha512-40nMbvbSKdsrRCKmCFQikPl7sjrHts2UrnYPBrETfPeN4bmXvGTeH7tu0ceIk+t4kbF78Iz6JE1xs1LdMBeQbg==","signatures":[{"sig":"MEYCIQD4tE9BavpcyAKlrja1QDtgTqN5YqFYQmrDHtn9mIQIeQIhAJJBP5yeFAE1lmSJhs+ht3XbMmbbmYpl2CLinjZof3ey","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4lVUCRA9TVsSAnZWagAAVAwQAIATi3t4zWjvEmCjudue\nIb9Yh1BUHwl3ocQeVwZb72QyhPX4QD7GEdZ7VhB774FE3CSucIASoEXxF1Kf\nyirhL5wNCnBNMeYJj6mg+27Z6tICgdPJ4dFBjMQItan8R8l261FrwxVW3U47\nd05zDvgrpn2EeuwB9T4fto2a30AyCyUX7oepdfGBvzuX5o3sS4WJj+NmYV0d\nOje1EgXGYd5aAc5XGD80vXueLBUjnmRrBsKhJglEWFUNY5KjK0GuYSOUqhpq\nVhixQpcef0wEWG/oBTcjQa2SvZ2VQJT2BS7QzecKiprIogULScE+SJPfLHXC\ngcOwE/HFUEYzhwgd0vLVXI/+EEbTHAwTKZi4Ry5PIJsHuiw9qilBvW0dD8ZA\nujVy/aD2PCZvsKrFhLS3YowIJ/950Y64nvdK1EfSpH89VTwRDD/BEEd/0O62\nmGBCHg3jSs/ccSOQFMar855EeHDxMCLLNthzJnjHIYTersdnqiVw5NewAhRF\nfSFJoTYIYCQfWQa8kNMVPtqbztw6juX/b4TVd+yv4IsPsduAI0qikghrugYU\nYRnq+KqqdOFOoS9boG65UOjkFnrYf4kaOLbbj8d2jKdkRgI3CxxRK238ZB2m\nOhFD5ADcQTQsUcwsR+9e74uNaSUJD9DdIgWC1mcHi1fOPaGjCN1C9LXMvZlX\neOEI\r\n=SQx3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"863a375fda58ef2469d257735102f1721abb82cd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.198_1591891283698_0.02736363847202128","host":"s3://npm-registry-packages"}},"2.1.2-unstable.199":{"name":"aws-amplify-vue","version":"2.1.2-unstable.199","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.199","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0b549f9f1139e9988a5c1770b44eeb4e7abf4be8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.199.tgz","fileCount":47,"integrity":"sha512-HNoEwTO+qapJyuL71es3F4K7RInQ+0p3Fwj4rlNmtaQHGGoNjE1Urkkry5bSj1JoPPBPmzQ2lK5FXQ7l0axqPQ==","signatures":[{"sig":"MEUCIE19TSE8WwLVjT2hL/7HQMs1I4wqEAu3rajDWbvmit9OAiEAx7xOZZ9D8mVnc7EBPCFdeYAteOIisLTZXcaFoCI84os=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4ohBCRA9TVsSAnZWagAAGFIP/3mL3mD/kHlCBSF7QDko\njqmZydeTOD2CthyKjuBDIq8zzoLZ/ZqIiiqt39I1J0G5YlXATzzs3CombyKH\nHLVdqoqVmk2crS6v9aCRE23wCZw+AQChnHAysrtoClTsZTjkJaMZ1SmKQ94M\nuwNbdWTrtqGU7z8+ZBC4HVxvjbHerjmWOXer5mr90Aw3MC61ANaA6ZsO1ved\nXaNL6ZEjLg+93EIbAIB2SWNo7ygMiFuQ+km/049VtLxEsgzABG2qaOTqkFgw\n5wM7iMl5J2F8rliYWY97nIRoCi1b93D3tgHFBjvpn/+hH/rzDWW0Ev/zcObf\nn6KM1S71rtX/st1pjIJfvFV+xoLsIMCQEXWZn3OmqFaCbeCPfK03Vaygy7Dw\nfRH80wmXEpwW060u+Wxp0I2zgm0VgAo6NFHMLV+UJds98WtE6m2LT1b0URKn\nbLsBW4eNK85zu5cwLJxOfrEOLLTZGKnyz2TwUbE8bzdrNViaIDM9Xr8wlz5H\no5kwZ9U0MHwJvzK36jpBBw687mgPBI58zQysI6js1JqbttrHB6BCTcejaCcS\n7lpVO/aFEFa1029oY5n++vkXLwdzv4VYivgWkQ+BIUqaOJ0hryKawhCTb1XI\nFdpMc9UD6phuUOat9JRobfr+FXc0ILiW2IIzzp1zY/FgVmd2NuPFkAp2gNMe\nTZCY\r\n=pOR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bd07ee8e8b987021e58b9c25d5e1ef524aa4abbc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.199_1591904321256_0.5604738307881736","host":"s3://npm-registry-packages"}},"2.1.2-unstable.200":{"name":"aws-amplify-vue","version":"2.1.2-unstable.200","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.200","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"jamesiri","email":"jamesiri@amazon.com"},{"name":"jpeddicord","email":"jacob@peddicord.net"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"643665100c13c215f2b541741eb6dbfa42a483f2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.200.tgz","fileCount":47,"integrity":"sha512-T5/EO1ztkZ4JowU93MkZi0FJvMvYGodL1gqdyKOXtNhb9SN1xxpr5WfJddg4JhUj4+L4u0GMxkZMNMnJxJTiYw==","signatures":[{"sig":"MEYCIQCUz1rY12KM3tRMkhg75J+tpZP4VdE1Wl9AOcWDFhtYKwIhAM2OV4y35uxFny4UKKdVGWY3uGcKOaKsDwkHzlpEjT9s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4rvMCRA9TVsSAnZWagAAKbUP/1rxdDQPEHN727vwPOZd\n9pjl+aU09E7r0tBhjGG+gAtBakN/M5EKn0X5jM+71CiaPt4RQqgzPPaYEQRn\n4DL0OE+4kJg+6zk7FpWQRgTKQWQbw+0kOCQIDlwa+z+ljzLFPyrV/DhCCCc5\nV0BYUdNI8LQOyDiLIPxAYr3PPFYrCvAqcYACkj5fhJ4h4n+rKYK+c8hFj+Ze\nO0ulG5hGXfLoXl7WgKFin7iJnCYdrOhBXT21Ksg33OTS2UWMeg6xTTRfmnhu\nX9Lmj040hhBVJARAYO35+d5J3TbqP4Klc960FsYyRgOTQ7T8OkX+LNE5wp0V\nTNKVeEUMXvZXPSa0wQcsjTwS1Ql8QpIcTdLAmu/gTSwgWDoLsAwYbaWK+/fj\nRqwR9dHImgY6+YgUX1Zp3MdDfrHHIyLEvBElhIAWl8ZWfP76pLDHGZo0S8QI\nqkylyabtClimRbUmoVij9jtknUVt9QijIFojBhShXexoLs5qJvepTC4hyxhN\n+t8MWlN9G0fF6uhmTQohT5DI0vsnen6kxFMSKz3qekXHLToh+TlwEo7oqug7\nEOR4iqHT3gPgB+heYEuQP6SS+cv+41k0JmT/34N8OGqgBDERO5wKew/tAK/P\nveiKF5EI6br4gKKNekqwnf1V8VHlnLjW9jIsto2du5CfvzcjcsK00msjjXwJ\nn8i/\r\n=TWSM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"164d66bb17019cf24f469f12c129b8d04db3a8f0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.200_1591917515608_0.0889336680757482","host":"s3://npm-registry-packages"}},"2.1.2-unstable.202":{"name":"aws-amplify-vue","version":"2.1.2-unstable.202","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.202","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"53bed224b071eb5d4e4f49775992fa2d5e921eab","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.202.tgz","fileCount":47,"integrity":"sha512-jlpzmb5FqfXdKAUZGU5eZe6uf2tCoJEl1dQJHcTE0IGYdZFfNJMbpoDqOkDLuVVotrPb8XsGRisFL/oALI03hQ==","signatures":[{"sig":"MEQCID2QC3aZYU0kJuBvlRDjtNvwL+tMOOzZvIbKNAlG19+2AiBpsSxKe8vW+qNEcp7h2Ev9YADFZP0BoLOlLX+F9FqPGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5/klCRA9TVsSAnZWagAAmZ0P/0ZYOCeeiP3TbTEzAFWh\n10RsgxoSKKoGfAMmu/SghSlZ/MzGRJkAGafGIWes3NbQ8o27hnT7b/oL7eOO\nbVkZFp4xdW/A5z0MQ5OisD0Ll/07SsxyzCVgIGg3jUsw8ls19gNzzcJfZ/Zz\njcs0Uzldkvn8GP1ClAB52IeER9lc1r2EAouIblx3pI+e1txNboYue9Do1YRY\nwns/UKVbkF1M4b2fwzOr8ZsIfIqVW3YMM9qcCvTyqJaG+MKgyHymRxlheGAf\nfoQyreaBZNPbTUqoCMtkE9ZCADdVYyxUC+kE7ywAIpWRkcjrkUQlB7Z87ORq\ntHiz4tHktpdHevHgq92YI7AUHyWg/HeX+yVCLipuBKoHA101JM9/Kko7NLqH\ndvhOu5sScqRH/j1LHFqv8OQ0yRjvPMJDGv/5V8LkwL0WCL3MssuvoQ7fY2pA\neIQXvEQC6ka0p+4Udy/wXgWuZaq9uc88WbuNQVvCWE1mxYinStjEUAsmpuv8\nlrtKw+N3REjWKpxBgYEKQsLd7QcVtn5NAUYfZocR1JZNNVLlm4LRgeItfuuG\nCA2hd0MNOJNi4bTu3I7Ycff26YeJ4p5afD5sMh3kVsyFkOFp4iHUztkJ8l2/\nV0Bx0qGr87T7VuxRE5XwTOzoBoUeu2SLfwgrRSRY+pewxafp8ta3biLGBV5L\nUGwv\r\n=2Iw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"347ec8d60008a89602ccdd7263ec6ca2551ee9da","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.202_1592260901446_0.7389130237636923","host":"s3://npm-registry-packages"}},"2.1.2-unstable.203":{"name":"aws-amplify-vue","version":"2.1.2-unstable.203","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.203","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a02ca262c76c776533aad79b100310c9412c7afd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.203.tgz","fileCount":47,"integrity":"sha512-7v9zW6lrmcFwKr6M+lv86dRB7cXftlpFhKW0RTg4iOcqppyK5eE0bm+8Ihvsgz/w8Go/SvgEi+AG0Z/ClwycHQ==","signatures":[{"sig":"MEUCIHMJvoh1oeBI4iJNmRfxUsLZwcTXF35CtJ16hhS0Oy8JAiEAxe5E593UnulKMrfzcW73M+1ieu/o4LVsmVcUF/1VA6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Ab7CRA9TVsSAnZWagAAAvgP/AqYOb2a1RjCfQdQtwpW\nlXScomTGvMHvutrFG4kMEVOdsjkPRN+GPCp96azwn6uFmtLFZ6WaXeDSFG4q\nv3tQ5zU6YHKlfL75Y018drGEettVKGwrExMLq0eyPlojX7b73g+NX1oBm9MW\nD/Y4ZHwXl2D3tycUrOY+NEArvI9cxu31pgue/WKUA/auMVWXKswkd8qeQele\nlyVQGVCgJ3m+Dtaibv2qcT9Om+zACfV8sqxVMwsHHaKhXLc1QcpydNUoQcTD\n8PDk0mVqPoVqQ1xXnOYZ52Moic4X+cadCeyT3lxPs/r9Nnt3MSDbz5gfquPj\nzPP8dSk+ObRvGhzO2H3DISxKEJm4YfkeENSUxI1NXqEvzCwsgQi22m0dknUY\ndt/q9D7RbXDIkAOawPWFAhNF60k57D+UzBBuy8FwGN3vpK0Rzk5Yzeyb9kT5\nvfrGM4GhMOUPokHmXzsbg5f1NNEua0wT1h4Rh8cxpqZgHnxCoZ5ys6IiTZUo\nILWTqhLgQdF2XUMH15XJ60iuk1hmNtj4XtYFdzf2J8QiDwrdzVY76kNRl3iK\nQvxVQ1R3vwg94SY355IgxaRLLdTeYrShokcIjxL06EXyTB/DZDr3yUJ6N98U\nG17s/eJwAR1jwIzWes1JtvY6QkGoqH8F5uvTjPOLy7waI57o6nN5xMFSQMxj\n8+mg\r\n=zJg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"562644000e9b29993c25abe5d6908c47f170dd93","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.203_1592264442517_0.026607179062424713","host":"s3://npm-registry-packages"}},"2.1.2-unstable.204":{"name":"aws-amplify-vue","version":"2.1.2-unstable.204","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.204","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2723a13193288503d62cb72ccac4478bb7867d62","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.204.tgz","fileCount":47,"integrity":"sha512-zqVvdmBfb8XicLtIhnUXxRYDR07sSri9C9yV/EelZfEFzMqvOQgLxamrycooEmak8sRrS4BvSgQVUEhFWw5hDw==","signatures":[{"sig":"MEUCIQDG6N/Zy28w2t1RmE2dT5e73BFGSVAQIGQ2aWHcs31VWwIgKA6bQYIYIx+Wq4DfTDZ6mBpFNr1YqBwxbIJX0qZKRVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6A6jCRA9TVsSAnZWagAA1+oQAIkPSo2yPdSTGL9n4/qX\n4dBzrUcYk0yCBfKi4gN+6f2YBQTAwoprJs/XUUMw7zLU3heKmgpLJKLL/9HB\nNXCcZp6I7N4qZs20qv6WynlrQHR1NA0qagfJffV0K4RfpxPYhC11i30EbExp\n0YQjr8keb5WM/WPpqdzJASBTrg18tLSTk1ppRJ/B4eqRLpQTz7e6STofbeC4\nT/4GeQF64MMgslkrlrE8a1WjsNqywxMN0KPWD48+oCLCdVMd6sp8Dzb2oQW9\np07J1khF4eYbaJ3jUBX177Pt9/naoPR+fW9g5tvJIE1H1ySt/64vZKrtlJG/\nbO6fxrtIopuSskfFZnVTq1D5DID2abfyly85wuqqn7eKuDwpxuDyJU+8xvVQ\nLzysJe0D3ghvxehKVuUGHneBHWMOQjeoMufEsKWr9gHqnMri8WT2rV2A5OU/\nNKvANxAOuS7TFv1lrZTfUCgtCwYHAMFJHYAL7QSJAZJvazBdtAo07IMHy1qT\nu7ujU05YEUH59xk735Z0DUSptDAXr7yqwzEH534+FQ4e2dcQuC15n6thET9/\nuiYW4OyQwl4vGabMYWiqPJW6vCGsYyeO1PYQr6Nz5VRkVPRx4kjsb/Lm41Fe\nNJ9UEbZUmsMv0aF1W7dmxZxfQvo9gCRzGrXuKeU8xIZqUxcFlMH2RYHBUZeD\nscLP\r\n=6OMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1fd83360138be0359505c25bce2890f959c1000e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.204_1592266402726_0.016760626015551727","host":"s3://npm-registry-packages"}},"2.1.2-unstable.205":{"name":"aws-amplify-vue","version":"2.1.2-unstable.205","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.205","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b71ec3a4df976a06f4427a51e917e5c769c4b66e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.205.tgz","fileCount":47,"integrity":"sha512-XOWqqvEQSx+RCIkjalE+rDmF2000OynNWpE4OOUQbwyaELmeyIPLrHhXVvuYPe69ZLxdsP2eM3dtkuDNrO8lzw==","signatures":[{"sig":"MEQCIG0jFDBZg8rttG/uAGyLN/yzP9wtDB0+xZ56g9SvsXvrAiAvv5i8YX7ycP3r1Szrv640Z3DathnwVNWrEzaxORt16w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6VpaCRA9TVsSAnZWagAAmI4P/0DJrokMaVxtx8hM3a1n\nCgaxPrXLSJwvoCq2JY4F1Yx7e9A85+earFET9daGaUdVjq0eCcmhN6s/bAfm\nkYjpy0i6jJ0md1OEWj2Pjs6/Ag6OUasGLSdNgSzZvyWYEwJkUOSpDspjfc3P\nGQAg/g5NQmBnFHhJkRqX/DyWyF1pHV9QN25gyOqq4/gIRNoQwaXYuuyg4o82\n90mS4MdvFcm3PF0JpVtpC/Z4o4xDpGi3RoKSGwsfWi+9Y3F18yi0NR9GI31x\nESnXQp6/NpT3tz8jBhc+RLIU72Pt9nmO4bN6rQgnxWKfFjctfxO341fnW8BW\nos4Ld65P97anagdGGovZ/+c/Tjy9OSqJyg/yC4StcC2aZXxPorCji+M5XgnK\nxS+4A4ZWsBVtOdAsz4biMn/0nSwAYTP4bE6k8ph56TnrPa6jJM3dosVXnt3+\nIPlofpQYNPMSvF15sulJJuyicRWgqAtJ2+VFSvlcfJmTSKIGb4SdGxSdXnpH\nAbgkKfKRxcsJzQ0JVNZqX4kEs8I2vdiL2xJGKjpXaOraT2Rsz/m4sokf+wrL\nh4BBf8Se5OMMrPJQSdQw58ZPVYAn4+g8vRwI6/NpVylyc8C08fuX7XBopVeo\ntFIo+6k4kkN1Bz3depWtvmGk138KOjmj6gDFIfMCQ3m2dnqJ1g5eEEYgTMBA\nrwcL\r\n=bZWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"67bc43076891bef0865936b34d4123b96b873a7b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.205_1592351321953_0.0067426605968112785","host":"s3://npm-registry-packages"}},"2.1.2-unstable.206":{"name":"aws-amplify-vue","version":"2.1.2-unstable.206","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.206","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4ba805ae47f1c2e3bdc03b6f3544a0bafea8d07a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.206.tgz","fileCount":47,"integrity":"sha512-i2o3DmxPBJB6NHwhPQvuFmS9WQDp0bOJGafvNNdeZez7n20ThX3Z0l9tZuMq6mGDEEapcuJjT+jDkdtZIQwLHA==","signatures":[{"sig":"MEUCIBAWB6BCSpz00Gd/UkpzbDZzMWQlUYsxWKyvcnqKsUtvAiEAhOxEhIxwwZ21srvEpReEGj/Ur55M2KX9fHc8UcRJCxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6lHhCRA9TVsSAnZWagAAsWUP/jEyJHNU0fNAVOW5FNQF\nAnmX0Vzp7BvYXRDTCCebafBA0plQWWYsAaU8Z92xYFbKAREOtmNhdAL6aft7\njQ5yx/DE0i7AqDrFPRBJJfD+NAA2ovgSq4HYAS42rGiWJ0K38EBjmBvt51VT\nyiuNxEFZQgnp7I+bHQbv7L1u/GM//VbYqHjDFrzxDm1dm7aOIIfyg514J00u\nDvjNqDlwVorMtdAqUaiNW0G1VMNKmUZi0i2z42T2/wyQUIDLJGsZVmoUHDJk\nkLZTuIglcbKYFY1lLJWthlb56GivaSLjhilhTNWhdORb1YGNsZk4LKy8lqKX\nZNAu02sEk3TB4ads9yW9DLNVPiLfHtcpQd8/6ve+ZxvWX03yy7kYUIVF+lFH\nVTc5p4/Uh7hEmCrCI797GqfCsvk79y/2utQ1c3ou6S8AdYb77VrHoP0Ie657\nlgJr2Z5NJZaUr9lrMpEEIdXV0qanSCJJkY/MyBQoA+CZnxqF8svBwmzACGWA\nW0GzOzMtDql7f72CWnEOSEsIGJwimja234qF+bYuIVkHw3S6g0Hk0WO8OGq3\nnJt8GvXu3FIyN+/mjjeuFRJuqJzGm/7HgIXdxGm3ZJ3JdC6atTILx/zyQ3lJ\nfdQkMjq1q5VQAytus1Dx+z3VaK0zISlXJeOucRYJgJY1VgccWUYfnuK4MZm/\neT4o\r\n=j80k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"38350d7e581d4341ca569ecea57988ff38779faf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.206_1592414682156_0.9139885322908636","host":"s3://npm-registry-packages"}},"2.1.2-unstable.207":{"name":"aws-amplify-vue","version":"2.1.2-unstable.207","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.207","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9169d5fb38d243b43be24e7e24b31265214dcba8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.207.tgz","fileCount":47,"integrity":"sha512-EWmc6jMLTFL0WBqBr6H7XIfk1wzmU8TaY1poL4jSKmf9Dtgy2Qm6p4PJZSpDrfb+sVWrrYgnMkFz2nnl8RecVA==","signatures":[{"sig":"MEUCIC6j7+jeAx/a0OSRIab4955AIDKnrWHBr6QNgLMyt0MqAiEA6t2Jl1DuDjN4t5RdmFUcZOP0s2/UHFo6r9ljwS/qMCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe67lcCRA9TVsSAnZWagAAbX4P/i5Z8MNc3BAqPhEvK1An\nn8/o+sPfbqUBH5WWXKhipiAom7OV+IibBpU0dxUbwT57uULf12u+cinEQVgw\n5bfmJL9P1Z4fAHf31zG0/Vvb8cVKoywGKrdCVVsTcx9RilFnmuPU7ry/gf2N\nLNHPoHvI6ypH0ZZpf1jDoJ42lHrtO3zSTrahAVF7B/djivURYvbQNe11+RNL\nl+oIsH5bJEJKC2Asl+Yug6qwPTnPEBDacqrG5ngRnMmeZymckU/fgYQBDQ4Z\n6uAZJ+pSsGxHhEwVWc0xvtMQatoCwjYCVHyTs6RQbNycaUbk/QJXYZoOoL+T\n2BgDO54C0+UeltP/mtK2mljtSH+fXIu6NXYvBRN+SwyTQj+LZE2kz7zz6zOB\n0qZ3an5VfsoF2PywhptSJPq97leOdSjTzPJzG5+amIcaQOv8hc8QbIgsye3f\nyklsTYd94t9779jJSO3ID6mfXhqxwc668f2wb0q1h+8BXbc9IlESupRQMBSo\nlZm2ymnnaZY2g6Dc8Cir5vsB0H2YI/tok4dq11GmNuDfnnsSwl2PhTGxhZzd\nQuTSj9RaAz8GhkzSs63xYUfrSWgy0Q8jBwH5sEy/s/dXWOp1T4A+Av1WjN9t\n/XUjjH1Ljwa7+B3Jw8fGHXxKAW6w0d2oxvpfXiTkxgfIJNTkIE8ZgZ6XyXf0\nvr2o\r\n=3Vxb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e85640a4e18fa1d55411038fee58919ad73121fa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.207_1592506715756_0.1789571747041394","host":"s3://npm-registry-packages"}},"2.1.2-unstable.208":{"name":"aws-amplify-vue","version":"2.1.2-unstable.208","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.208","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3f0fed38ccfcd5f67bb24e368e401779f1328268","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.208.tgz","fileCount":47,"integrity":"sha512-uGi9kx6nUQGssr5HET1xjL9o02iJorXOiVZp0ViLWhy7HbU3m6+G1bl0Qix5ZhgLFXU8hVdPHjEz/cyhPvCocQ==","signatures":[{"sig":"MEYCIQDteQ34LcirL1JGYbxPM21XvS9/F4PSgX7ClOlT4ZmJlQIhAI0YqdUbUpZIIj6fMzSlNyMqGjPaSQcS4ooaonpRDeyE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe68BvCRA9TVsSAnZWagAA4ToP/RbS1C+loM47yv4po2iA\nopgNphsxpXvuXwUpuYtTKeCCYuVGC9G0ordrEuaOEWQHOnjjjDkS1IaEgu/A\nCY/a3z9I3KQJ16F5iTXtjsyQ5a1/yeIMq6QcT27KkZNXmFR8+5vcS/9XIuRo\nfy9DpPpKePInYIHYWVn+fQzwpgeyr68JVe2rF3UrOQHUzzXvdqiJ2/JTmH7t\nGhYyxBC/kwF+a9TvMwMuB+n2plp0RyDMPrcjwvh9/vG+tY7xWq92kY0JvmLm\n2b6On0i4JqYrVtt2N/aolrBo7nLHGk+53qlQum8NZOEkVWio8rRG056J+dms\nya5FFFmnORqYrfQoWTYB+DjUOtFWRv7pCmchIOdHY3JzqQQDqfVQurwfU8rz\nRIObY+Uk6IBtsyN4qkRZ29qF1+ZjGcVfkZEcLGKIrNY/lKaefC7nCT52ided\ndcwtZjEGQj4TEanspkNClgfkg/nLcmPP6sj8PXQ1E59FPHWhkuUF9Q2NpY00\nodknWIHWLHck/ImsH6FGYvEY5F1ZHbTKrsZfGBnuuCfHg1/YeKwKG0flxgHH\nfTexbl4PgJYermMFN6/O+VoBfzUlR7bgD4FInaAUBL8L6mwr3HMSwW0WXeNX\nISGHnoGy//NSrcOKDffcMDAUQCtmkE+ufCnv7Zl3zoI7zn0QAzup1Ou5jlJa\ngONU\r\n=HKBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2268c916b0972fb04b5451c94a4f66eb1b960c71","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.208_1592508526639_0.6066089444262108","host":"s3://npm-registry-packages"}},"2.1.2-unstable.209":{"name":"aws-amplify-vue","version":"2.1.2-unstable.209","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.209","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"da8cd801ddf3bbadac7745124cbf520275504d9c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.209.tgz","fileCount":47,"integrity":"sha512-/iGRh/5jIR+YJzJYigdQ15UQoM3elo7B6KvY1qU76pMqLW9a3b3fAcXXkXF2/WHBJtU5eSmq7aBg59ZiKnZS0A==","signatures":[{"sig":"MEUCIQDAWjkiOGY/41VOZHY1DOeGQulcRzXZjUfOAlOiDOyiXgIgKid3NTJo9jx7ZGaQROyJnJAfwDe2W4JLz5PbcBcd1wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe68YnCRA9TVsSAnZWagAA6F0P/3AMl52xsQi7tx7ND8yf\nO7kgj2vqc8WF9ic08gn7EkAgtksqpXc8wgFKwxzgYt6uiDnk1iUVaHKMW38w\n3lTWxFbhKOmIzHci4EhRD5Icrz3e8qMAU7fmna0a50EoA1Fha2D5czJHECvO\nH1Y4UIr9iVkHYPrf9RIUusCIn9hSUeRHR+yrFXtoWKUZR3OkqPn/cN99dGFw\ncaOh6sHsFx/SKA/CUFTu3l0ElfkosncMUAa63JkiaTfU+IqqQ4icTj8V31Ma\nvU2rO9lxH7s+VorE2BGG/dAlw8AmzU3ECoHUg49kD8g9v/ht7XjlJBoA/sqQ\n82LwPvUxeRbCIgsFaDW/YxFJzTePT4uuQ6FTGOZcCQXtt+R3wh5K4kVN+UZG\ninJOwDnDSnUYjKrODyRKuw+kSsVKZchuEPLd8WdUMbaGf3G8olPcHiZXKSQ7\ncpmmpA3apR49jezg646o2OpyXO37rZS4MskzWFkEAdD3/BYrLo6Va7+RFgca\ntiie7sNcTWSANF+0Bou5+WUD/Jiv1b6HHiGypgnJI57Lef31ngA5Nr9WloM0\n0hsW7mURV4Pd6Btn1MBN1bKFBdG3nYUlH3VEhpbVHT6VQSOuCKOwByLXFbfi\n/0a+t7XYQI1o0IIir+8hlpOVtbIOYtaUziwfFL8IeDNVl6QWt8sNeI7uCSIW\nMRs7\r\n=UFxt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cf26e3d25b4ee82a514e96099a0808b06c061c31","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.209_1592509991106_0.6820459376699051","host":"s3://npm-registry-packages"}},"2.1.2-unstable.210":{"name":"aws-amplify-vue","version":"2.1.2-unstable.210","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.210","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"21f3e469f1a91f06e5121eeda8eb930170671aff","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.210.tgz","fileCount":47,"integrity":"sha512-yuMZ7NKGLcHmRG0Cp3XIC0qIRttDuqcPQBqPqc6NHmWj5/OVvYvp6jlp8tXefZTz075s/GoIRFvH/9GPG3v62w==","signatures":[{"sig":"MEUCIQDMS1rSGJm7K7POzejXnrtcgmJfiA6yyFb+XEOGiEh1pAIgAJ03WAnewk5makMMQ3K3E7AwVtBMlyDKXfFpHTzUdqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe683rCRA9TVsSAnZWagAAtocP/jLkB0fAGnuHvFgtaDRz\nyiDtZn4n2vwg14XbwI9+/5DRnLqrwEpoevVEqMQvYaVwFsD2TdKePVBD/sHT\nNUDMyixUF1fbd9b2vJm6mB2k2/+npe9FNcaUxXCShkwAbtV2SKgIFgemALXj\nC4qsgHyXMYNCnVn8sl4A0HrQJTWv2vCDmZNhxhO7ZJjzOW4uwo4UMGomXFxn\nG8VhFT8FTUc6MJUgxJ2V++sWNK+z3sdSkypx/7kMcNUxC7bMRZQJGtUBWlSo\nzUCIfadG0LvJeT3Y149juswGJYo8dHn9JyHsa+SOmC/xWm2ElfPhdSkX9YCC\nS9ddXyrNu2aZFGNpb4B3qUHF1PW18hU3gmVE847ffKK0r9i/HitBs0XjDc5M\n1sBP2j4I4nwiEnc7RpFWi7VSkVs6vNuDHbau4JWdnxLmtpY8X5Geh5u0hpRd\nlmaLIqF756YOAIQ1/m1UEhKbISUuNgV6Q5POSCghhpu/C9nQw8LXbSAhQnji\n7qBAqaf4L18LuH9bxgEEiorY0zd+zR8unRmgPvaiE0KbYzv/p6zFLLtXkDTY\nvbV/0FMeq7mcwR7/6Sb+Qf+RCZMxwGuFk1MLdadm+g6ZmW1auDCWfPN9xdjN\npwGl0sdvxXZnfKIStt7syDMR8/az3/Ew7mpVG15k1I6yzoy0Ly/ZJSz2ztIO\nGVDG\r\n=VOZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7232afe1bcb394f7e57cfa9650f53119b569dc00","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.210_1592511979190_0.943656472821274","host":"s3://npm-registry-packages"}},"2.1.2-unstable.214":{"name":"aws-amplify-vue","version":"2.1.2-unstable.214","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.214","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"866577f1da94eabef1a9fdb550642bd4292c0f43","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.214.tgz","fileCount":47,"integrity":"sha512-v/db1CvOCBDIAsVFCaFFTAw+6lsMm6TBYpR+p3eRYPEKm9LKVUAvywliru2ueQ4C0y1UH0yMcnoBFwjtZlb7hA==","signatures":[{"sig":"MEUCIFEFmauF24H7jicAINd5gFtve+Lg9RiNsc3gLvbgM9XSAiEA1OlOUARhsC9+/kYdqHIgtAfAXujym7938YkDZwARF1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7OOhCRA9TVsSAnZWagAAU/QP/jwinMTgaPx30l6/7HzT\n50wZ435aYpBrMMQdHullIei5Xkigc2sRY4c5FebYj1iLVk2eYJKzdyed6VVZ\nW63CedfmmLQFnoZ2+iSuC3pPDExJhHSbC9tKK6894uBYxnT9XWfHfbjZ0+Nh\n9deQCj55FAJFhxawmAFjxXd170RMmL7X32DiAqg6viQBvItC7HBs5jE30X+X\nXZfocUhphnJt7xr2W7wfExjJHPP1tR4XdRAGoPqgYV6tsu/WyPyIX+pZtGl0\nWkxSgoOVBqOoKSatBphl449wLuAAsjFKeDF5AgjtCyyo2h60CEo3FOiOK/5t\ndoNeu3RuU+V9o97i/2tQ4JyAzn6/vt+bPbV6DQDZJfs6jGaT78ptCQlz8ZE+\nQaGD3Twt3mszxJu4OCu9/ApaNnKemJGykFe2EBTVcgTzbnnWb9e/0urrkr66\nvKeLfARDazFSaR3xW1WmFzfDqjcNAgmti93RcjPud2BLlg45a6co0K4B17La\n0b32x67qeyW2m1r3y71WobzLsf395JFVYX0vQhcptFa7GVQXLfAd1C3wmIzD\nYHrDtDqL0M3SZyiN4qMxxBcgwMZbJkDQkQtBnnNWDaYpSPSPbOtiLH8zN583\nrRHQg/FSXZwwdkKlzYYXWSYuHGTFp568wgUZM90xniPCm2vg/VHimOfiBhhw\n2qih\r\n=nXwW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"40c4e21b8cab18dd203e942083d8b6e16ed06997","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.214_1592583072677_0.39519441524879206","host":"s3://npm-registry-packages"}},"2.1.2-unstable.215":{"name":"aws-amplify-vue","version":"2.1.2-unstable.215","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.215","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"83aa0fda15568a6c0919b7ebf9ee8645b0443bd1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.215.tgz","fileCount":47,"integrity":"sha512-gsP3p9FPhNl8EI+IUa44u5oVLZBa0ah+oj1k61YY2ugmD9gLzdzWlhShXC3Ydoq7Ff2sAqeXJn1szgiGdbE/RQ==","signatures":[{"sig":"MEUCIAay08qTqQXeC4A2PNqobjzTSCCHRSQ/oRuOjw6soJjMAiEA9Ao5iPe1Jtssu3o3axPEZBJ3eFjFp6qjG2OFTLbuBa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7UqGCRA9TVsSAnZWagAAzG0P/jwoA5uP6aZT+4XjHaoz\n8Y5Z6KbsNS9EIPcJZ5CRYsPsnT/3qZGQW4q6VTcZ1WOKCEFSMpidei1F7AmY\njhOPKeWAdTUbf6oNglfpj8X/cG5aKdI7get7N+vyFLtOsDISQ6BGUYEyu2nN\n4eILObLTPJ5QJdhBvVsTnkcr+mbYUGha4VW5ZPhy9Hjq0IXUCQw/q0ztJRux\n08dqqyO4iWKa82/kkLMT/6hZp6b/0U6niCWJpemZ/9DrF24qRXfvxvtnmkg1\njjE/X3H/SPKfih2kpZSg9KRlRQwQUQVhFjWy2N4r61HNVp7la1bE8Q8zcNHl\n0NARXhlmOqMDkQu9OrANX0zdwGOp+UC/6Dy1iMnw/GCycMLn1gFvO31DeKqM\n6nEf7XHKo50bYFMicRJnyYTQMIaBsV7D47QIPQnYr08aOKlGdsDr3sIZRCLk\nzvj9l1OqTETFSmTCkz9WLFd4li6IlK7LRqvITWPKN+VlR2LRDADWzA3CAtgg\n6XVqbbykHtm8Q2bCQSHEcxOuClE5L1xub3p7t1TxFQxCWcNdCf/X8087NEfr\nDlFnEVgZFbrpPx3u94WhZIzeUVTTagj3ygm6roWftwF0/ZHZr2WfjEFNFeCZ\ntDuROWoUxgA/rClytC4FtiA7rX2FxX5+e5pxIUjUgf5dKG+wnxR2okLCEc/Z\naZKd\r\n=pmL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2224a5abeb125c5a27c0a5970153b3381750cbbb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.215_1592609413972_0.6816505193945281","host":"s3://npm-registry-packages"}},"2.1.2-unstable.216":{"name":"aws-amplify-vue","version":"2.1.2-unstable.216","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.216","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0285bbe4ec6e7712efa9ad1a72a18d900090d3c4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.216.tgz","fileCount":47,"integrity":"sha512-8xRSxh61r3M0+pMl6K1MnsZBkHR6mYZipD/UjNXr6UkVNX0eGj+mo05TPTqEoC0ADyqh/WHV7PVC9UeUGyImnw==","signatures":[{"sig":"MEYCIQDkDL5M+aVt2+M7jNbXngXgtpjT9U1VcqN9UFaLzkGGFgIhAPQunEuK/CUeWANGkHuEEprHkPZ8HaNeANa8VNlyhyzn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iQ1CRA9TVsSAnZWagAAtZsP+gOD4dQNO+/hJ1CXmQa1\nPSz6djXjoE0O8QV5ntZPSPIgdQ7d9fFfEfvFQ+kg1SHK0b4ml17Rj1ncAOp7\nJGsl/c4lVWp/kl2SSFBVC61haEITIslWYsE4n9RIwXnacj/1Op9DHjFB5mJM\nE/HMoHKHBT2jaoY6YaxHFjjotCXM/8CmD5FF08qLE7IgwytDyGVtO4p0mj/k\nYcxMqv7SECJvEnRtzc9/NiiiZeP2S2AtoKd4a7oBQG62KToTHKfj+eGXWPtm\nldu0r2cuFRuLZ1BJhSo64aIMmLXqdxVW8fak5F0iI0BzhW7fJr/VuNY4wets\nf6AACa+G+1yimGeqOprpx4UTL4NRJIiCVIb4zOq/d5y6XnHSaqRBNpdP3p6z\naZOmyYvB9tlSi3snQPdS7aejszMy12y+I9P7MGWwp5epNra1ue+Fxmv01j9D\n0IgbbgMP3RCAvAkKO/p7wQ5PrY1CMR2khB0bsd3fDJSbGMl7BsNrJSrk3Zke\nIsH6tILyVPgm1sTfzG9U5mx165zpnjd2NyyWtV/mFuZ1/ZeKjv3vRMIpXtPv\nQV42ZxQqwrJ+FzUSpHPhaPM5sAutF1wEiWo+nWL9NVxc+2f0pR2pJjJHfmXv\nQM6CPAx/O0p5d8tzaYBNRKZ533p8oRVeYyqMDXwDyKZINA90COsUrVUTG5wh\n2oNo\r\n=n793\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"41616b933552e272d345e8998583e30c3b901fcd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.216_1592927284743_0.3305700505404987","host":"s3://npm-registry-packages"}},"2.1.2-unstable.217":{"name":"aws-amplify-vue","version":"2.1.2-unstable.217","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.217","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5e807a90a8a2d8b2f4ad8b4758fe1b534a5402ce","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.217.tgz","fileCount":47,"integrity":"sha512-6g/LtY06/8fr+YSn8ENLu0nQDTxJw0a6l7eXCeHuUlW9LURgawlEgiWh1ANW/J6yG8GBr7TzYSnxajky+vHI6A==","signatures":[{"sig":"MEQCIB77ZZz8ZtwupRL5TPTCj4M20GdQ20ge++gzNSrgcrwrAiAsL6wLufYiZcFNtQP6Lni0bWsU7RVQaA9OoqvqXVnd9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oPgCRA9TVsSAnZWagAA0oUQAKS+OT4WnHVxSS2yN8V9\n79PJW1jd2cri6ocxpATJFRFORIOlI7v5ohrkBkv/f9/NfcAdTf3puXsl9p2Q\nh8MovRJvFui18+aXIMhMqJEbtuaDQ1dCHGm1DOLh/koSLwfPp/oZwRN7zBhX\nuGGYabInyll522drjqWnl1WzPizs5aP4rnCS9byHpOdOrrOxmOduO0zuV2AR\n6W+N4nc5ucQVTu2dhIVId4T6pIroG3FYU4KaKHrYg463KMB1QcCuqrvDt8kX\n054CKdaHA2SwDw29DLQnLnXBIEG+5WcBDSbuaf1QXtN5kkh+LyrwMw665fcr\nyoIgtYvKMpDKo9Y4nH0iR/9CeyABXWhBjvEymDoPGB+iff+B7IniMkSZoiLB\nHiuARgmfRdkSQPInYnCVDwnfDbUtKbwPVYGrxf5/rp06EFw4G9VaduEPcFZR\njyP2VzddFcZbXwZnphqZmFFYMY2ufkJpwRgb3kY6NxYQd5KiNbAAwx5B1whl\nvRAVl9U6Zi3wyVzVczkBBPw8zlqVg7JVK/13BtvtCBEbx3xLKFm/4+Tgcip6\nyb6n92oPqFNBO8lBMfPkoORz9CC7+HoZlr/bts1uCepTVm8YQROsQvg0nwe7\nBjc6uXVQnX6mMXYmn7CwH8/938nhbL/0Ec8nZv197BsPhPVOxJPvGsl+humB\nzsr/\r\n=F2kA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6d469bc29c7299ce40a8850d8a56db768e1780b4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.217_1592951776290_0.2035078428182271","host":"s3://npm-registry-packages"}},"2.1.2-unstable.218":{"name":"aws-amplify-vue","version":"2.1.2-unstable.218","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.218","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4c26148e17aaddea4faf19a2cc2c423ef0363c63","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.218.tgz","fileCount":47,"integrity":"sha512-1vHStTfrOGzGnsJTJ/yJnMDvZAqW3699g7FRN8Fob0Mtjz4m7K85okb24cUXjR8CTefxNSfDFXleRKx7ViwRJg==","signatures":[{"sig":"MEUCIQDq+ee82/YgOecUwks6fzgx1UqnfZibO8HGjg1BpbkGggIgBez9z83enMxbhNDSC4M4wryZyve2Ycwo1zujLLrEsbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8rmHCRA9TVsSAnZWagAAbJcQAKJunhRJtQxsNd3LDcS3\nqDd6FCp1001/DjTxcESl7AnTOXZ1CwDjGCAP6wICSGIw66saS4WImxzx5Sp8\nuwB6axQGn3Fa1OdukoQK7MTeeXNokkZ7FrOy3yHfaqocG8W5QFieGg3bWiwZ\ngB7zdUXPV+YGhKP2f1A/EgYvDVUDhKg6f31p/HFjpavGZY7p8QfbKz7VKwIC\nKlWGW0vzT2umZfLVnYWDzZtvE/N7yG6R5PmvV+XRJ+Sb/WbnRzAXlvJXIJv1\nAsMsPhE130kF9PIquOzm6zbu7+p4L+dY26Hokihko3iFrgxXnqr+481J5B5k\nJ1PoLXD1YS2WHFv/ubnD+CiTuCn03mdlAu/TYD85CkMhjRljyOgyN2Mvx1gZ\nrVewuBwSt2zn9EelMJcfp52e5sMrZZZQfy2qlqBaqFdl2F26s699F54gsl4K\ni/TKd65IDafKW1v0xL6mj6Y6bV85uVldc462RxKyNxk4jCYdEwbekciMJItQ\nrSHHhSGVDgwtkq0eU2Wd/YswHMIn4F5/sC9mgKIbIZ/ItVA26MJe3/FmWbRj\ncC0JtgEdor1Ph/AWn8XPDYsi0mx3RHHDa3MfWde2DhoV6vVcYQMe6R7WwPra\nkSHGWT/MnhPRNJL8+OaXk9U2X8qPMEg0CluLiJRjc1t4LutWKUcycdoUbPC5\nv8rB\r\n=qWQj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5ebe730860ae9340487e2dcb1a910895e68aaae4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.218_1592965510958_0.0579062334962368","host":"s3://npm-registry-packages"}},"2.1.2-unstable.219":{"name":"aws-amplify-vue","version":"2.1.2-unstable.219","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.219","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"db001c7d2109b5f97e957fe2bc48731fcd830a84","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.219.tgz","fileCount":47,"integrity":"sha512-hj59hotOUrsycap6ISQm8aXrkMl/vwG/I051wX/cfJcko6hPSFSybUs0aunXrDKvBQMhZzvU3d43BQmdAvF3Bw==","signatures":[{"sig":"MEQCIEakxRgB3N5tKzzXsGzqsvUXCryqA2mJBmMCnK7HCf/yAiAq6eXn4Q7IUrrArXuLRexCd42dkdV6FwhTBi8tyYg3Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oMjCRA9TVsSAnZWagAAa3gQAKHl2NVqvuGK8tpnRaHy\nlQFNgYn3Mkk9Mg3TKMDA0KwlZr3vjhArLq4kC9vUbmrkbZJGExEnRMHLrt43\n2OmBcamtDrdLg4z5fXF6EpdloF21DCWUNf0VBMRy5g5lLsXArQ+g2nhrF3r4\n3nvJURVXpPXGPsQ5BxrrqTRRlNSna42JA4x7OXwQwXKWWJMN8J15yXSK3/zp\nfB9yshBUSERXSd3JMLI5Q9smPd16/RlSvTnN6oSQKMdPI3+V3YQcCCyUSKP7\n4UxbxFREtxpUIUPEf3IxZ4URPsgPJHHO44DRxAe03YrWjnycC7xGa+xMFZsL\nQeDMCrPvMF6msiNCjIbCMIi9/Qz0LEjnuEUKEQ4RYN90p1a8kNb6q9AKY9oX\n9xRKQ1smPduI/Wf80G3QCD2ztWaWJj+61uMIU8jdWvdCSDIop9Pj+oMnAWJA\n1jcFo2Iz8J86ySNqbDjestOZO67PS1gZKzNFY+iC6WVePiqgMWpauOpYoJNM\nFckx6s4F3CXT7R8k+2giwkNF18KAboIGo0X5as6X2/LvZCEJ802knN0fu7Fw\nzinF2rH35M+rswCPp62BCWYw+X+xaObHo7GWBIfVzD9gxpVisbsCrN5N9CqC\nkIdaGY4VgDeMvD3ADmfvACOmEHhKHY25OfBjkdbzaPomQP4dDpIzp5TWTUVQ\neuOO\r\n=qOji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8dd92959fbe11c328ec4f8e467c0929ed1e7e5ca","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.219_1593213731143_0.6481812648487597","host":"s3://npm-registry-packages"}},"2.1.2-unstable.221":{"name":"aws-amplify-vue","version":"2.1.2-unstable.221","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.221","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"82b1cc9f5acfcb52e0f0203b06e43cc56dfdbf14","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.221.tgz","fileCount":47,"integrity":"sha512-EuFu1kpMRZ4NnPhyjqkSsYwkOrpiV756VW/CN/raodE1rxEM9E4KbJr9wBdw0DhE20MGQcUlAJwKU3vnP3KX+g==","signatures":[{"sig":"MEUCIQChYlJOAqQ9NKNlBpSEf8uhisikGXvysIZZRfdgqcYTZAIgVKPou+SCcFlamAFdg62Ars3UwAIBWXfTd/fy8m+l+WU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+3+GCRA9TVsSAnZWagAAmWMP/0gMtZK5b6t2M3bZwO9M\nU0p2yWyLSl02r9t3IJQ1L5NpisKnkgSdH8tAFnxmWT0HfWK4JzOSU8iMk/jf\n3qWauWyfpzSwzdYXsM1IWmBrxNJlH5cDeCosarAt8GVhM3euO9CucrVUASng\n5ypq5OtpMttV115+6+qZAXIru33CMhCUFthTgRC6aDqUwzXmXYo8Yb3KUTWo\nvKiJcK2naPoGlImz4r3F2MT4oIxoVkVGduG6zhP1tp5rl2wTxnz/JDInXzSX\n1YIvtqCVmwa6Goo2wSx1NZEpjLmWJzcMoIM3Zn4NdAn2Ao2gv4TRNFy6raiZ\nXy/gt3CDJoPJn+S8XKbrU05lEZdAC0cR2+gbbyxQ98OSrCVsLa6X9njKUOs/\nPC63sNPK6PwiuCl3/p/zjgzT4S1UPcDB62LFDTnNTv3+QdQ81KzeAwwxqGl1\nlQmIb8pCm9+KTOnXyZx6JAh2WqOCh1V5MnH00uez6rHkJ4r32KRv9RXdmx9O\nUVxTnnv8NKLVTKuZAS0bPmsaQgMa7L7U/PVyoqzXIBuRPkoQvKjCepLO2qMa\neU5Y3JRW1Oo4+JyGBI+emX+yL3jiUHw8vCPB91n4jVJNpU6+dqHEnKZHYLA+\nJCOTsfUpfkLnitLhjjjfoV9MZG+H139uVRMbRTfzsbCafzZ63WzPwtj9WjeF\nMMwD\r\n=6Eq7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a75e9c30348d4230fb3649e099c531f4521b3191","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.221_1593540486392_0.10023075058359421","host":"s3://npm-registry-packages"}},"2.1.2-unstable.224":{"name":"aws-amplify-vue","version":"2.1.2-unstable.224","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.224","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"124ed14ae3842e6535167316eb5b87dfe8475624","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.224.tgz","fileCount":47,"integrity":"sha512-hApflbJzv3XnwKArbOiekSXOohXN6H+KCYKFOCBSjk8cNkHlkFrQw+ejlcNVh75p4UpiGwazlkC97iEoQSDjMA==","signatures":[{"sig":"MEQCID9gkFVaAJN0mahJRESVivpUK/N7I2r5/t1j8LiT0DkYAiAE1rJxDBcvPCYgwJHPqgzLbx61eX8/4aO9O2alxRpLFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA4JeCRA9TVsSAnZWagAAmiYP/jD8xRzQB70cG5SHb5GS\nQlI2AeT1ie6XtVTsUVcdmd3YWIsc5jjwEkKknxQSVNuKlmER1bH2iGmysNii\nMpoHaUhpPI2wCjl1nHpZsIHL5hFotkpjaCXjCDTorr0qI/9ihlwU6PooBcvt\n2KpaY8KFZPuyFayIsO7q1zOyP6j4wBb7gUZSryF45AHkYecwzHs7hPacVCta\nhGBNou8k+gCUc2lYWnctxIAQJFV1Fd7iUyBqE4hmeCYEgci4+CA7zLlHLVFk\nmimCpF5laYw8Y0Cfd+lOa+rfXr9uLym0dBNG5cTO59GFPLNA4eMRVZ2oAM9r\nriYRqtCtTmv/TZ1+RvbzRVMM82URIWH3QJiCSSIvYDpXlHXxfF5MntzReNAU\ncDS9jQhirYGSnR8If23wXYH4O4kLyRwFtDGhon98xLdXKssZZom8Wpqh9vmB\n5Fo2VPSV8Pu8YxAMW7X5RbcTrr8sku4FHLj5g0b3x5cSFnT5KUuy2kaTbEAa\n3fP+gwujkcOEjEc/fKiwa3mgEiMr3TuR/0OgZkBqDM319e2Fhr5FyuQzHZqG\nVFRasY6Ckocvavoahaknp3AjbiTjP2MRdJeCwPnLwior0muK0jsIEdTQwKHM\nP/FOVHcZ/MmNUjFKPcEYOzrvrXkCU6wnuttmQ2N8mpQ9s0w+d5r3o7WIAeaE\nlGtq\r\n=caW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"229aec4db6c2468c228adde904b7235b0a6eeb50","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.224_1594065501500_0.30400650150601427","host":"s3://npm-registry-packages"}},"2.1.2-unstable.225":{"name":"aws-amplify-vue","version":"2.1.2-unstable.225","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.225","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"347a73783c43c551b0d12b91baf4efee25fb9c07","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.225.tgz","fileCount":47,"integrity":"sha512-9ND7u2JzWqsk9OxWbDgwBkD1B9UOB72k7KzbmaP7rI2BTy9sA3MWHeuoKOkD7QC1Uv0fzpqvp4MdYmYf0jC0og==","signatures":[{"sig":"MEUCIG4FoJNCloKPlJAhkgUFYdEUNx/nv7SW2K1KO3KwYnzqAiEAuYsRR1o1Wcsi37c0CPP6G9UoTVWLT4WUJXhvi4btoi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5HCCRA9TVsSAnZWagAA4qoP/1+xzc/yTLMePeyAewmO\n4TlFwHlA6kMNRyfI2eaTVXw/gjIZqLIXlAV4qVCetS7Id5GdrBZcOHtELTkp\ndlTjTKE4tKEjDtAUgDqL7uySe/tEguTmmyNb01bgV4uHKfEgCMFgQlaWw/u1\nQvIAJPyWpk0bJ6Um2LwrFt4dXL11S6hY5jEDe8EEny4OnMCSu/2CAl8EGhmz\nuuA2o3po/Ff0ggraHYBIetkMLQXbf9z+X1uRAKe7pITbIX65lfe46cemSKML\n08n6GpTdQgXQRjFEKTzthAHoAVXOagwSrzMFrmothW0JVJGc3uRGEj4czSQS\nRtDD79+QVMpPqFyt8tA626fNyKNje4+GTjBl6Bro9R1VS6X9oGt0tGUbmkiG\n81Tnj16M4bBjLHDhw6OqtgDCT4+xyKFArGmVvbYmvohcV7NWSfpH4jOI+0DN\nQi7B68bOzKMI+TS1O739B+ASWR5UR//hPvl54jkIZE0du2hTF2THfUtU9xMS\ngJ7+kIRavubIiO7IrCy8+HurvCpSmAs2ssyxEJ6QbRFVuWiNk5taNXoTG+RT\ngdr+KoWvHw6uI0M3WdUOXDg76L4QAs4mwLGY9D65bVF4MHBOv2frW3aPdkDe\nC1cixZgrs2XGiJZpJZvZlmFEoC1QJntSw6kBnNKlPA0543UnOi+NNC65K934\nHIOY\r\n=YBUe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c6e8162bd9a148453f3cb1f58960ed3a59a50a0b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.225_1594069441634_0.024368870211241456","host":"s3://npm-registry-packages"}},"2.1.2-unstable.230":{"name":"aws-amplify-vue","version":"2.1.2-unstable.230","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.230","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c3f5220547f1b42d54eae59388f0f268e1916248","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.230.tgz","fileCount":47,"integrity":"sha512-YM/juy09eiuesqHvrrTxHHmPln5z3HDlpnvQvuTca+JQvzYPyAGkYeHCIrZp5COpt9e/0gvUK0XIcTbuQKPEdA==","signatures":[{"sig":"MEUCIDbl11HkP9u9gooH0xL40tpQEGWMRFQL7yaHqqJ51KF3AiEA0mvzNILvXgblQQrV+5hjmDuOkW1E/XgQGUCyM46P2Nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBQKzCRA9TVsSAnZWagAAXO4P/1NGx1N6mdX+Q2fQk92f\nRdQsK9IQ00jcF7t72P0iXbYliOR9jzofW2R3OcdXY3wqSTh/kDdobjZzHcfR\npZNWmT6ru8Rgc1/sGWBbu3dP3j/Sh4CIVkysvlhkcASoUwWSuGCTdxlS8HH0\nO6+P/tPpVs8MllD+zWa993JBuCu0HJMT5kxvY80Nl9YlPH0EJ9sE0Tgami09\nnVr4OoqhjrYtsDBVSj+Cn46k+VpW+VqQYMp+wuodtUbX3J8MKmEDY0yfITLk\nv8EuHGyf1uKKLnjrFVs6xZaywt5Xto/546MYqzCo5wcKrb8aze9yjOOErRYK\nYP4v/LcKenvpjKJrffq525FToBNB3/tQORkHR+VYvt9hwaq9QQf4kJXuCyIR\nM9vBNqIbh4wuBMKpIGNHfFjUsdpDqQbxB28jHbTfA7Gytns6AXYhQ+zRBjXs\n4cN4GhHL1P3L0Vkv8tyf90rmNEhPAsebAB40GmYByGG8agTjGOCTS7R5m1uB\n5Z28/hIFogmPNDXizQCCMVSD0U3LXWjeyKuYIei6sukkXldZc1vO4V6T+hQX\nwG46J+ty34X2sAFwSU6GA/6rBBV3MzYW/aBOsk+AqBR5Yqb82I5oWrBoj2+7\nDCvO9rBPfhgqR4DgJc7as/IDhPv1PRfvTte1WOilgn+UFM9yicIIrQzYiZ0u\n3VXV\r\n=8uiw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4f752631d427e149df423a681c1d822abead95a1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.230_1594163890630_0.7709839614575382","host":"s3://npm-registry-packages"}},"2.1.2-preview.240":{"name":"aws-amplify-vue","version":"2.1.2-preview.240","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-preview.240","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8eaf0780599d558f7ec4cd8929656ea36c7da02c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-preview.240.tgz","fileCount":47,"integrity":"sha512-0saBwh2PAbAVngoxXcATsLL0fdoOnorrkYmT7Bqo6mUybPLb2g2rtp8iPl6fjTqDOMOUfXN9N1ktvypoXuwxTw==","signatures":[{"sig":"MEUCIQDpzOL0bpidYq08L7WU88g4MT8ClzF/bx4n+l19zcy1twIgPtgsL/X6EXLUUu6Hr3vXLiNNxm++eeuyC+0q16XwvQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2974248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfWgCRA9TVsSAnZWagAAVC0P/RadOVTT37+fpnobkYHT\nqwJyhjK3yMePkJCNJMJiZ5y5vORaQU1yQb8k6ztSBrwKNLt4JMckvNJnJMI2\nHXLcBmbZUzXfTYNilGldD+0CSFvZBOiK/PsE/Z+Kladc8xap/XxZr/brXf1m\nSeHHdgr/WMx2l2XrKrjKHQBpcUfOtAZfNp/erz54mWx6qRb+e0zVoauTTkhO\nlTKHvhPpPqulVxOyVatKE1FF/NOAWl3OoFgAS6QjdMQwKhP1bUCKmlfxlVgv\n5GV917f1/vIWxUo3/ECxI7ldReHXlBEDNZzFOlKF+u2xHv+ZOvVM7RJv33Au\ng3Y5Wsmm3NKtWtju/EWJOj+sLgN/P8/U3UNmDsKkD6IBsaQtOVqHmTCBD8hB\nUCm2gVzrJV06zRFW/yg6S2WU7Po0sc+5tcIaQo0h95mbv6vuVO2QRcnYl688\nR7J1ayqrCFrRGAnP+lBpL0nRceeZGVMllmAzR1SHYhNcOj7KqPQUxMUjoLLD\nf6n93Wt8jHbTVKiwHFRAsnEk8RLuHsjGsYFuoWs4yMQKMrDTpUcgiCnK9Eyi\njifccfm2f5oGpY+fPYrNfuSpqMfFs/bZCSMQyBcCkmPr266qhspsBtH03PwX\ndfk0l5KuQPFHj0AFYauNaQIulOlCZjYUId8uBIzQP9YDVto594W+SI+84LI7\nZ+GJ\r\n=fum8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c77c0e276810136de3fae649b4def857910b3b67","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"ericclemmons","email":"eric@smarterspam.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.3+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.3","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-preview.240_1594226079602_0.5729614283641522","host":"s3://npm-registry-packages"}},"2.1.2-unstable.232":{"name":"aws-amplify-vue","version":"2.1.2-unstable.232","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.232","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"af3edcbaa97be6841b14d51d76ef62254a5b86b5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.232.tgz","fileCount":47,"integrity":"sha512-swGehzHWxe6ThPubjEQ0YJhqFPBtOtU2K9K8hqyTReWt6PlL5Cav0Q56a4PMX2ghxraURIPhRKm4slJVWYY2fQ==","signatures":[{"sig":"MEQCICMDwOOl1U3Cpj6na64TQru+fY99CdRQjol7FkqlF8LrAiAVgv6LkVMb4zI4KbSqmLATEw7DasuAUPcGYzmXHFc4UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBlCXCRA9TVsSAnZWagAAIZIP/21w0I5xmIed8eF3jeYI\nT3RgrAWaBppfr4SDA9FDxue7FfrudQ1qiiQvKPXsDLLsqPFC0/1bbTGrBBJc\nIdifqbe8XXEgv9Ygv6YU/1R6uvYW+Dj4pqnkK+bUZmhRk3M6aZki2FbFcjhC\nYnN0ZOaYiSpHYR1QiEY8d1xbcG4kGtNjcBwiBQkCxKgHS0AAfUJqGEpvB2Af\nlDBGSfC+4uhYiImHD0egnB7bcadm81/SVn1HHSfdrsBZDu07dZez+hTucZcK\nixl5aDQXlXznaDZiLZeackMCITMSbKvEcvoNqYY73oh2UiB5flY/12jQBLN1\nfMfovwN8UNEgCaF8HAjFakXviqw0++xRYzZ+jenn/P8F5hr+smtX7DEtYM6X\nKedMf+F0hU2s4PO7BwY6CZZDXsJZP+WK11+0gKj6fWIAxePDLZUBAFlZ80SM\nex+eyy/EHRX+ll+L6pCd7YWVWN6GwCZi+e50sM+T4OiMx3VRmgDzT2MHkieZ\nNVLqZ3GSd8H68U5V7NG/TL5t+3078P1wcdE2kiCRu+S6eFPO5ts0whq4sgfC\ni/liHWQwwyyVUuqm3FfR9ZyZfKUQyqB+wZ/f1xNZuPJlwYJIZXnyi/vRRKIK\n9YixVpvDSaBNWzbHtcV0R8DkpmazWI9YP8WXVWV/dHnYF2xgavcKjJ5jl1Jf\n+i/u\r\n=MS5V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8d5d827c6abf1c6fa3d89edb2ac20c48ead12adc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.232_1594249367177_0.7371929932071442","host":"s3://npm-registry-packages"}},"2.1.2-unstable.233":{"name":"aws-amplify-vue","version":"2.1.2-unstable.233","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.233","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"184e1e21881ac0950e091932424887d50c1a04a0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.233.tgz","fileCount":47,"integrity":"sha512-/GuWeMpDQSXz5Ir+Qz8ntPsj3UCjQ2VRRpbOCNkqOKQSG+6zbn49uvOFIksSktBXaralgVEVTCfjQWop9dqBYw==","signatures":[{"sig":"MEUCIBm0zDchhgsLaxe0yS7w59ob0tGXoXuAglwpJOo53958AiEAmK4ahEpmjz+dz8I9f+ayzu/BiyAUxco/cHHqOgoTe0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBl0SCRA9TVsSAnZWagAAgBwP/jJHmhQ0EzBJ1EKXcGWs\nI+ZMBqIt2d4g8hztiCrF85EXEvfVAGyePFJ2qWcdcuTot9lT/lihyMlag2b4\n2aa8VN8XQgCIR8BkpPiI1EYf9AAZFKKErLs6CDrIq+kyJYtonhsuDKcNrWJn\nDjaQk/e3FX5WgygEBCV1FvU/1PjyZugIK+PzrpwRnV3zKcsGTUI1r9Da02R/\nn1GinxC1oqWAg7fuFstRHwgPnp1c/y+zmIHNTrCfc4cIWfN9R/paCGUf8+50\ngdbDyb5zr4vvAoJlT1nL/kbCjvbHpsKytbidDhMaHsojfind4R5rdXj8rqwe\niX9aHol45u0WbZ+/+6VOt85swmgIpVf8DqCQTOVPrL7Ru+dJVuwdbAqqZzf5\nXqHzN0KW4Q+Fxc/ltO65TvHdCodiTp7zIV9WXabKm6VF+GVOMm47mtTSqhev\nL0z3gYDJRJo2RKgd60J9rciWN0QWpbom/efImVf6gFGkNGalRIROvFhNLIgF\nzQQ4mcO/B/JgSjapp8rrs7x5xNGlP96Uz8kqoUysiMfAbAkoTkOBaUg8Zr3Z\n5upER2EgMoHmXfndEUy1r0rs4LIo0r6/QCFF65OjHrrAy9AAR5AI6AdsEtgd\nA9cX1bNz/4A8lJaIb0DvrOXFNEfD82s4e4sViI7PV1bcHDeQl/zPD0Fb2tNM\nBEc9\r\n=UDht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e2e93c227304be69e87b7d8ac1cf21e09bb59b1a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.233_1594252561622_0.5011835053010889","host":"s3://npm-registry-packages"}},"2.1.2-unstable.234":{"name":"aws-amplify-vue","version":"2.1.2-unstable.234","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.234","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"819aa3b7872d485b9bea08dd5932dd5790805d78","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.234.tgz","fileCount":47,"integrity":"sha512-nnWScMD8P9hm0+kSK+QfmMO0pFW0YME7lFCs1dT0gmi4kXVwXENv4lesOEUK+MJ5LlCEBQGPSOgNkEyFjM66qg==","signatures":[{"sig":"MEYCIQC2Ul9Snl4JqqfS1tjezSlVrLdEEenyy4rbs2ISqRKiDQIhAJMbl3HRjIF0lWi8emWpCJFPys+lQYwA99abznA9SgmN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBoW3CRA9TVsSAnZWagAAjkwP/3oMDUBySqBcjoSmSUmY\n+kpMccubn9/3shYQrFnMe3ZLXvwQ/gkH/7dVepDgLSKE9x93mx+nlRCN5rsZ\nHyFkTkOaCXDxr9twLcuGsQsA+fgl3t+Rk1bFjrhJ+lS9Z3Ht36FzyEyipbfx\nm+3UagMb3u8s5z21lm0zyqOntqNlnwmyyP2Th4qJdTKtdYuZlNX1W3uo9dOL\niiwd09bgx4CGhgHJlA35VkHF/DwOINtQVFbiODi54+kOSEFBXVZ4Pieqs/xB\n2yrhT7UFAKESyvfB22AR3dpB6/Z104WHQY0NeWxqZjcXEovbxZcK6xZf9RMf\nC1pr71TVIrs++m3gHYBcrTVPAHkEA+UyRqgBt99U7PcRPEjaG0NsyNvkaLuY\nLV5fxflnXsvXjXZaWltxt0ifO5F3UFIdLxpcTdu6CnEnTtRDVzyRrieWL0DK\nTZxIfedEYfzq+n5H3h78UmEiaaILhgnQmQMBQk2Y1C/lO2UD+skE3r6Li445\nIYcHuNRirHx3WdZYbUkQf/lowctcNbaHio23F7769KzH9wGWGpT0tj8HmiKn\nihv0+XVcmBQ+WtwHf0lfeuXgFGLhd/BGDlc6aV++maatgLVEygB3FuzJqMI0\nuSvZQrLAdLuBIAwl36JcS4GJfLdsClx+6NLvPpMdbhNS+qkCqfcvPHZDhziC\n62dB\r\n=6j22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a322760d9d130004d43040e94b455aad41637ef0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.234_1594262966591_0.06270386233000846","host":"s3://npm-registry-packages"}},"2.1.2-unstable.235":{"name":"aws-amplify-vue","version":"2.1.2-unstable.235","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.235","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"263798448cd0543ee0f00afaddda5667d37955db","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.235.tgz","fileCount":47,"integrity":"sha512-vgkvfTTyUYubZt/KqNzL//FgByF66IYr1l4J5RFrTTVPc+UrmT7JKp095HeGSi772ovAktE9bGoaaW6YZ6W/hg==","signatures":[{"sig":"MEUCIQDZWlTL5Wr0Ql8mvQl4ESG5BAksTQRnzO9yiwhj201HDAIgTmQmgfj2DDiHJOQe7Phc9RaJDrYhbXY1pXN6Q34Pd4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB20DCRA9TVsSAnZWagAAyYAP/1bYirncxYVhFm1nXPnn\ngJBAMfLCl53oRMYCkK3EABV/sFXQVe0lc6Vk6CyU0FsZbBGTELk5VJnztx+m\nHvs/kbDLSgO6URMl9BrnKT3Sql4eJOHSaFfrbFezUIJSvxTuYMSzjV+tfwBX\nRZ0bei26XXP1vcyKrcLsN4U2mjaNcqMXdqUmaOaRqW4g20COmywppHW+r1VN\n3onGCLuouwaL3V8SQ+lIR2OueVNKbD/zBdvF732x84Fiu3Qp1z9NuM1AinNg\n30TrBnFKxIL77NgStF2fXPchdjC6qwqGXg052xai3VS7qiUOBS6N/i3chpwn\ns9/2QU3OtW53ODGzaMxNLXRF9rLxTNpXljB1KvIHLUrs4zxkwK+8FTAc5w/7\n3RfC1+7ON7DBR9hJUuVxUZUxIEQjoRDxvR2t+K2yq6uRgHS9DMghMLVAqdyI\nK7SMYXK9V6i1g03JQW9xqwbvEcgUz1t8FCro66aOLSrAEndFxupr4y1JW+2W\ndtMsv7inUMt60zCv3kxkrc2PMLlQ0XyI5bpa8hN+oSN7iXwDFQffhsFxdy8U\nx+w/gnEC8Icevm9Hg5gnF93e004PGszT3gYQ7Dm4zySuhIUa39x2jdUsT+Es\nXvK8XMK/4TO6mNpXOW6aqHqZb6p4F+HzfxejCbJogrHBKSVOf2fezUCGjQvq\nwzx8\r\n=IF26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9b2b496787a2d8bd13256a121c9ee29bf831f694","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.235_1594322179025_0.8095064238647967","host":"s3://npm-registry-packages"}},"2.1.2-unstable.239":{"name":"aws-amplify-vue","version":"2.1.2-unstable.239","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.239","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c2eeb1bb616fe7b9c5910b2eec2d6c1c0309e178","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.239.tgz","fileCount":47,"integrity":"sha512-Y4IDrHQZhi+/ertsmRDBxC4BMMnhynPagK5PSuhKNpckh6iqBjeP/LYu7s/ZZOvEVIxs3zH27vGf/m4EVKbijQ==","signatures":[{"sig":"MEUCIQDnC9VoRwoc2+0jRmxuJ7PG58UJUX+PG0GrLHVe37YdnQIgaeu+s2wwE3+H6lUOPK9UY+QMweFPy/2wF0HRuyUonEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB72HCRA9TVsSAnZWagAAg3AQAJHTnxRYSrHsMC0AzzEO\nndZsqz8qCrBzH4h8VoX25cmNxOrVZ8euydIOunziGdpHJh2pXjJjRpYhO+0/\nk/Eu4tM2to95R0mGt7dNV6NES0nyaDDYBqXrigvAw1KcpBBav1/A+QIMa6t9\naQR3PrFPb9e7gtjoUDONHiXwICt9wqZoJye1EwkDWg4GLS1F+N71olGPL/rE\nlVyuCdaemWHOIIZelUHdgF1dBGcGKo+ya65ifHq67797f1745uD6YNLYVi7I\nqs2SE/uWOyCQxeajQbBIMqIG2Z+q9SVV+m9KzCVMG8pqcDpAFftkPFgTt5ot\nPz4YYvbzkl1ko95aS9yRveIeGrc3YQEx4vxBHCAcIx+j0yMF4RlqlumFNp8v\n7q9q9ElgHfF5NfwqPIQaXizqgdlWB2QSN0LmcUWv5pyeK2i7ozs/TKodzVAF\ng4w2Qqm7feFvnRGUBAhu1LEozVhzHzRKmyu1Ted9rbZNPOMIdjg+6yMGvxfU\nZXDeNd/b8LqtAHtWzv1HdwBoAEuopG6MgQFB5/6QOs0x8ZYlpgai0z9uoz+4\nWjxPF5m+LPT4TCaGSGeAtzroQ0rU+9043HavgJn9EkW1cTnZs51tgnZvAjoO\ngYQx/pMf0mTmVL0vXC5lZVJjaSmyuSFNl1ogigtHfn1p2Y5s5R7sPKOAs5Ua\nMDTl\r\n=BBKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b5d14124dfd5f1000f102ac8c84aa964c9d916c5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.239_1594342790737_0.7266210576334433","host":"s3://npm-registry-packages"}},"2.1.2-unstable.240":{"name":"aws-amplify-vue","version":"2.1.2-unstable.240","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.240","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"792d3e3dd8c117c129ba0d32a53f44190965c728","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.240.tgz","fileCount":47,"integrity":"sha512-ynibWMTXit7xDmFWzENsjqHuG7m5cUk4ZFHaF2D6r6/+xVedcTEYIk1FtVF5JCqNXywieoVBL/WK5uRIKb7r8Q==","signatures":[{"sig":"MEYCIQCQleoQjs6Ef45N0Ty5ukC01HmQrM/hqNlO29GdQYJntQIhAJuUmUBis9CP0eUPqjUTh4GH7Zw+WoJXsB4KpzrjZAi/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCIoOCRA9TVsSAnZWagAAEl4QAJ7U/0wWnkoj5NKvZ0YM\nQEoM20B5k47CgvXCVsn+/7hv5cvzfrBWJBMGnekqTOcKG/sEGRqtdwCO2wz9\ngmlHCoduVINnNpbEPm3vtEecxw4eu/AtLLc/a/YQp74j9ff3X2jQqu+Tes4/\nbjo5JhAlFHggPWV3f14LAToaNTfOv4Kcx4bypq8LzeYKN9MBg5kCaeG6wcU6\ncy6NRftbKR8ATO9QiHQcQGhMl2kHWEsAzCaluFsHkV+5AMFxaivY1yWPQb0g\nvB2527ZlZ4VViNfm3qlI5zUP+eVf+Ptj5S2R/nuQVW/d1lT8++UUM0nrlbL2\nw5dQQfKmJ0m47ZkgtszNfcNSP+CyTdU2NfL6PllykSOXGlvhgAIQ7Yryl/gF\nn4LVoZQQXYY4jEfe5gZKHIOcpB0B4nMLqfdbujhAE1fCc6a0FwcdfWwQ3G0J\n07TgjUqgLTCaRQNgNU8eOV9j3PpuWLG3klMhT6raQuLuWweTagsMdMDgAAXc\nyaRvPWwly+wAcqu2X0ghCgdhJoDTbdNlfFEK3qRD/hI6UHFNj0gGl4Ya/D3A\nQDYbg2HU3rIg9QrB308o7tKVrUCJdn8xgc50LoVqclmvczsP/UWgagvPhODJ\n0rRntI0J0Vc5mwJPHi/8ZpKPTMs8x1fFhjCa4p/lcqxjYWAbG4QANbj+tBvp\naa5B\r\n=QBvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e79a805534c25dcd52ea4e55ef8b4fbd0f5dce36","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.240_1594395149446_0.7728542938749385","host":"s3://npm-registry-packages"}},"2.1.2-unstable.241":{"name":"aws-amplify-vue","version":"2.1.2-unstable.241","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.241","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"958ef964c3e3a895e74d51c5628cbd1f6b5a2b20","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.241.tgz","fileCount":47,"integrity":"sha512-QfnL3pRq3497eNdcOQGg/sTErA9EtmogMV83BabtqKKsNECmzaOZdMoxWgXqELa8SmHbS4ZOKj9GqOEL/QaQDA==","signatures":[{"sig":"MEYCIQCh+JIYrzN6kdLq+cs6AzGfmxotfB4Cie8jrhFTQ53MiQIhAOUk7RxuxiaKmsROzmqlcCJFzd6vQI7a7JXqWwZ8lvGw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCPl6CRA9TVsSAnZWagAAiWkP/j5THbuCsHAineyfpVlN\njzY/rpen+/UgemJxvrsspb3aLX0gqaF0UTc5LobR/leLOm5Tc2TbPECTVWmK\nLCFJk6Yi8djljv+DiY7bzo7xnubD/8zezlugMR3vpJ2HZ2Dshk/9SGaNOZ/v\n/4IS73W+uPeio95MpQSvrDix8xLeOdT8xYcxviZkcL7H1inTTO+Gbzoc/ax4\nbZDc9bYnWPuL+FB/SlfAkmdO0VT3vd7mJFQZrZ4d7wrCKgli4WgDsHbVLzSb\nJLrmAw+tHHSo+jdaW/VALMPTGrFdyaBdD20Bi3iU/nV3M+cEcTNcNkLLfPce\nUrFeeVxUknAaZnKW372nVW9ezlFkugJUppsjH1OCiIPt7KjRZRXe8AK0egs3\nDRIXTh01vknFbdI6AUT/GbkhvOX79ITidonQ0q3dKy/3g87NLuLYx58bnRW9\ncNd1ZYF9mk8PQtoXEKO1h2qDEXguFt5bDNNmsdo+dOuEP3y8kl3+BkhyyWwY\n8FydRCe5g/H8cYlrsAH1YLbspJl7a3fT7Spo1HpWcWO+5aJJkpA6C9O6ey5l\nA2QFnIrdn4Ua4owWuTeoGS/5N7mRm5ANeRRvftezjCxHIM904ZhTxBgFwxcT\nBJBvUFxm0CPuupXLOQV7+ZGp1fgocIo2WTuUGrXtrxHMeCgBfm474wk4p3Ex\njxX4\r\n=I2qU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6b52d0b1e26ad0b3661536040af3d78ddf20b3e9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.241_1594423673679_0.10413937208140078","host":"s3://npm-registry-packages"}},"2.1.2-unstable.242":{"name":"aws-amplify-vue","version":"2.1.2-unstable.242","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.242","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c941b48100b2bcad86349ee1bcf23a80f4d5cdfb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.242.tgz","fileCount":47,"integrity":"sha512-pkAT2UVwaRz9BkF6KM9NZPNnfAsI6/7C+/rny4yr/Z95mMevQLuAmo3mnTIaLoi4Whxoktj+wRHSJUjs/hf4gg==","signatures":[{"sig":"MEUCIQDrLDL+vtwIyjkRURrY6VRkKODpZREkuW1ZJS5b/gfWhgIgGK++mx1YaEoR709B4aNQ8PkRge7dF2fI8UkN0ElF3x8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDKW1CRA9TVsSAnZWagAA8X8P/iF6e23AcQ/5FxpCudJe\nYxazBkJ9BS285nJvLgbz2d21z/rGdrPir67Ad/ktiCOMFcTGTV+vVrCCU+kl\n/EALBn7lwX+nfgy6RFoEV/LvNArfoFVDl/dkgBldKlzmKqKZB3p0zHTvsaIY\n63uonlZ5un5nlsu9b7EKpZqyYyRZ/zKAYTNL89eYSeeEgEUyNLyARQBK2tQ8\nUjvYy8pn/dAstQWtEPIKuaAbVJ2VYOnj/Z2mPLygRMftClMIbh9CyuQA/brF\n1zMs4DkFFw0moSQpAy9xYSiknU2gBMvdFXg+kJYwPIZmigvTEyD4rNAb7qI/\nSnezkIv6G+2i9dxxkj7Xb/8xm4dtXWSF6/rmOqHRv4HzUoiXAbsdCwWRLsWp\nInoHQcnAwn++xmXIsxCiPnMvsL9na0JcTbRYdmdO++/0MvdShQwQW1rcDaVx\nVJpYvVuAklahCAI/mEs0Az31GgYe3EmEt8T1UUlAPK/40xX+EL/RI8nCEiYc\noTV0LpfjeNoPNEtvVyKfImD6oJNh6vGLG7LM/9XkDTMdAI0D9fuqk1avHcTN\nrVF6Oj0pQB6kwmBulCHy2gXNqsJCJvDR11pEnThVFns4eJSBfCIWIF8C41fe\nB4szkUBTDRhdFc62OTP8EJKkijQ6ENzxny542HEzm/rI/gA+iEXQ0RxuoxWP\nRlyt\r\n=nJuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4603092749c058086f2a9a353df0b4d6f0a7071a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.242_1594664372552_0.2711597353245232","host":"s3://npm-registry-packages"}},"2.1.2-unstable.243":{"name":"aws-amplify-vue","version":"2.1.2-unstable.243","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.243","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8b86ec6d95f70091a99dd79498221b1b642f715a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.243.tgz","fileCount":47,"integrity":"sha512-tK9KgcZq9T+PfWZl+2muDeDDFEKvM8w9EGZ8pJxqE/wxVkXzZrMAY5n73vw8TVoZO2ExEoO737VIJfd79g89Eg==","signatures":[{"sig":"MEQCICpMXoYpG+TPKtSlsRAydcezJbPKBnibJD/DgOFJIoi7AiB9iTVN36R3MplzAIAWXWV5w7sVE3vIywghrgXkOmx9/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDLEmCRA9TVsSAnZWagAA8HgP/A2mEBIqwA5XYLHrVEbt\nHpUIE+ESn7tYEUZ1HibjCNrC4jx9PgLOpw6fdmbyaffVv5sfaZJNEmi8oEy8\nGmXaGD+HiG+aTRj86UzR0iZIhXJt+6sxvRdQxn0IveRrkLtyhMsjaQBy0EnM\n/NpxS5YEhbfH/DsuVwRZXLhIVmkgtusaBEOozgHGMDanvdlSheEaEQgCj/gL\njsGgr0KWdHs+JVZMs/BOFggbavacpcLjIQ1Iu6Pk2WYjjRXA8f5o4fUyB4iz\nEoriRjkJcO7Fosd7hvSOuUxciX+XNlzgLafgprtWNxH9GVFvp5VI48xoQDvO\nYGv4jnqmLZJ/uTHspkZ1TyqIt1USlxn7wHx60awL6qso3RZBQcKnbDgNt7YE\nVEvym85tCJ6rTlLl5JKWfSr9H25mPEe2Z0Pctef4aezMdsYh6wQRcm0o/N/I\nb/wieexGxKdVY5Oqs7BI138/jBxGc13nFqVarFnadGqaiYdYucOW79hfi6B1\nHtxdiPWc/jr9kZdmPgHVIY/mXWEFu88gHGneiKfs7JbvWNRXQQh2h5AvePKb\n9LtAZC9rQDMdmfGzGnifjV+97XLhORjullbO2TwTeTYoM0ISSmcFK/fusMCU\noSCElOdsfU2Y7ub3BVDKXYULPZx4aLjF3HE5bTmloUaEoQJ9BLRFe484LBjj\nWvX1\r\n=1BPH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3206a4fa05588674261ba6ac415c0315560ae968","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.243_1594667301566_0.6749693540874648","host":"s3://npm-registry-packages"}},"2.1.2-unstable.244":{"name":"aws-amplify-vue","version":"2.1.2-unstable.244","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.244","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"69f66a8d07ac99bb69ce4f4e3c986a6d8a302fa8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.244.tgz","fileCount":47,"integrity":"sha512-Lg2mygSnMx8YqqP2KGMbUhkkoDgJCoKxr690skKZIIzI2Xssq8yr3MgMnN4ib8SSA1eC3ZNO6pXLceLviEjKHA==","signatures":[{"sig":"MEUCIQDTl9r6IuNev1caCmsC+tM8KaWGm3y3NxWFYXwPMhKfjgIgT/LQj23BJCgadp5TheEQEz2hD4DylfQWTEDfca0GkaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDolNCRA9TVsSAnZWagAA0fQP/i9hQx7fqYa/xfz0Aks2\nng/He5yB/n0U0wFkGcSmjwThzz2mfK6eDq6XEfmBylDXxBoanZbg8OopR37D\nL9KmiFaAz864ie5XNq0xoglMhBIne+Fp5NnFffa560ShQaKBDZvvA4Gk+g/N\njW1Ijfo49Yk+xvtBbD55dV1YdopaiEzT4nu9GGN/LOKEQj3upZ8ALI7Isl3c\n7CST7aNMUzCECULq4TVeEoUivnSCeySz8GEUeM6kpdyePlZ3ohDBOC9KV8wf\nfGyaOy7kgKwRaMOMz0mtcZLaZk8DnUOA9EG+oTnNer5U+91cX0dvy6HfiYuh\n3fi+SFoagkarLRf44PND0a36sPg9IhiuO/hXH7kxFtjeGb5wgUFMvw6QTRoP\nUTXXnnM0ImW4JCLJ3W7vc8har/pe39Zexiim8iIfI7fjcFAtMFAH0YeESFOJ\ncPkpGN8xrq3BZlPVC+oqwBxNvSvttGV0Hy4jydP2QXfBSTR1nmI/06J1Uk7R\nYj3wLP111ypl9WGBOSs2l8P4q2wvVAuNTT1BuEQYgUoa2yqbCvWXuywWSuCx\nO8OFT9Zn4i8kV7Bqw/9QclbjcKXBEEHt7z5zBhVLKIXzIXFFjfOXjvIIZiCm\nm5ukDasttn9ION9OGJOe6lyZ67CkFyXlIjdSjxzWQeS+bZhnRl1rnrZ/SUVF\nvKql\r\n=W62K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"68af3abb54d5af4e1bcedacb8e2137e10e2c971c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.244_1594788173355_0.9103776528368854","host":"s3://npm-registry-packages"}},"2.1.2-unstable.245":{"name":"aws-amplify-vue","version":"2.1.2-unstable.245","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.245","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2ba3b60c9e944a1b84f44404452f1b9f76c50529","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.245.tgz","fileCount":47,"integrity":"sha512-2LptXCo286o4aFnzOzMIo3ZNs1BmWUpBKUkWNFSG5Z7pBQWO5ktWtcjVFu5pm44UTRLxSvlbjg3jwuUByqm1cg==","signatures":[{"sig":"MEUCIQD8ObBRNpXNdw4XrfTI6mjOelvOLBwnefNA+Nle/EW+TgIgF7TN4rs06fsPERk426nLVeo2hB7TyGie9S/eLAQJLO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD46zCRA9TVsSAnZWagAA8NMQAJQHbNuGP8x7MYPR0Ayr\nH3IOXCL8dQ0I8GbfnL8UXhiJwxSpXtQdwvXFlVq/+XcO8Q3lJLesO5o5eY2N\nb0K2rgtbZCMZkpmONPJRQZJ2POctP/EAXoiwJ0FfgwaH5zARARemtJeGVNiJ\n88d5xmpHmtNhsYv3pKlVmbcynhPGT/mTMtUJVybbralQWyFBKVizFDkQ5qIv\nY64Tq+Vws1LGW0FBFQNwCUfribmWm+xk3BS4SnUY+dYH6i09P/IgMcz9HFY9\nS4XEWxhsyXdUyox1gILqG6caSVfVb2J5QlSy33YEmd8N5iK7l0NgztA3auIX\neFwb1RsC4rTeVVQx1P2Yup+/qJ7xE+OCfNmClYpLac2MQnRWazN7Rd2C9Vu2\ngpNzD+KXEGzdUY9KwsXMMRUB+wkqRKkF7fm1Rup5dMMy9146SRa1qSrUJ3lW\nb6AgU0PlrXzsOAs5VcSVbaovBzuLkLHuVkkJJlBlC6mXN6udguM0A9OuF+La\nGfESJ64bJHTIqoeK9jPJQBIa9URouAXOuFuDngykWMQ45ISIHJiSezw7hVEU\nnmXhxyRQhg17zkLIRb7Hf1WHwmzmNUxfvCnbytcjo7Mg4PPFl9QF5Jtb0uFB\nckCOWTqDl6OgiN59vEHTN2QwyXN19yZph7DpBiWqi1ZRm2wstwB5/vNMfXOP\nJays\r\n=sfXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"219d36eb137364e0af4efff2cf1b7486b808d245","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.245_1594855090579_0.0766807328952992","host":"s3://npm-registry-packages"}},"2.1.2-unstable.246":{"name":"aws-amplify-vue","version":"2.1.2-unstable.246","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.246","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d03e0b8eb8671e7aa84385707a58e14ffae3c504","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.246.tgz","fileCount":47,"integrity":"sha512-NPSM11Cp29Xsj7+II3ilKdCs1s6y5hFEw2SXK8tbaHs3HAMN4EtyslashE9jDYhjBO55Dgqv2wuTZbNjGZG5Gg==","signatures":[{"sig":"MEYCIQDD/aUHwYgnEuYSQ4TqSnkwos57xvwBjQyQYqvnQrh2WgIhAIWwPp7FzoKLzp2AOzP4sxnecyZlVEJV/r+nM11vcvHD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD5vgCRA9TVsSAnZWagAAkKEP/jXbT3wX9X5dyB1nOKAN\nyN5lPeksgWmNUzuzlAxxmK5yVsNtCFkkEONoNTOJZ27bT29/pZ0YZjz9fY1P\nYG0GeR+30nybdOa3iCa6n3faJ7iFOyoGg21huvBJ4FDxI3P4dQ28xHCdgZLa\nUDQ1IEJqyA3oQla/9a2CbPEW97hs6aPWbAK69ZB+kohKmrCALI5EYZpNNOuH\nNyzs4XN6KmraCJMxjRQxZ9/QrTr0a7V0y1iiNhSUu/S9KbWYCZuyYD/BVCEa\n+GBDBTRrbCPekcZIvKaCAsPaO62qLdsri8HJGVutdcz97ubs5pDXhT7Y3+Bk\nGM6qjC+gWgrxrtMHOJisBvFQZrVk/OuMYXtKUB944uwc30KRnA1STINcjGQE\nFNzugjmy4LxldkjhdYm5FQYMLAo/08TjMVDJqNfmCTubMxcGUpIiqEPIBoyq\nj1Fr36ckM30ro2OKcJbQFgCDtCw33GCpOU/vULr/fm6AotZM6F05vemMELea\nkW6E7LnUEwI+Dcbip3/VKHwcIEOfz0azjT1q3RkENvRW4BV4E9GaBA9o67nZ\nuhHozkz6it9BEV+vt9ON01jWLBe7/qySSjeziI8w6r7KO6AnUpxkv7+DdKIS\ngg9yIv7YWu6VQri9diqtf7FCVdP7QgLhN2iS6F9Sh1CgI7p27ivev5+C0ttN\nHo53\r\n=AoSc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6679f19c9d0d6b928eb088babf9377cfd84eabbc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.246_1594858464266_0.17568782677228056","host":"s3://npm-registry-packages"}},"2.1.2-unstable.247":{"name":"aws-amplify-vue","version":"2.1.2-unstable.247","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.247","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c6a486e5746d6ca463958ce2f7c445fb4568cf3c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.247.tgz","fileCount":47,"integrity":"sha512-G8kip532sm2TpLiGC5XWtUbV5kc5iuL/Nda7pqt7y6BrE7ovVA1eMQXxU0EX/Q1QteDnsY9xfUQ/KNW21Tl6OA==","signatures":[{"sig":"MEQCIEWFwBRelS2DUlCRMJJyGC34H4aseMPCHtJ4ydLzsyfPAiBcc5uprTnJP4Sori3S1EvxvjHWTfMrdJ0t7elPDdKQFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEJCyCRA9TVsSAnZWagAALakQAIwMPsjgWkbr6nU6fUax\nBwFU/e3tGMUswyP36dsyWiLrhzu21Tv4uknEme054Ayd4z8bEXSsOjP2cE4m\ni9mDCqRrt7n4aGQHr1qX9v9YqDBLzljx1UGhsjRNB2DEsug+hTioFFHBylRs\n4vuv37xVkATyUKlxpaS5HoRYIbuNTpqENP349h53WUyAUrdZNCErBktzg1R6\nHk30I5h/DftqXWD2uqV7pgJG3QRPf6MYySLbcZhKxPiIvWt8OWGpMQ3LTRw0\n8htaAPuKAyXFULnMNSn9h7sjmk+knkjIa4r2RbnXzRtFbJCq54sI1udkirhm\nf7913Na8KLeT8eB1f4hNg3Wee2Kfx06Sb2KBEPJ5ATNRajTIr+8CMuOg4mOv\nfpMQhq5hLkYiHIzlf5vWJ1IyW+G5S1ltJZ55po78XLaCbzJuH5Ja+81JsYuL\nLS1l5sJB1k4ONGK2ZUF2VVmrgfmhfA3cSwidf0sROqmBf7pnYtQq8C60jxcG\nIgyHCnjGg5ExH0PjDdNZNg7tD3kpmJDIDWH1Yjr+DdBWWVReo7pADS0N5tLx\nMVfDNlp/fPyD2YBGFQMpKW444jFMmiK+a3Rc5qU/iwF6eJY3Xpf0EcIbTgm9\n340gtJkKXdcPRKNrOLBnJ8bWNP0MLdyWc3aE7kzIxgSAjhzoV5GgWTwe+A0Q\ngmwx\r\n=DrjO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bca5c35e605dc659b8c70a0ffd3283186642672b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.247_1594921137617_0.3954756197908078","host":"s3://npm-registry-packages"}},"2.1.2-unstable.248":{"name":"aws-amplify-vue","version":"2.1.2-unstable.248","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.248","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"87bb305b2c82d46be9bc0dafca3332f37c102283","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.248.tgz","fileCount":47,"integrity":"sha512-R8lav2LdGy2EEZHoP41z4MMqNsx1YLpHK54JvxiVMn7PWo0pdTBqaNab7Bterh0o/v+dWxwCCVIctUgiuu2FiA==","signatures":[{"sig":"MEYCIQCyvxxVU67HvDmuTn4ILU+Jg+wZb+oyMvtKcK12Zs/dKgIhAK/gTCTrowu8yV7wSPveXpZv/anCDBeK9RCwU4eDS+SI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEd7KCRA9TVsSAnZWagAAROsQAJYWO7/akbiNlLppw32R\nXqX/tw5gp0/BTPXQ5BljdvqfrtjUQWkjOO6EVByxskhrn4JsjVrNIzd2IHKU\nGc+HP11ZELa841/1j+WkXQV5PAV4wnVrOm+Rj4nVFxTgwpM2lUwMQXVxmzkP\nODKQhXK2q9sf42+6Plo5oKKcQwgc3weV9OGUFnUc0gMXrlkIoXp8nM/7Nq+N\nFDs2K0ZDTIcqeddE7v/hODQD2F0hdIh9OvUULcZ+jKw+ycQLj01QmZDHtORc\nq/D7Aqf4l1NM4Ami/LrEiIbGSzQFcv7Jf6HqxRUvueAEufblY59Qn2ji58hW\ntquDLnVyBOfSSwJDvuyp9mXXWWxqSR56TUhwq7/GK9v06n1+fBpmzjTG5Sck\nhS6UycMwegoPBTTlOmU3Hg6q4RZBAFUF3zTHmmO7EOQWEhzINOISOYMGu2xp\njp4dA+FigEdtRSHum1o3elI+fvky7wNnGrNmm8itAaczn/bxH2QVv8bizBtb\ngHRt0nFfQ0rEUiROsC/XZRB+LeZqfKjVLCjjYB2MHlT/vq/coLoF1fQx2rMJ\n0nlmC3/85z/QpSYLm0ENVDrQZC0JYhPdmvQybEbJyGgD5WLk+nmBdlc/UC3/\n1HnSfQoTBTs1f7us/H7XUSL74utct2UJaSXNA6uYmnQekyivz4fEHir0joqi\nI1E8\r\n=sqDJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4636e964281213c07a8cc6450bf8dcb7793a0f03","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.248_1595006665575_0.9924126690106649","host":"s3://npm-registry-packages"}},"2.1.2-unstable.249":{"name":"aws-amplify-vue","version":"2.1.2-unstable.249","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.249","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b3e4282a6ee536232d7a2c8e41c3ad59c22eeccb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.249.tgz","fileCount":47,"integrity":"sha512-84Lp2EzSRahE2Mw/rOspXX5uAEIrJhqPR0TQxz3Rv386rZUga5ikZ5eAw16YMq/luwrRnfneiVS7QeKod8sXvw==","signatures":[{"sig":"MEYCIQD86zopmcXWGy8T5bJ7Ot3pSwhXtDRXFiUbhcAHASz/UgIhALmm2roExgA/cZhcygniSHZIs1xpVRAeHOM95OAxvgtB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEf8RCRA9TVsSAnZWagAAgAUQAIL8H83ww8FRPK9gH3AU\ndlhaotMQHLg47gRbIHsm6Tu+0xDxjj1q583J8cDJwK8kcXiveDSicpX3eXxs\n1hBX9WRTvMMXevMFoTZYekTdueaaqJNct5nZJT8B2VNuS3vNxeg1Jntk3MpQ\ndo/K+UlwuY69cgHQ6RNk270QU9B9vjWZO5Yqz6SEwPFtnV+FnLGWNyIe+xKj\ncl2vSG3YK9H8WYhhmRHl+cbnVnVcSPmHAEj2IFUlDyD4jAByuOFjEPzAx7ko\nb0Sk/ePHLYcN25EnMpRKbQ+bpJsPSaN2qUjXRpuw/a9KrU+D5QAvMk6GEgsB\n5IDezLAnHhZCrh3PjnOw5aImV9fp6+6MUY77wHrFqj9fZr2Jp6jAakikvTv2\nOLQ1qCcj73tpOnXWBi5q1lg2YPz/njAXHs82QggyL/1KRUcB+TBFG1RavPIj\nZpEKJ1T1futKlgsMWxitrFpOJdGk3uQlVFqTWZggeRLb39G+AjJ3pwsg9JBO\nEGD0bxfh7XXxv3zrEx0z+cnmQMy4khamPSW6qGh7+KK8NQI3kAxUFTyFJwsT\nMKfDMYUQMTmtzR8kAG1nIp5/qD3RbHqZnHahfsKTQDT6pQEdd3C3rXLRiWth\nRNg7nBXwx/0Q24i2MRTWdP07O+j/J48HPx13+eLffOl9xgfL6OMOiEhDXhDM\nWZei\r\n=/tjh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6fc9d3cc1c64b64076fa5d9523148b4c648c503a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.249_1595014929014_0.821193205335033","host":"s3://npm-registry-packages"}},"2.1.2-unstable.250":{"name":"aws-amplify-vue","version":"2.1.2-unstable.250","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.250","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d871123fb34b13a18da00eedf4ceb288bc2e794c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.250.tgz","fileCount":47,"integrity":"sha512-g7G2Leh4EvmqNTFl7xbucb2OPivquXgOi37NybbS96EQZ+Nj8jgKNBkkGRpp/xLERP6mE0x7lHlVi+e7a+iomA==","signatures":[{"sig":"MEQCIBG1+9esIHcdOSQFY82fP2eWmzGvGHGoS3v5Wz+XZN0eAiAHwxKElZxpgr1eYrIRMHD96Ec9iApO8uUCgeMSx4NyYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEg5PCRA9TVsSAnZWagAAqwAQAJz7iFExPbIEzMsoqHsQ\n2PGHtOEi3X+Y6j+8bElHtQVqBmVX64qOfxrJ1A0NFtkgKiUJ6lHoOXNelRBM\nGkSjZnyjIFeB0oGrt0kjFUpTTc1suyUD5Jm6g/3woUrFYNmIsGStAXKFCkbn\nwnd1DqMSxbvINHbRB//tBb/UtFi4iJ6SulS85fMlZ+7paqEc/drOz5+df5gZ\nO296Y3xpGNzG40MYy114NW7w3JPKbayQzuljC77SGyl7pg8y4G/yGbKrHcmX\n8lsKrkZdqLlk2E+9lgGMCnm/pt4hfwW57ppYwTvEvTjxoU9MAp4Fs57RKGPa\nPZ4nh8z3cBB4AYlEWK5kv4IEFP/TE5K/ctnMD7f3j8TB+zYwzxH+1nyQnMW2\nnZvwkxQGySq/Fh+YSFi2/f5aOfqRI+aXALvbf30TR7nIQKp2R5JVIiJak5kH\n846pjoLll3LN2Hdqlk4RqQ3eUItFURkZNfXtFvI0j8znjfpI8t3DkSRJomHK\nsZn5ww5kIAEDun2UvlEtfcYjT8UVd9zgDUUqouohCLlOA89fs665v5lXWpKK\nluuODbFNnm0Jkgabte7r9IZycm+SOmGa1AM/NL5ZckEAfRP3wqlaX3fW1HW8\nagWvXr214ox07KC4UCmrbCkvo+yhfD3Gg1b3sNp2tuYXPb2MD11olxQDS/W2\nrWfk\r\n=h3V4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"96eea6ecb3e14643fac23f355d4bfd04317275d0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.250_1595018830413_0.05913690219199297","host":"s3://npm-registry-packages"}},"2.1.2-unstable.251":{"name":"aws-amplify-vue","version":"2.1.2-unstable.251","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.251","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f4b31e8fa9e75c630618ab9befbde4bd0f6263da","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.251.tgz","fileCount":47,"integrity":"sha512-qkZFZ0iJqa19jYLqlQL8nQmr0BDXuhlDe6qVPb+T2t7RdrQcj80EeDc3qhh7nwsNckTOgRoPr6kvfXGpIGGM5w==","signatures":[{"sig":"MEUCIEfEH469PIHzzOONUBIlHsNduNLPKQ864LLFiJt8gtQKAiEAivwQGIoZ0YBcGQf7fEhcPzKi6Lqe2E7SLSunc6IbVA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEhOnCRA9TVsSAnZWagAAuZsP/jUsHO+7iDGocTz+NlYb\n/NKPxcgqaL7t3unXWq+q2UzFkM2w1QAbGAD9AGq9mjuhC+sFwkND1zbVjyNx\n66BzKK1vYOm/JTil8de6i4TNblw8HjCpWySv1CuBHo4X7qbAqYLn5Idf6L8y\nnB8zmLlkd9wmvu9Fzu6tOLrlDIsex37Sc2vdCYKI6/GZWNLL5G1EzZxbDsx4\nU6jpZBcWyb52x5Kyv7ZztGk9FGfUVAWbh5VAbl9iZyY+YMsKxPb87IRpfxcq\n2Gsgyts7FQwTu0bfkjAKFCarEajV13mX+bzJQfUDc6uJRC8sSsjle8vCr0hB\nX2G5A7TaIrUMMvN8TFPZKM6Qqc30+YmaC62HJ1FquuUhsxTOO0Kw/oXNqJ34\nH7LEP3OsV5rNyz6iXcGbHIA6NcySgwhDLhiZOT8nmrliXoj2aezY24EoKQKz\nxkDiLe6Wk+ul8FS1aLjDVbidzDrQBLz6uEE3UqJHIk7aR90v/xNeKPRcO9lG\nk8VXmd1JEVMbI9XylFR4IwhAfBUrYb9/UVlvEMUFG37Eq8jqWxqodME62suO\nuzF6aB9WD16QPAgV2oQR0i3veLAjgwZEQZkWEJva586uoyphMUJlcmQjNxF+\nXbt6Q8NmhDvCDjRvuvwJZpaNfZe7jCFBCVWo7JRi3BfZiP04ia1e4jjJ4Mgj\n8yh0\r\n=j4pv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a6d6fa8d062b9f74709af261c6377763a6b30fb8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.251_1595020198892_0.35694376535036954","host":"s3://npm-registry-packages"}},"2.1.2-unstable.252":{"name":"aws-amplify-vue","version":"2.1.2-unstable.252","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.252","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"292d42b5487129801e8786ac925586678e076609","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.252.tgz","fileCount":47,"integrity":"sha512-sGOFg+zZPHPt1YTUEglGr2HZQm5mRTDa2czde5YT5JtZQJfYWQB2udGmqz/bJy/R9m9eGXf/9wIMrTyJx8HqbQ==","signatures":[{"sig":"MEUCIB8YR5hD13p8wQ/QCXCcKbANGL90CFbwJYODkpThSLihAiEAvUGPSvqB6+mAeVJydqG+s86qgLwprIgv2A7WdNIRQi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFgCqCRA9TVsSAnZWagAA+0QP/jiKZuTf89BeS5vHfW+B\n8xUUQDQag+00qoUbSui9jSc/dsMW6+Kz+UwTXt3BQlZUf0PlwSwkkI4TuY7q\nm0yvIZHYlBsvpVzf3O2CWk0wTcU9SEOKzowi1z9fPurRDpTwNkLzRlGSptvj\niND9+uaRJrFrHRMG0pxhjHjqU+e/ufOtQ4xyAoH09FkBngueErPKAfKBfTcg\nlOvdkEmHddn5QogqAOSiZnHe3VQcpFhOJA1HZmEr+Cpq9gkOYDIb6tmwnqVd\nTKmpWDxH0SMqk+YvXznYUk8cBcVrklgsCSAkwm7sZET7o87jLMlO2Ewum7LP\nVujvXLas5eohHSoWEaYnKrUyvaZ3ZYK8mKr1aRU5xuDfnxy+aGRh4YO9OhL4\nYA/xKlz91tTMmQlA3Xn/fpZ0RuZnXve7etumgGM1EOW+3U5MqR4QZdhrZtzY\nRwbvBBJ6L7zk1JXe6x/ewbsI3SBAd0MssYxGiUak1u8FdcEnb3VUpLR7VNqX\nMQS1U2nDjGNAQ5+RmDceXz5U+hXEc+6bCCV4hnaYrCCJy4w6qeWA+nbuSnIv\nqFeCMxrR5UjnH59UJ+ZTCSniUrEioWpIDIynqNQ7r8XSzvAd5dsqaNZa3CAS\nMLQu+VIebYcytT/OpOBQQMr0BvLpguWLbeFHQFdRCyw3xQMDmrwiS9MgkDH8\nbV2u\r\n=Ob7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d14c076fc06c680e81c0d88fc38a348deb4f5adf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.252_1595277481961_0.3414829791791083","host":"s3://npm-registry-packages"}},"2.1.2-unstable.253":{"name":"aws-amplify-vue","version":"2.1.2-unstable.253","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.253","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f9d82ad2a38b9d6565e550560d690835d6bdc3fb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.253.tgz","fileCount":47,"integrity":"sha512-DX+JQ99zLss9CGuDXjd08lYuDqCqW1Nkt7CnW5erenaLKwzxY3895VIHmtBSnwql1JPHhw3Uy0rax5R3xLsogA==","signatures":[{"sig":"MEUCIHIRpxKicUjO/pWE3hrhs6jxXkOHjA0ND4HIq5bS72FAAiEArwQdXd0M0gYy1GJWhaZfxp1pyPpbeCO3Oa9IBFjC5yI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2962035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFx3JCRA9TVsSAnZWagAApqQP/iE+1UuPYrpPy0TtY2Zb\nWc5185y6xYLvYYJ+Ah8DR53TaE6Qy/8LQGfNSxfdE3K/g98eR89ADMw3rTUi\nWgFMlrs09aNQBE8vtXK//9xM3kA482dKFtUbv7YHqH9hsD+gj/nFAJTNtrhr\nL6n6WdwZwalcJ8eluTGgyz3bU9iRHG6vzi9tx7Hrrs61/YSC1hCSe/h+X4nx\nRQWnyIloRw5LTDLE99JOqdovaBkbivdB5uWXlohsAbttoNRRvbAXDzCXr8Ef\nn0FDImtMO1+zkkdUf5yAARslvFIOV0ugXkaZkfAt8R89jAHeb40fuXO4rwJJ\ns78q+1OoM8g/LGw7j/y1ntMQBmX4y6KnJysl2f1YNu1OKop+pDwwUcQXrx2b\nQ9zVxbDm1d96geWKZjND2EIA7jzQRW5i7vYuoPkOl5MzScv13zQJNaYjlj2d\nVfPHFPKKnAWRkHcsnn+vosaXTjO4yTzEhh1E0MbsZXRctxYNTwEJH4N6hhVS\nVlGR/C5qp4btFGlUZaU5/mUFRk/w38bhgkK9kFXo7jEZbouv8ZwhLhdNb/pj\n/3IrVWO6FaRRDxzU3ux+/qrmQn08I+qq88HZ3paTOg36LmvCoENtXuk7fF+U\nOXUp3JMO9+qQwQzb7As/3W24MWrEXN2qoOFGZ5ln93oghZo+yzQbVTAboOhi\nFj6k\r\n=USJ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a7feacea4ed506340d250249d0b15286fe3ef5fa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.253_1595350473325_0.7410462639506681","host":"s3://npm-registry-packages"}},"2.1.2-unstable.254":{"name":"aws-amplify-vue","version":"2.1.2-unstable.254","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.254","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1e62b8e4ce6a4da504febddc88b8201a861f7dde","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.254.tgz","fileCount":47,"integrity":"sha512-0SNCWLeAN0OaKKxO8EAkVRTG08/DQRRUwfKbRrlRHb202GjNs8DrCFyyOPo/lol9dzUYpMOYiOczvzMUlT0vRQ==","signatures":[{"sig":"MEUCIQDqUYzFRwfBKy3Ii4bEw74dm0QmoeelDSGPTq03qLXWYAIgEiGT3XEA59ij1p4X2GaknQqZqrUovRGxIpU5lJRyyG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2963362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfF4QBCRA9TVsSAnZWagAAwhgP/i526+Ni21DDkCwjwDOX\nh9nHy93qi9nTIJz35nEYqKNKDyHCbMzG9BICbUQreEIIZ8ZdjscLz8MvoR0n\nBTZY89QebBklCK4SBMdpPZGveDZoqpQMRhjVv6GBIUMphbNu+Z00RBwMD5zJ\nnurV1SBFzNi3iytxWUyaq4VxT/X4opZflkEhWUWtwnBAGG9O1A20XKjze8VN\nRHvgVR5znQi9FMV5WqMov8sl69+YZS5OOYPsE+NKp9vGJXaIdSpFT6hnnwav\nBxTMtrZQEfgthYXbeV7HHIPrOvPwy8NPEhVlEc5jDAWQ5ECTJneG4zkSHhFV\nTGu9rR6iksmQJL9vhX8l/VYjFfZDq5JC8zOzjjQLIxPaXWOR9LJ+5lF2d7UG\n0attObQrdTITV/gvWQvmXGpYmGjfyAxJdfGxhP0bGfZliWVlARBt1SXy1iTX\nptq16e4o9DuSgF10hIZX01DiJSGo1YQxOsnY1TfCAEywDAGzCp7eCrIZApHX\n1OTMbTcO+VJbFi+wBJ/kG77rtdt6D9oNFKtkInoguVuaILjyFCIdEAbRDisX\n6foRA3AsJCllLiDmXTmD6lmQRBzlLYeYYS2P497i6epvyoPXzVugNwu2Udxc\n7DDUwxdKxetoRyvvOIy30L7lNBzv0vcEHJnwWHE4X6QQ4JC7aphTMIcQTo14\nJL6T\r\n=sFgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c27b8164995220090967f782ccd8e42ad4fa4bdb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.16.1+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.16.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.254_1595376640522_0.6805174587033254","host":"s3://npm-registry-packages"}},"2.1.2-unstable.258":{"name":"aws-amplify-vue","version":"2.1.2-unstable.258","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.258","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7e221054323e2607efa565adec3b24722764d6ca","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.258.tgz","fileCount":47,"integrity":"sha512-5wDUaU/bOhPPlPDMVCdacZ5YpREZUVBqK8HugivtP8gUi8hZgIrRbj8Kb9MHQG0Iw6Wa8cVAoXlMjMOIoESWpA==","signatures":[{"sig":"MEYCIQDSoTkqUIHBkYUx6BKjxicTP/pLJie8UO6Hp3d2fRm68gIhAMRdOgCMtG//G2MqU99/L3EOs06uZTxESRawcBeZP55u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2963362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLMxCRA9TVsSAnZWagAAW0sP+QG7QvKQv+de8glYyfkD\nTo3AaEPydbsF5maw1cRifOhbtKvuIvxGNpAMDAF6xHVEvfH6ZRaY5g31Y5Pu\njo7FqkU7ea9NJttkmDF5ZHwMgbyCLq7LBw9SKK5N8TC0RknFiuJOGsptuQj9\n3jhtH4gDcaaBkcpfGxRkNsK88GTorXlEIv1g0pZDYYconOx+oE7qfLfj/3+h\n782QR7ufBZ4+3q0TOXy1GzcymZIQSIuXWxUvKF+n7vyXGj05QJ6aHGnXMhBf\nAXlQV+ROIl9RoLUAurkR+PSOh1bkak+uZjKbkIwnd1+4UVGwbJC8ap7PucgU\n773jv8Rpji4yAzfVWB0JlPmKL4YzJ8Rp7us/T6XDr3KiEE0laL+HUaIjC9RB\n5qKmKvcWcd1qKoP+WUyqYyJEqL41bCDmjdCWuAFLXStdfN8x/CVfmUh+XJ4w\nn6Um4jYuZxQaIGx1rQTsd12qui0J5453qmFR+qCCHIwh+fMY28knwICrIJw1\nTYo+U6O2adxFzbNrgF1gfA2NAYmkRUFj0Ir9bBtCbdXSbSZ5pwwkHZXEQjjN\nq0hM2chNQPy8ugZZdqlpOsh19p1kvThWqW9HWp5I1v0+MCoQVVVia1srF/1J\nY1HCcV0ffC7aZ6tJjzFjGVNpt5qgUfnVGjgK0qLtCd05uMJJnFOZSLqZokqn\nGkla\r\n=QEmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cf880a01da35b3fc770d4b1d58de197251543d08","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.18.2","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.258_1595454257164_0.7735820246463132","host":"s3://npm-registry-packages"}},"2.1.2-unstable.260":{"name":"aws-amplify-vue","version":"2.1.2-unstable.260","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.260","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0f8feb40538ed63506c3096b686cf4b540de53d7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.260.tgz","fileCount":47,"integrity":"sha512-h5AiHSbr6QhaDFWW0CsgEyXZ3/8hVFmFRZFFnXBubKSauTyXG/v7m/Rpu3EwCE3EvuIlUciAoWwF4hMpTJ3YMg==","signatures":[{"sig":"MEUCIQC+aCiJcqnRBwxzOqkFvRqe63ZoJyLVB6NeVaW63q6NUQIgZlXFwnt5wolPlpV4BiBQz3L1jkF7cQvHmSIgkwm7/IA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2965809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGhOfCRA9TVsSAnZWagAADlEP/2SZfswJvPTIZ27n3EgE\nsIo0oMtvhhtO24GThA1Kh6dCsJfrgJVe7QaoY6MaM4A+3vP6WZ5WzzNC8rbc\ntf3J8ZdW+Xdm41isyOALh2ZwFvoECrmqSLN+52IWfj9m42VbEzecYQVZ8Dhn\nWKiW9kHfAogG1nPR5pum/wFFLHRN4pMSPZ7cKpLWAP8LwtVM1HqLCYnFr4gt\nPCENl78MyzfHDClpiaGApFl/vAQUpe1WxtpfRutG2fC4WYj8LgmFepmZ6s/S\nNroiZtme/+XYXKl63zrsRPZbn/T/WIqm8qxkyrwZ+FMv+nP99DXqgi9RF2dk\noVa0jN5+N9SuxvNTzfSqxr2TvFYMVUzvLmzvV4ZVEnU7LjDh3+wDSGb44Pw3\n3RxrdQ6kqEPwwUB64wEbO4BylTtZTpFJmB/VvP6mWIwbeUI2bF3xyUuAY7g+\nYP5pVAKJDlwE3jJfAUuYRYwqB6ejbc8sbepdrLV5q5+nmCun6Ht8W2ZVUlym\nYGcl3F+oOEaUHJW82e+AF+GM3hYGxvEO8j1Y9cGw/abQRhz6/evWJOCYW+B+\nqM4N0SGU2taUmqJLmag/K3PdwIT8gt6tJ6NkSxa847+XAACNFI6bkN3eTt4c\n4RBbRKEXV/NCDopSx7j5ZHKGK41L3BE6/KebmBVpCpLjN/L75y+wBK3TfI+F\naGYC\r\n=NhnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5682f221101de671a3cf906edb43031432735a44","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.18.2","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.260_1595544478858_0.2134374000318513","host":"s3://npm-registry-packages"}},"2.1.2-unstable.261":{"name":"aws-amplify-vue","version":"2.1.2-unstable.261","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.261","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"0b977745a2a05addbca0b47a1a40a8fc097b1089","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.261.tgz","fileCount":47,"integrity":"sha512-R42PLSxUx9kA26MLSJcke4gEMQJzl5LXq+cDHm5qycdxK7ygo9v/fVhmZ4svVIBEsLKLesg11B1d771WoaXj/g==","signatures":[{"sig":"MEYCIQDsDD53lwLssQUhTrlIG9WgjSWXamraF7QgWFcY5VcyDgIhAKxwSnyoTVeAk1oNUeRBagAcH8zRU+HboeZi2i8yytgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2965809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGiADCRA9TVsSAnZWagAAV4wP/2E43Eu/cBSoe+gaxvj8\nTSQmxhciyQcVSz0v1gCs47wm1zLN/HkjHHifQFEq4OFM6O+D4sAkhGLu5Ij0\nsCdx8z/C1+abvyYnlISvwpXY2qVDmJFCACcyTgMBHszlmXOwjY5kq/dHOnvz\nbQowCqgiAXKv2eExjay2rs5rMNocDq8mSfceHaQ8pe4fi9a88IHNPWTzKqGw\nWRnJP2K86Z2G6LqTA8rpz4g+s11rP3W1vZj41HlNSiDZcRcFVxXvW7Yy3zk7\nr7A13OATG8ovRLhGJdN7ns/PKnqPlDsotbxSAiLLkU3vrXgUSvV3phZSxt/3\nOSINfXXVOIeHdWGizv7zxWZggwJG89qVcISu0Qs5yGbGNCRzeJow1galrmtj\ngCFsprvJ0z5SyqChbPQMRNOP5bhxYBN5mYdn/aJGXPtpLgdKP5hlv8tvqrzP\nZkQSqjyWAz+s8w08QyXCNP1YV5ebTAD45kRPxpURToCkMDGXjJ21pnwPFEfS\nqCcTVruVMRckwDBtL02hN+o0LxkAUAPTM2dDVSj7I9Kc0pVy97AGZzNvMBHo\ng2uVd0rohcNLlRkQqqsCRmXubptdQZAT88Hs9hXECAB8zwP5k5GcO0Vh7ZQm\n3tpFSopjHIeYeImLGq857JcL2NKPZM62n++uRJMnTVHpKDyjC30kZAxvpcRT\nwzUI\r\n=WblT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"84c620ab5687bd49ea0827f1530952d421b01dec","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.18.2","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.261_1595547651092_0.9591795031938906","host":"s3://npm-registry-packages"}},"2.1.2-unstable.264":{"name":"aws-amplify-vue","version":"2.1.2-unstable.264","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2-unstable.264","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"66f4b0f47a9126af3b2aa97cc397a97c2357b3ed","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2-unstable.264.tgz","fileCount":47,"integrity":"sha512-oaigCOzEMKvFXauvbgvGruARa2TZF9t0eRpJkAkDuIzJPOFE2bUbblZ1yMVc4KGEpDMOcLmuSHL+zV7haLkq+g==","signatures":[{"sig":"MEQCIHaL4zUgDzInFAcM6o1+1OO/1M/VdKmQ4bLtzyFLCAKaAiBjIJLsyUpAiumnw/pBe5JoCNf7XZiio7BI/1yKSjiWgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2965809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyqZCRA9TVsSAnZWagAAIcAP/RvSCB89Tyr6jrpWByeG\nZidPrQvkEg1jQEpaBGWfl2PqJJ2VG+YdK4NLdOx4grHvZ7ovuafK5HNm9/wf\noyYiOFnRdioD9mPfLOdGLUpodr8mQfuBIhs/tL1YV/4808cIGPeukuGM/7bY\ndE6uuZ6BSN1lfQ7kNCSYEm544oRGZE1iYLtyYJbgxdG7sZs8gJCpKm07tm33\nEn/DYXeGosxynYW3FQsP0kkShHHiuKPzo/aq7rmTHFLJ0PHh8Z7ZgueaSDdz\nmm/DTd6o69RJZqeRimoLM8wg7nSjJELpLY3LsK8046gtF+bFxBTgX7LGLb7l\nh4jkqAn3Oa8abjIlWBhEhKG5EDYMAfLZ1g0xd5P2n5Wuob9NiUSLjZUyYRIq\nMsSzqTkfSxjB80lI+NjP6bXK13FkrdysFiPWE1Tg5j/OOah/MJy3cuVa+vgy\nIs9OrQaKIC/oxrnzDaNObbo958K5PaFpIy0yDn1QcQK10ZuV/tL8ckl290si\npF8bBJCDNsfBD9po01IzpR4iVTvK60ygGJDZ0z655aqfpPDdfra91BNkuE4R\n+oMBubJy/wUORDvkdFjHzEVY1+6eRNJl7boQmjwjZUoeONp/0c25tqSu7GnW\n0PU67LjdC9b9k7lTKEQ4/5iuOB1wk5bJl8NziijKkMFlPwBmEDJsb2Y7Q9Q9\n10av\r\n=48uS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6789553e1428011dcae019b17ced83d351964276","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.18.2","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2-unstable.264_1595878040661_0.5470524679237745","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"aws-amplify-vue","version":"2.1.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"09c72b0724279fa167e879c04cbbd6bc49e7bfa0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.2.tgz","fileCount":47,"integrity":"sha512-1Iay7FDgWI2kE0amSHkIqYA1bJLkLq08DWoGF6JHtxTRRCJ/CNstpRf+j1L30h+ry4DlBh00+ABe5PnJqTiuVA==","signatures":[{"sig":"MEUCIQCV759taSD12OzRECfdbWU1SKAnRFCq+yUpx9MANYUjdgIgWBPTeKCGoPDVLDjpq8hUHtdmpO05NQ0VtbFOSUtLbp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH1gACRA9TVsSAnZWagAAaFsP/jXn01oixWk63/kSNWsv\n8VPahXy1VkElCi3iP0OKUTmATXrL1+eFdOq25Xhaof4NXvdDsCg85k7GksaT\nC4VEy4s1BPfV8QluOckw0aAMi3Q3dnZQ0L+sl+ULTsliuPvAhdFTmprsKQIO\nmuDb30bZuulMrD1d3TcIzXrWgsZ00M57gh6zq7IuEPY9HnR/vZaz47z8xIQ6\nURn4UhwwcZ4CBRiqUa9EYj2pM0CUdUBp4/k8b5aX469Xy/P2HJeVRbh/G4NC\nNQgxSRi/+DvSa7B/ZuG4vVf5qBU94t+0lx5z/R7Bq3IAG5k8WJEJ+RDY3nXm\nwh4sUhb7DHAZHL0qsOl/fWkp0WUwqjkAIeBqZrPs0QNE83baicil/bNh/Iq/\nTG5xBg+z1XHiAdoSr1X/9aRLqJn8KHp4PYckicALyJ37oIc869mP42dIdeqj\nW1ApW7JpL3CvedURFBQd89YS7+b/+PuMVCY4D6DIBJ6laK1i4wzRGf53RCIZ\nS42rjshKwz0M4PGUlKYm8m3dU4HPOpUcFMAHJBc+ER5XIn7li1fG2ypMP3ps\n2WD6xbZdH4gxcmlmnL/OcA6H5G6M9XM1Uj4S8oSHeezS87bUMFU7YlWL1IMx\nvHMX0ToCh5LJYukCFHoGZhzPNxGZPz82iTfSHuOxtXEgK+RZohvrTZ5DdmeE\nQLk2\r\n=bPL5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"6093667eddf58013bb89365106c8c064357b896d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.18.2","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.2_1595889663423_0.14409099562915784","host":"s3://npm-registry-packages"}},"2.1.3-unstable.1":{"name":"aws-amplify-vue","version":"2.1.3-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.1","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"dfc8d06b375ec374242144b68eb74e9208b413a5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.1.tgz","fileCount":47,"integrity":"sha512-TcHphZKQYlV0z/ZG02gA7B2KzyXJqr8Zy/3rNl0JRUkyCyFL/ypaLyXzN6V8ArtJkD3icR5AZPVzBhBfE+7H9A==","signatures":[{"sig":"MEQCIAD7OVIhGHUXExuTX+91fRjFxijFXHX/FyaYyECsGEzkAiBMvC0ursdyS5iMdzOf6luUqgHR+WbNPpS7cIstfRlCtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH3BvCRA9TVsSAnZWagAA1dgP/0zQIhJZdLA6r319JAYt\nxEEy7ehM58JjJ80SuwFJQ+T5CfmR8ReVITcROAca22LJbsO1VpshAWd8m5dr\nyaR9aMQD936IXJqwMfZIAcKvgehIDtu6YsJAR/D9tGNa7FdQZsxizhhD9zdU\npfUqhudUYGaqHDkaFBgHdRRI6cRJ9ChsUeMzk/sobguToCHwV6h2dKzmrjnh\nuqDTcjcqHX4qkOMSXcGNMcUq+asbPV4VgIt+uoO/50SHqYnpoMeXpRNKZsEr\n6mi8qjywxRDb6O/ojqqvRRtxRAKNB8gJouebLra4sZ8LiZc7ZoPncwtW1SlJ\n5IRtXYr6NqbuDy/a9Q2KIzFZdT52YuSYPBeU6r3iJwt5dn+gyrI+p+EWHijE\n6zRoMafaaqedJdGHJsXWf6WlXzNklxykai9bbdNoWGxHFm4sTfBJo5eUU8Db\nBU3cHFktMiNZn9Md0lKspQ7TC0sU64Jrpd9kdvFLoJQS0fJ5xBDgdLtsl3vA\nlhsYkO1Ms/2NOpfh+JkanUC7ZxxCadp7lJ5F/D2d4ihQm7ojQwd2Dku0Arjr\nfbne4lCghAbMnEvzZrMcpG0ZFAuq6Aq0mdNScNBMC4v6txAwEmeyjENu9tue\nZCJ8oRiE0/OiCuIGENhinTmi7/VXaqcAe73c+7cdO6+a1NnKQ3tETPHKm8nO\nxLbi\r\n=/Zpz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5cc818bab04450365626b593a7521a28d343a2de","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"12.18.2","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.1_1595895919123_0.0052292451512077065","host":"s3://npm-registry-packages"}},"2.1.3-unstable.2":{"name":"aws-amplify-vue","version":"2.1.3-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.2","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6fe524d58f183b28fb334a2fee12ef2fc0f93c9c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.2.tgz","fileCount":47,"integrity":"sha512-zGtRyDDa6HIRHE1yGyRO4OjVoYoLdmK0svkP4XQxWfInzvg0Oqc7wWBNk1qgFB4O0maV2a7ZHTWXNha5B0730A==","signatures":[{"sig":"MEQCIDMtWwmbkwvEM1vjgtLQRDmqWA5NvyHuL/iKDc/FmweUAiA+Z3YNMPe+ZUPD5qo9pPNoY1SJqZZGhlrsoWCKwpupfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH4YfCRA9TVsSAnZWagAAWrAP/2QTkIkFCmqndzqWo4kC\nvxKgOkLpbAbcZ2TpYMN3L+98SEALwjOV1/lH6b+j77vXKM1heYcCHu20iUXU\n73DEXoaidzAyCrCVknN2zbZgQ6eMl2YwRnnuW/HoO1BZItuMKSzwjJZ1M5iQ\nWqOGpCNAmlnVahiAY4eTOs9dF32IG8SeRUmD4QrYMNDdgPQqwPrE++dVO9Wo\nkSssKmuV5D4Ul3qDL7yxHk4FSRxG+P4n/aT4ecLBPi06SKQP+SQnll4k6qM9\np7Hfvgh8lLhovh2eg6zDvfw2y1BkPvUbqMVfKB3QiXvm5mJqsATNH/PQcWAI\nXO54ATx/ZWNWIcL9Kms1O+VJJdGDPn92YfhuliFnVM4Ms2EWCnPNQw0S6acV\n7tSmxNTNzhm2WuBSxt3K+vORiHWHkr/gU3jI55iNn10cGfI0GyfpLvosQMrf\n4EGckpCqDAAJDgZc0LhzRcIdEJjmHoH+gDV+J8TxfBvNJkoKir6iAFytybU0\n9IWVbSAMi+ygctReBAj5E8ptPs3paUJOi9CfdBvUx1c4jOQXIxTm/akuZgQM\n6/zTys6eJ7um7FlOa1RSySnUOl2aDSQMhKKXGCE97E0SYPke/NIzaPh4bOo1\n14Rvw8TpcG/7MZiCzOhL4qg2wPpgQCyW3m89BzWaONwGcodlaha/x/VeT5Kx\ngh6W\r\n=NSQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a9133832a9fc6ae25b7c55144927b9067909611a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.2_1595901470829_0.22269521365547784","host":"s3://npm-registry-packages"}},"2.1.3-unstable.3":{"name":"aws-amplify-vue","version":"2.1.3-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.3","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1a67171ce6e03379121a2e5fb6e94681dfd4997b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.3.tgz","fileCount":47,"integrity":"sha512-VeIH2linIhp067l3clHQkAYwNis31P6WikfCLIxwjsTcdbl9abiJf7LvzbholQegUJv7OScmbA6zkugiujZieA==","signatures":[{"sig":"MEYCIQDHOx5j3eJunCkisZ91QfIjwpg8Omgsp5h0n2UxJnyIkAIhAIoY2ITSUaMYUWM15TGGTyABkKJR1JWPiGWFDU0gkWIm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHtGCRA9TVsSAnZWagAAEQQP/3nslI2ZnC7T3MUzGjxk\nd6oNA0G/b31sLmig4ZzUxCsRROBQjeuWVCBc3eSNswpEWOlyZJgsX4cbJ1X6\nWu2lc2DuUk8MQvGXHoZm9oTTJ/VtuJ2Mm2yUEMjWfn2VOCRpGPDcJJA3M6qU\nhGcb5t8d/5Oz4EP2lEqztPGfCHF18pkm/3RPSyq0GnZzi0hAFcoSuiCupNhG\n26fmVTcbXw73BmOCivefIkyBLDzkLaEz4+Jg3h+aRMMXIOJd2/1SPYeFdl1I\n2vE8hsfn9OvVcdnO9RSqcT+bIdPwbrmg/lvq5fvlwoOSKil2Q8t/3MFvdIVJ\nqYGDQA4l9OxUz//YN2JNkIB9CdrVC9xYhnaiKgHq5SiFrcJZMWcBYlY9g5Fy\nmwug6R9cZVBqrzNz5tRtDzj4oU7HYwH5jJjaufpTLeP1uOVX5d/mcjTXXywp\nU879l6l8jd0OWNAuRw4Wcxfd+toUopfbcQGoVi2wmOcjc/hY5PCRPxtUkK39\nMIRu61TcrYzvW7ldpesV01p6V74LL3N7iSye7sM8xegYW3CV6ymxjJkjaAUH\ng9zRPmdTffkuFpmCqbVDtszhF/GfH3oTuZRRL8QIsOmPMv9/BdIwUHMMYSCR\nsdsGkvzraElEG466CTCu3yX7X+7Ji5H8ucP7jY+Vbhz7T3adPrYGBzmpG6zl\nWWEP\r\n=mjrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3642e6af455ee1848c1cc743a7a503e96baefa41","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.3_1595964229909_0.9556645919884639","host":"s3://npm-registry-packages"}},"2.1.3-unstable.4":{"name":"aws-amplify-vue","version":"2.1.3-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.4","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b4cdc6ae21d20e8e7f9e4aff834021794bcde206","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.4.tgz","fileCount":47,"integrity":"sha512-nfaxRGj2Rze3Xb/y0JpsVNucC6qwCcY+74LTZ9Ko3c1erNPCoJnrPrt5Dx/u/P8eAHk+HgppP5N2+nIQDDfQpg==","signatures":[{"sig":"MEYCIQD8L5C1JQyNfG4o6w1NGJ4O/W3G9aebZgeJpGpqZbeTYgIhAKf+Ji9DDaxbFvCAcOOTB4qQ92Fn7t7nF3VOne9v73zM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZHvCRA9TVsSAnZWagAAI5kP/j0weXx7+R3PcFtQJEZZ\nfMorjwJF3bJ7UO8BzbUHBOSaIZzDRKtmkXHI6QMFwtEwoPr15iz01xYwaWYh\nMSO4v0hB93yEKpfFpBnaAC9dJQ4k/u4+219RfjJz5jH4Njy29nFacgdaXd5Y\nV3Zkww9kHNA4MYgmNpsdFoDBHimoFvaDlRT03sVnQyEU6yseX3FGQbgdKGEA\nNolA35vgLt5AxCMxPqULVdeqTOx3pQkKoLV/M+zT1rgfLUpKZXWN4LOjja76\njjZI7ZF9hgw0POgFPp7hjKauTm/jlrr5gCejIDWOwPi6Opa0+hAuKxnQiswm\nob08omZDJaI35vcUjZxBQFKMNrHixepgMqx+/5KY95AcY+Z+08yGcfsb7Inw\n/64jD0vqNbQ8jtUwIOINZMz2bdsGaWMuyQjmxtp/qptnXCwKtLVUwd2EVAwj\nvE0kg54xol6cKS0FH4+JLZ6mnP1XtC67KA7KUxC2nYL8NfqzAQUbv8DVyCIC\n46jrWK9YvLctnV/zys0gJZaYAvfZkTqMkaSJjipGOTmgsGUdEJD9D2s+KuPo\nO3tNcKuyxs1z7xo4JOP972Q1KnCpLaPawtXJtE8eWSo2IY5wkGTBdJthZa+y\n5+kNs59NI1HgmT/j2koGpnrsPOPNHU18MxtIpNgelpYUyYmVTlVpz4kChiAZ\nbOPl\r\n=lTEE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"572e746b83e6ae3b3e2f8858163941e081f3a4e5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.4_1596559855254_0.09359608998266444","host":"s3://npm-registry-packages"}},"2.1.3-unstable.6":{"name":"aws-amplify-vue","version":"2.1.3-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.6","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"2a76b4540eef90be6e1e29ff62a86e2fb823b08f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.6.tgz","fileCount":47,"integrity":"sha512-rtMPHouK3zmJzQRzS7vErBUmJBJUYxv7Hpsf5PxtRPjhJbWqYCKHh+1+fgwFWoHeaM5D/WSSWyL4tUY9LK798g==","signatures":[{"sig":"MEUCIQC2VRRiJN1S/wBPTRRQC0i9tDzKqmTDvlECY5sR/quSjgIgZoxFxVaS4wt6+Qa2AykEvKqghaEC0HHid0LbyW1YeWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKyYMCRA9TVsSAnZWagAAHdMQAIVbGO9O9+8Nx0Ps5K6a\nFMuAJ/RfUEXe79vs5Q3+gpkA0vdeUh/vdtxvI6kJmXGDAuSpO1zm0g2OEvGy\ndmYX/InySEdJJndll204gO3PAsJyKzL0lVuCanRvB9CZe7H1agFO3n3gaRYI\n+FURP2Fd4CDaJKcGROcW4w4VKXJ3QmmvOc4J+F555bmoiHTGynenstpAVQp7\n2LwFfacIaLOep8P2V7qNKJ/pF9yflxIdjaUbusk3C0Cb1xdBkEHWhdv0j4pF\nei+NeIYnmg0G0DfoybFGUJ/OMzxDFBe0YSX3fqW8Y2pAmX1VDP0oz1k7H7MR\nHu1/KQIQAVM+Uk8tp/rsjidUm2KSPu+dlXSzqrfOR70EVqvYzbryyJ1VvcjA\nxIuXG//bz/7t3djq2Sia71AF/hnIid2O1VtGuAHFWpjSGweaaXu7M0tiddUB\ntclk+n5k7xlOnsxpLnaedlntuoKS3NGnjz9CT93lLmpdtmBkkK1aV7Oz1uyh\nng1KUb4WWxpKsC85ZMLvd0EjTIXKXbpVqVh1DeUpRolewCf4jjODNG145jCU\nGXZngfE59c4aA4eowH/wQCyJgNk+9KVtvxE3Q5GlHYPcd8BkF53LcSjg+XQP\n3P85Ub8g/S6iV+LMm9BN50SclHQy/h6o3t6HAM7GRNEI87y8Mv2ODJWKUzV/\nrJyI\r\n=vU/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"528466e8000cffc3ee4340a03798f4a01ace0022","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.6_1596663308065_0.9141540438133888","host":"s3://npm-registry-packages"}},"2.1.3-unstable.7":{"name":"aws-amplify-vue","version":"2.1.3-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.7","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"47b5f185de076c16c037f8bd257368a57d69299e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.7.tgz","fileCount":47,"integrity":"sha512-5Y0kT9rTEh4Pb20c7aeCXhb3wbV9WZlkxwHsG1kYiqHm5v9PSmbAc2Vd5f8qL0kAvma9Arnj4s+vXbwns+mZIQ==","signatures":[{"sig":"MEUCIQDsAlIGgVpvrlKEV+WbMyiuqV6a1s3bGf//NGqt0+HHjwIgWOlXo9p8T8xGOxzbk24M9ivsyORVl6Fc2YhAtvjXVPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKyxOCRA9TVsSAnZWagAATQ0P/RRyJ/pgMHxDSA3u6eEM\n0AKCGMRS7PtfeqiLXafrWulo6HJ0vkAoctZ5Sc5FHY7xxUuCwIPj5dDEI8Ql\n/nhdckoJfqPPTEMvIVTtZLWh5owU80pmBLjkmgKk2JrAEc4SbN7BnGXCUCDn\nipUNZH/AJGIJYQky0QBADqai7rnKrbr1jOkStCgbBVDLA5oLqyDO3yCCudV7\nZdzu6i3XrYFWQpC62vpOmN6R82iovxTlpEjbR+xsKdjqerYQIWGZPTVm9aFZ\n0Fj49WI8Lr2bBi6S60Q5cG9xFjeFZlEOqA/XWUpFhQurFix+cDH9C5umBA8W\nzGVhe6aFeu2Zryrf9kmErDrpoAsQ339LSgjzEZBnZI0l+zom4/4EKJMKhr38\nE0qUKQ09hgo14zLm6T+b/wFZm0+kYcOl28ne/ylivTYA6Ow09EtJb6GJTt2b\n1aVq1/z7x5oJjmxeYJKytxkas4d+MFqOh114tUFG038iIUCkvnKf+H893IHX\nwI6eIxZJjPY4kFfuNNbG/Zj1JWV4CIzLbnsXpNSCxslDcqKnGmvnVOvh+aYA\njax3z2TcDoQyDJ5oFQU6HA8hXFZTelVlukPPON4NeuubnrKO7C+rdkczIbIE\nz0KKWMh0xNFBZ9c3xdFe6b8HDoCcp9xPBpaPpIgDE3jJbdsBVb/6thvphc6r\nmtWy\r\n=6OBc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d892fecd1a02485aba401de950ab20429a8a5c78","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.7_1596664909835_0.28430912326060676","host":"s3://npm-registry-packages"}},"2.1.3-unstable.8":{"name":"aws-amplify-vue","version":"2.1.3-unstable.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.8","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f6b4937081917302351713eeed5bfd7e6aa402e2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.8.tgz","fileCount":47,"integrity":"sha512-5ORdiZsGuPQMF8pTRFhJlys5EqKp1FeTIqF4i3G1eIlkOPDi/VbWpMtQr1GiaLP3AsVm6zIvyKpQ+OceZFaPjQ==","signatures":[{"sig":"MEUCIQD80XObgRVY70Ju2809YQOzEFsp+1V0OiIqG95+XAltVQIgfBFXjScvcqOrISqc9qyrQtA4dUJk6SNOVw9u/U5ehow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLD9DCRA9TVsSAnZWagAAveEP/0xJkxwEYAoi8FbX7ONC\nnJaSKYn5jQC8fay90mlOiU+1O0xrKrv8J2V0NAVNPZU361AoK/4/+q7srnCJ\nCiEHE1YjpaXPGuY0y7EIQFTLynMpHwywdUtyFL0XCvL4/ChyZ2Pzpyr7unQg\nKv1W2amR41MBEPE0UcBl64RH+7p7t/QSA1sCNvWMXTzwpAQ7YKDNf5PHatqF\ns6yBHEAXZ0JuNP4PU8JVgLRLRMF3YDfSN1TZP4nchizkOzB1CHYZfPHrH8xz\ntHa3gyVQW7Vld8BwbCLeqyegJ7WYN4rYRRgn7yEUb+zm4MDLNprHSYrB2OMw\nnsfvqZjlv7z6Uav45Lb3t+ORPmyre19gFuvTrkLBFd/LjgpB98VvGPUpy+YJ\nsXnI4J5QTBDBiWKbcbbpjJ3WICBCaazIuFxlpU3gOM06yK016scu2LNjAjFS\nMX80x3JocJYxCRlbGI01nOHuzcx4q36JF0cmTuAXScd72QdoyKT8dtnz753e\n+Nq97qj3ucuNzR3S9c1CdFbAWDVANSgcOHgbsvDr5WSpzOS4x5L/KomG1OCA\nIN+g0FxO5j1vh1AZvyZYJ/EWARjxZiVn29c24e94eRP7meFC8DXLYbMzpWwV\n3F4IM3hP+zoqzMbPV3uJswO2je7ik5HkXVPFuhqJI+Jg0wQ1new/JCrErlDV\nHOxh\r\n=Bfts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7d17aee834ff9d2d4f280e4ede87d12a5753bef4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.8_1596735299221_0.2717764536050413","host":"s3://npm-registry-packages"}},"2.1.3-unstable.9":{"name":"aws-amplify-vue","version":"2.1.3-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.9","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8c5185a2adc1dcb4f6b8f172d038e107392c56f1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.9.tgz","fileCount":47,"integrity":"sha512-CMFdP7TqjptabVVKJG389R/5HIW1DWJupdHGtwQ6pHZuGhqok7UqsX3SbJI0nMV0rkxpJqWHHOJwelh+4Oa4KQ==","signatures":[{"sig":"MEUCIQCp+jt3r2cQKMHw1ndf6SKlgT/Ynt36i8sApaQUMaOFVAIgJ5VyJKmTPbc0KeWOVc1+lBx7ZhY2b0Q4U+SABnJHSl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEzTCRA9TVsSAnZWagAAPTwQAIU3yLDfYuLcEBNg1siG\n9hwg7RiDKsJeEkEK9y5gDzYwYwESfV6wrBBq/hXpN9Q/x6wezhA6ZYqAocJZ\nO3jSyqF4SmYuoVGK6NcfITMrqKCeJQqnl4o1HThyhzuX/ni5tLpHx6m7UJIZ\nnx3Uxpirz9LUQdwtO2fx4Sc8C71rNuERQ6dOg3O46VQU/iPMbmBvmVQmOj1A\n0gDAAWSClOQKYliATmHwVxKbPfIrb8L3kD9vzjmQsV+E1XZ2+Mg3sL+Y1DVU\n+pmnCSc8BjENhEEx7MVkrIg8SFGKMTi/eHiye305GBpf/YdCXX6riGrq9c5A\nmJj8jlaV5iy8cFG61qRWTJj6cfsbAEzeQVMHLpClsgIYf7ud0nSz2yl174k+\nWvPOLjQGMllyO5QklrPNBv1FaMQlGUSPC0tN+HlnnEOPfDCIzb3L/QSV8b5O\nTgdROWCquK6IBUPB3M4rWArjcsbKdurFepyZmxZNRVzk1BZ0Vewt7fCHGDVI\nPZAvnoPfiEJc0Xglc1K7Fb/Dy+3qQ+nuGxxt9LskZxMq7LJkNk/j3+OyHch/\nJy+30ARbJFuSX4NBoXwWhFQl7bjDB9+MnGnj5SgM/r0HOoNpAfJXBItx2ILC\npwtHalUrXWygLbd4KN6C9Zh2jFTSgLaj5uBvK1d7509KLDtxoZp3ja0d8xLP\ntOZB\r\n=GXzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"621966e97c3eb3f9ee356cae201cd62a72db1e08","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.9_1596738771181_0.3263935787805381","host":"s3://npm-registry-packages"}},"2.1.3-unstable.14":{"name":"aws-amplify-vue","version":"2.1.3-unstable.14","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.14","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b86e04902e3a92af53a1e8a137332a63e78a74d9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.14.tgz","fileCount":47,"integrity":"sha512-kUV8bNDS3LFAuh96yi7H5Od20POboq8ZA22CtsgDDZeb3sAm3sSrwEHCU6eJUGpIUZWV4DAv+kQohr9JKhs59A==","signatures":[{"sig":"MEYCIQDAdU1zf9/N5x43Ihp/SDU/nzB4dDuRcT3bU5BWYW6UeQIhAMdCEXsyHhOm74RAv+T8FTiQYUqTyhifSWM13Je9fdBF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLch7CRA9TVsSAnZWagAAVRUQAJVrrOKv9lfWh9JyGf+u\nru7QMI26xgpJxQ3bai0sqdZRsP1CByDhz62DV4aCb6BBTDMcjdK/WBqd3s1b\nHbyulC0feySvLpchHRqnNscm4zpn453oiI4xYLvbXsCK2qGzKdUrrObMymWC\nXX6Z6VOHUS2mrCaXhhlfoLIfTetu70Y0vJYgvQQX/uERUYrrnNP/89MH0YUR\ny2sEWU+8Qpsayti3DD3tds77GjKKybE1gRwKBCYfHpqTmmpL4ENnSyJ4VleM\nG8vbTrk3gizf+dHt6sDv45+MyXeSWBANxT05SN9O2I5bBi2ICi4qRFh8230B\nnFIx7r4OPdj5ukBx6ku77Irzz+VFSkkNP80n1UB0PdxDtHfA4oUB32+CVhst\nWEiaFyWVXKWgHqWqdqWWfUJGZVeadU8bVVy3AjUIMdVuz9CgAHhC3OnvTm+N\nEf+U6ePJSoGmpIQAEVcQVioKlZ+rGK4JlCFVreKR7lm/9l3WMtXZrZEdX4t5\n1TRYTwE1aXNFi7u38TNd6SZnGeLFVe7w93AXuiOZtSD+vaRhNz7c8jj1/8hX\nxOD5WKWFnxT0d6F3xmamBc/xUYRRaN0Pypnb1hqWMNBue8AbU5VT741iLl1A\nMBZmqUH/WxrOaNGJvQ8yZ+/vLhaUatEJvwtcDuQ245VIQnlaB1fFeUj8BUYw\nXLVI\r\n=WJ6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0cb1d90318dd02adfa713ce67202a5e109d1873f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.14_1596835963084_0.4427802598668904","host":"s3://npm-registry-packages"}},"2.1.3-unstable.15":{"name":"aws-amplify-vue","version":"2.1.3-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.15","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ef3c9c4387b662492d6c422ea4e93f5c1c904b8e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.15.tgz","fileCount":47,"integrity":"sha512-HqGyNRla8tHMmY5gGC1WyoAnm7/UIRsW5rwNR+iXKZ7Rm0UbRTol4/D6hteyj4KqZgBhgA/pO2WYsK6ndJ2nOw==","signatures":[{"sig":"MEUCIQCAH1xgBUetoMeF4Ktx2cyu+jIQyr2/vehQEQM0q5VCfQIgaa3DkX4XjqtoSl51ZSS/7ikNs9+9noicy2ID4cqxmWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMXYXCRA9TVsSAnZWagAAbjIQAJjSALbvCQDSlJL43WxZ\ndtGz3Xe4W4FXKggu7FFoEAxUya06H4kAE8nRJWrBCb+BzjwncXvAFFPMbQL3\nS1lPpUOcFRU/pY45afjeduWFGi8GbZJesENgrxgL5OJob5gfBW/TrD8pas8c\nkBqM0sn99Zk1yRSJ/8h/+WQJc3sg1+F/6TmvONjom2jGzvR/uFDHa/hClITu\nmTXtsc762eUF6FD8ogCdSxdM5oB9QMgNp/37XeAd+Kh8/AJNbw4fkavHGyOD\nV6xV8b1M28Nq3YH0j/2Dy3EV2G84rZRYlBxpZXMq+6qWxKFBb2u07oIWHQVG\nBJ9dMJxa1eeCwFiYRKjy86J1kyEl6gTiHDpNU9quw9/uKg0xZ7e0FJj+p7+S\nGFwNv+U4SYpmV1piZZ4QwsHx2JMS19hcjAoNZsE8FWVnN679L3YlSiGUT213\nNGz8AbaPPdUmlk1oyf9Heohpiova8eQIHs2GMBV1QvsuuSjy4Dy+kl/pjLFM\nHcOrv5qsRz9k7+Q838VPudDqnYxaxJkJjqV4MBdgZUZnpXHxSh7MhBmqFZMd\nrjERnU4aEZQG5WpkxmDQBFIP1iBfyxkC8VsC6ox9JGRn6G6GHk4dNFmUDEgE\nmrsbErlMlM8jIl3/B2/JgwkTc2g0JHYnR2E4qD+3AomN8tfwWrT8akl++X5G\nVwDK\r\n=+0zE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c1256bba99f32616f0d89877ca100b27fca4eb64","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.15_1597077015121_0.21553730851919273","host":"s3://npm-registry-packages"}},"2.1.3-unstable.16":{"name":"aws-amplify-vue","version":"2.1.3-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.16","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"3940631577ff5a72d75ac0c11e244ff532458bb1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.16.tgz","fileCount":47,"integrity":"sha512-bsM1+Rd3QP2FR189EN0xN74/gdBuG3TWAReAOijf7/yLJjUIPxBi9CtlzetPlHEy/0TANlyvSwxDKPd2Bj/ddw==","signatures":[{"sig":"MEQCIAqhakXbDWW0VF1vYrgZrn+5u5LC0rWcWNEan8AIWHZHAiBgwmP7btDWjX3T3c9U4rvoHGFM55iMggqd93zQIy27Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMaeGCRA9TVsSAnZWagAA1JMP/0/PhGED8/TrTwQrZwcb\nIgbKC1iX2gG/uqtpouTweQKJjRW1OLKIGbV0trS0yDNuH6QzJ+HTO8N5VtxP\nSxcBuNwqhgTrM0rWRsjxHiz47r7AVY/gytt7kopTZZ0k2t8Yx21P5IoZqL6D\nNFWmAvLcim3BJ5pGaitbI/6t64LVIKupfkSvF7GhKSdOQH9uiAs3d6jgz3LT\nDuNnIhPQBNPkFZDH2VEJufxD2hLiIzwGFTwgmgYThrlGUe7KFaYE7fuxHoQK\nMt9LhPQ/+sveN6hh/pewqtgKr6bXfdCC1aEd6LXR2KPtyyT3cHl6N+DiiMSy\ntLnuEbAkHtoHqR9TOaM0A77qaQqPr6MNwPRGDFNJ1lWoGZ7aS4vXE274HXRx\nl4qfdVB3LnNgULoVOH9VPBqTrElXErWb4z0WdQes2O5QC/dn0jvB83nPp21t\nA1PSHwlbxl1w1awaEI5OgF/8Q3iwulh13kIVGkVCQh3JBsk6cLzHQTV9BVMC\nM+OvaUvmqEYx2UGWUV61TZQGmPLz+VC/Gb1QXTVeQ1gsXquzdFQfm7IXcVsg\nfSPsIFkL9oTY92DH0qq16IDAJN82g/RYCrQbSlobwqedPGtqses2BC1VNG0B\ne5yTrafohu4zO/zz0q5zTMt+wOedO7ZSp1ydkA8w9DfqtNHrUSfLO0Re8C0n\nRpLa\r\n=29yO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eb9719467f7c143a26bfd2d598b3903ff0815731","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.16_1597089670259_0.34397670944645586","host":"s3://npm-registry-packages"}},"2.1.3-unstable.17":{"name":"aws-amplify-vue","version":"2.1.3-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.17","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"121a191aa5f1c83df33ad0f4ac7911b04847a04d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.17.tgz","fileCount":47,"integrity":"sha512-pei3NjXUe/UvmFfempkkAhZRcpSqAOPaR5tCsLHAVadWL//woX+gRtU6SmE95ei+rLRdH8yFwrEGjZ0icZbxNw==","signatures":[{"sig":"MEQCICydiS8WOKNJuRbFGKXkAaGHYHqXtz07XfZ/xlTgjrKiAiBjZAX42s3HIi2zWc8f81SiqLR0mffyelF4lTcc9w3SZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMucICRA9TVsSAnZWagAA8ggQAKDJ0P4pzj9Y+tjhFG9y\nq2oq2playwL+6Me/yykp1/MQvybSXDtn7+frUy7MP1NyR+G2bZPY6gBi3tyU\nImMjqJl2RtCypmOGxuPvUfDWtP7pjN2SckHzi3mZdFlk5508lq0EnWw0Mboi\nyDX/aP8ka62A7RSu3oPU5EPtpLllIziCdMI+VMi35Xd4+Z+kQBDfheTZfHGA\naDrHy8vpcbd/2cbmkptQaLjgRGZeA9qNqofVMbGVhyrX0B3TQwWSunPGCz5A\nKdV1Esq9eN3G6+KxLB1XG/TTaqDaQVVLA+AmnDyCRK4JLAs+9yD3+gb292pd\nOHI1EehPnW6jhFmzk3wMp4cQIGjM2KZGfhdYEEfEAqOsxvvoQZjTMPsIl5hX\ntf8+2o3BrZQFuMvDULDMDK1rTSaAZW/1C7KQ+5MGdmLS+J/CXCmnECHsr9Sa\npezcKzo5cNJpiQN/qu4SG8XGtfGbVlOi91VxCsaMrb7aUP/7209dvfKV0+u+\nT4KJ5/aVF1HRb2WQLRCyWnwk0ZOX/Qc8LLZoivqoSnYka+CI3Av/Ma4VGjjg\njL0OQXlaFaliNcyVjJwRVtYk2HWAd/xiKB/S2YS+db4YkCvtATqjNzFCOapl\nkJA+kwYDx3J2BtBFFrhGyPrOLpPYhIDtcTS5tCR7Yt4Bah4GgDGTLzQ8W7s7\nZBAq\r\n=ZYmi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1934941a13de8aa356f440ea7795f1d3bfbae94d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.17_1597171463745_0.6624101096704462","host":"s3://npm-registry-packages"}},"2.1.3-unstable.18":{"name":"aws-amplify-vue","version":"2.1.3-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.18","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d856f8ba330e62e910b6139a362ec9e1e51bde13","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.18.tgz","fileCount":47,"integrity":"sha512-z6Lj9gKRh01MwYx1dx1UrDpbwPEjWCdpMk+1EC0JojLwaRmqAPXSlixZAiRO6Std9rg0u5ed0t2qKgD9XJwdDA==","signatures":[{"sig":"MEYCIQDKYnOu/+cxarGyzQ3B+6QWM3ARHY0zi9WbQKKJvQxIKAIhAIOf/jAf4bk80CTjNxGkNCNsEviWgwGX94siTzCYYW4r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNAbMCRA9TVsSAnZWagAA/h8QAJMcio26mvFa0rjAZSsq\nXz+RnhNm/v8+iyixdj/aTcb6vz0Cva1EeaYDXUFWfvbD4x7XTfKoNyXD7jMc\njqOPIoUEUu5ExMvV+6l3ag7i5QoEe/13OtrK2sqec7cv8dTxgk117S9crGtB\nTVlfbe3/2THbOtninlX6WY709MwwQjzrBB5YJ9Bj240s//tBLtNsnrxdA1v0\nxUznECOym9Me93Uk4V6jEnL5CCCGUAUjxsFHH0mNkwXtfCnJk5pIAHC98lLX\nvhrJ1FvaFdkrt2MVEVQ771Yc7piIcVl5TEOzk9mIn+81V71HptCV3Nv/Jppq\ndEv1Zu/yqorA4mSuBu/4vFQV7LZprU6/MaYLWNOj1QxHgT1ytUq4a6B7ROqK\nfLi1GqYpnp6k8/WgzZGDP+75ROHiHGjVtBJRmLu+jNzKMzH7qCCLPXG3NhXQ\nquNJMmKQn/RVvyt1BDPN9eW2s1iTM2GCFT/MQyHizSaZIXwy82MmkHGC9Z/a\n6ZCYQedg/KsDsEOaDvolUfWs15kuWQOKk6sqkICeCgBlv8fE6QDY1t1sqJXf\n4EfGoft9N+0ZdkUY9MZ0Jm0RBCuYKViV+n0K1VOQ1Q+kzzsl2gBRUa+V+V26\nTYOUACdeOX41yDETA9sF3mLjhJYmmMPuwAQNs4rjU/05lVaTSrPj6tjLaIXT\nm2qH\r\n=yrp5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"441fb9b83394c57f3eb92634e64f0eeb4d2d758c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.18_1597245131683_0.09128664929801511","host":"s3://npm-registry-packages"}},"2.1.3-unstable.19":{"name":"aws-amplify-vue","version":"2.1.3-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.19","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7a434f0181c179b637d27b492390320ff3381b54","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.19.tgz","fileCount":47,"integrity":"sha512-PUHSXqVPDqNulrIEP/BTtqbGlraww/hmAzCam0ULpkZGQLeUK2wi7g4XcSmiMtgdWJz3xSADXeepBLLJ3e0nGw==","signatures":[{"sig":"MEUCIQCP/7+NHmpIfBPKcw1hvgbJHvhI9d/Z7CQ0tRTv4C3MBwIgOaCSEgx8k+cb6NuOSzbaXKYpgMx1UNyHB3ElNDd4oLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNFqwCRA9TVsSAnZWagAAZ3QQAI4sa5q/DRWtrkbOVkLn\nZJr69oeRVaa4cqzHzJ//gum3IIC6Igjr91LAH/TEqPrPVtuxTC6bie2PUNiE\nHrb0J8qeK4r+5ZqJu3TNonCI8ZnBjx3fgAoUvy+x2FwicshBAWUUlik3t92a\ng29Y54UlzeKC5Pyalyx+6bcm1IqsZnoRQwcDYndHobiJ672eyynCfy2JWmyl\noyYRk0dXSPQFusWxCLqFG8acW5l1rwdY15QBL1RxbmFMnre2dTYFIDWiOIem\nfSUECXQbrDdJZkZY+0eZHzBeIkfl7HAogNE2LoScKCLCSjie2PSz4DdOYbP8\niHOBqPoneRpotEmNX12Rqyqp1/Lsau4147u6jwi8fR9YgBUzJIjLtEHSIZDd\nS/gD14WQObN4Od5zspo0nTD5sq/igpVsqQko49wGU1sEK07LBT1LsQGkqw+U\nwhkvtHDF8bnAa/wZLa1duymA+PNh76MPB979g1jzs9iPW2AFnR40zMplQlvJ\nuH5JxA5dJdrKgPJz9VOqukbsWTEqNDq4XbtfbML1ME1ElE5l/0kluU2vbbRY\nwLvnbIx1dS5LUV648mC1E5RN3UpbMYIKI0vQQrtK94X9rT5UyDHk0lCrLVcq\nHi6sXSeHE1uFbiLVh2lIQoaPWsJFg3PsBaqF38o1ly709RVrzGJBL+e5QxPM\ntERM\r\n=5HI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a819a2611be230bc99501539b47c08515ee2ab33","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.19_1597266607604_0.2897139090549443","host":"s3://npm-registry-packages"}},"2.1.3-unstable.20":{"name":"aws-amplify-vue","version":"2.1.3-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.20","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"334dc6e11d3ab1a6fcd48492b7a532f5f56ad736","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.20.tgz","fileCount":47,"integrity":"sha512-74OEnulelrWABdq5O0ChbKpiOWRp9SFGTO9Kn/WiasYxURRXey9XqF9aZbr3KFJPIyPV1+ls899nls62zlGJ3w==","signatures":[{"sig":"MEUCIHUCeWoA3oHqigBHG4hFDq7KWNFMTzhHKgy6tAWNPlJjAiEAxh4LZjCfOOclrAwsewos8P7uq2jK+RmeWXWH69YrxkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNIFgCRA9TVsSAnZWagAAV/AP/0UXU/tW20oesmJQmOVr\nwTejw3xGz6ifjwlx1BJv1rtBkKfs+CFLYmuhBv7F6Y/crDhpQ6HTkTFJ+vVl\nNv8zyVhklHsRdDLEE1EQRL7/Rcu7AXTeqDRhV1m/LCw3eypxDcwFPfUnToQM\nWy9mgmcoX9JD5SFcF00v6DPlsv65TJd+0YEXGS9TkP9IqiYjNdNlPV4xKIcC\nvDEhX1FmegCfIhRgUH/sN2XzAmjnrisRNtCK/erpNzYv8v/vMYXdkjI/A00h\n6btdlCigyBOCzlHneHe7rzuCc5xFFRS124SKr/rV5AXukLCuahPeXPwPAPA1\nr/OQJfFpN8j+87oCpbD8oNMZ0BUHC1SqtP6zO43uoVbC3DsLbqN2p9W4VfjS\n0E5nqV/tl7NQYxUVljsW3itIEy2Bqvk6OmbA+VeJrJ2iP9xcn/OEK6mC9OYR\ngkSSOlR+6wj6U3OgSlLETyc6QM113OSKO0b/RPS7rggj/vz8HhLXR+UQWUXj\nPL7sHRKPqtCp0UeV3I/u30I9mGm3mtGaf0JCMXQP5u8Q0t9Be6LKllqIsRfP\nq2+nRbjyOmBRNINYWXWGxZkgtEjizzvCX+tTIdUhFChjFcYV11/xNtnVPZoa\nZDDVrNJXiDijIcRsSJbCoAT/OKJYO/xiSFrF5faXcJcKNw/YnpQ5nijDln4n\nJvRD\r\n=DJZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"797e0bf9d802ad1ec3b9742e446151800f75e758","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.20_1597276511868_0.8922017419614687","host":"s3://npm-registry-packages"}},"2.1.3-unstable.21":{"name":"aws-amplify-vue","version":"2.1.3-unstable.21","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.21","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"88894d34c537e77bb9a2c717881ae1766dbd45e1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.21.tgz","fileCount":47,"integrity":"sha512-Z+sq8C1Ah+pP59/K5NXvXbUXOagSgyQz9kQ8r0Sf84Yr9mV2tK+Q60b04MDOFSw2rSlQiH9p9MdFbPj/YXpFpg==","signatures":[{"sig":"MEUCIAUDS+mh/kYNqo7yNoBh6zq/yW6xgOUmQxH+NnoDMdwxAiEA2kCmCv2CwcJBDgwTgZS8t+d4kloY3BiGSx7SK9jUCL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNIdBCRA9TVsSAnZWagAAvqwQAKGbYu7BX/48KWrkB40h\nqFg37v3GvWjM+UPlai5oi43WZbSCn6zTPw76Uv21kUh1htRIFFMglWQ0g8uj\nUBTezhAfUN4pUgP1gVN8H9Hc+Rv5OXlt/t6HTBEUCUYKScBucdZNIkBGF663\n5jOdqszwkheX96L92wY1NrSW/bCLU1Gkedge1tz3Ck2hiQLpFLBX1s9JK6Jz\n2z9PIMLILo5uYS/iF/dIqUOvqRKG+phA4B75Vb2roxbfkw84xZmsSczFHLZi\nbc4V2sRpm9a/Xk+EOJEeW1N24+3Tz9/DlpX97PiM7DHLYYFQ+klpfY4vSA2p\nSOaki/3fsDS6jXURZ9dfNlzBneh/Mc9Wd/bAtqYLqz+j4jyfW1hdiAVEuqpy\nIZ9/QXi59+nNR+u5xwPvM8URU/88WXA1tlCeK9HG2fs8q1f/6gRMeCFYUOwN\nHWq0bMsp4K+aVw6fkUn4VfH5qeAIZ8t9rEviX6fFauboXB0CYuexCz+FxQAG\nrc81sRY4bcdDm+56HrfP+HX4QiGhi9DLqJ853Oyo/EG3kbIwC7MVEmvLQ2No\nPFc4QVrjiBJyu5ocv1hT76GpbGYarvQJhDL13GuQznlN0v6oEYyloUq/XV0X\nyh/4UpSYvB4Th6oyS3UQSUv09bfNscdUTyS/EEOfoUJ2WfBZSHanvwWZiFYJ\nshDI\r\n=ZP6w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e311464222244a1f13a3a1dd0a6ef946c28d976f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.21_1597278016741_0.6437309807380889","host":"s3://npm-registry-packages"}},"2.1.3-unstable.22":{"name":"aws-amplify-vue","version":"2.1.3-unstable.22","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.22","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"cd9ffeaa35a7b18e6144ca978bd5596cd1caff0a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.22.tgz","fileCount":47,"integrity":"sha512-1KPHnLpcmQj60yc3VNYA11XUsq8hAsNWyu2AZ13rqMEfDByb+u1BPqBf5oYtw8b3NEUI1oru0eu/gnCpGWRMWw==","signatures":[{"sig":"MEQCIAHPCfmqxMLAw+KPEUesLJ5DSY75hAMAioRR0LjBDsTTAiBcXgk50NY0FIYP4uo7o4PgiosckTId/GjETQk7lHFPQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNY38CRA9TVsSAnZWagAAVpcP/2p64L+omMP0zriV285i\np0DS9/YuqAQ4D/zUB3qaRDqB6bRn7FNhbEZfixpIxU+gru2zwFN87pAGk5tr\nyzwYCKz1SEvpvuUcQq6efq4c5mULXjbwVli0rQSac0WSqjVkQXmbyPAmAYME\nF8y29PtwF/5HgrxAXxlAkTEUB98LLo5RdhdVvGeDg+wgR25QP1XAIH/1jU6U\ndJrCZw5Pv8PzFBzwAXcTJZfWsrS0QlZAtVCw9PmAtU6Qcd53imiOZ4RJ5ZbH\nBlY2VFAMSX4FUk3NUSbUA+bxyTtDPmxY0vciZ7UKgONWinaPp5HAsGYp/4PQ\n/e0pHlFzIWqNzefh92F2J3Yp+Qz/4ndiAK2wLq+DHD5Mohkiwy4NcqocSTcb\noHYh+s5Fkszisc0i9kH14bXkUhMfKrK2jf54C2oNFq3CU1mTRZvQ99ScQym0\nZtm8howQtwtMt+WMuZfuMEiRJ/4/49DuUfgCpnR79YXIDl+CH4ct+51QgRSj\nbR7aT/qU4jmXgCzZ4h2MGL9hp2IURg4gegKYymmCUDKlEwnRBxaLFKwyN+7Y\neh8j3PjMyUEO+/V4cl8Bn4Cv7u/3QigjHIcboaEGOD4sny+CeZ5x8BbRvA+5\n49vmIlYTKDNZMQHOdd7fayxb3ipoMgNndKpZkWisgtUDo7fWYX9qPfmfyTZ4\nh+ia\r\n=dCjv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d50933bc9931ad71da635b4b70ddc3729a01a3c5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.22_1597345275691_0.4593910810517161","host":"s3://npm-registry-packages"}},"2.1.3-unstable.23":{"name":"aws-amplify-vue","version":"2.1.3-unstable.23","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.23","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4cd7e3b1dcafd26dc18da5184bcebb8cae94e047","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.23.tgz","fileCount":47,"integrity":"sha512-thOoxmpU+Z24BRsiQob1yv399qQ9zTr/jsXJWolq1eFd1yXKpuXOfekS6W6P8I+uFixXXV5WU4wRf2uVQnDQiw==","signatures":[{"sig":"MEQCIC8KZ/zEDip3M0muz98jm7BEBky9fnzArHPSscEQK5opAiBnilz9+SHisa4XR+zmntNjM6xs1o7N9fLF6hkIhelsiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriKCRA9TVsSAnZWagAATSsP/1R9/XeUdgzYYAcqj8px\nKPsL8EF1f3Il+yEFT8twnTW8NcNKDv/RZ9TSowpVU4YjFq2AwgjeH9gJ7h5Y\ndY3tug67poJnZBOa4Q9k7UeFfvSIYCW64A6KkSHIqf/ZcBRyQcxdahwNSbyO\nJmSKosZnjWyDNPh4zk22EKNCfHN5GuOQVr9zcXVr8qnAZMh94Ku8hP7Hl24E\nWqBiX+o87QJXisufVLBPrHiNLzqsZtfwaBemXyzgaa1RBLKm28YeRC7vIYGh\nNbmdLFisOM6AvI5lO6JPyLe6EVhxVUQTM69MgoxJvS2X2K1Lbrlc5joK7vVR\n5ViveNFu0klzJJhHUuO82Sqjt9LFUQ3X6kh+ZWiYm1lvYANGyMK+dOkSt2ED\nRpm6DrcRxRee3sG/0/qjXduH9hWxzXDa6Rd3Yrx1Zd3VaxSHi2JTvBKXpa+C\nluiHOCtssN/Gy/kjVwKMnJYuGZABifQtHbUO1sZ5ByWZtjDaP0zVZGB5KGPE\nr7PFz8NRn9+Sfp1qTM/pnJNmIZp3SK7TumE+DkdvKONnSvJ7PtvRBd+XJfW0\nhI4OFNB7WmJDt0ofTf8CHKhethgq1HBNx7IZmioXnePIcl59txR8Hgzwl+nP\nHVdkxr7s4nuR9RM/lw51lZ891oMjfe063OolRq6qJUGjVX0L9tiLuhfoXp8B\nBnzb\r\n=GG/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"128527c6834bafe37b2f4c6c5fca9029b03a7e3d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.23_1597683849206_0.37754979395252386","host":"s3://npm-registry-packages"}},"2.1.3-unstable.27":{"name":"aws-amplify-vue","version":"2.1.3-unstable.27","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.27","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d53d408a6387f1dca3843e5d148c66694834a10e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.27.tgz","fileCount":47,"integrity":"sha512-m2Uki5IFm29cTUxdZ6Mbw05PfN1HHdrab8oli+mucpDv2aE+lDYqMjC73opqXwZXFnoKnkgGvPq8rcODWvI22g==","signatures":[{"sig":"MEUCIHScbt5FbBfIwgDUu0UrHI1yW+HgC3hvevmzU/9Gh09DAiEAxquuDU4ayzJxM5PQMsOAHuS76s+lM1ZvjEv1Yq5Treo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPakJCRA9TVsSAnZWagAAr1sP/iQS7mZrZN44T2yskxuy\nAEBGUAOBHNqHvac2M8x4KinPgOt1ZlGcFqe/Oro9iMRaZdRgBkuFCIRJ7jxw\nCCgXuy6Y58e0U6KhHJobgfJPndxNtpt/g/7CZvxLL3NcMZcykauU7ib7Gx/1\nFrjJnep5sr/iUinvKlotfRutOe3BpGl5HHJUgyRphg27gwCh93dNsDiaqlJK\n1au/Dqk8+ko96iLye7gkKi6Vyewz46kCkFBvXzsRLHA4HMKkodV+4Op+NrT3\n1dGXNzou8J+c5+DfzAbrKUA1gUiPej07hA83SIib53nw/+0WySzN1WEdxem4\nMBV+bu+z8DWy3Dt6xIP2f5q3HMC7V4FSsnasql61PkYRr9aAUVtM4+FLMk/7\na0ucOICPOcUMr1pmZZZdd3fmIaKM8WmvGU5S1tgldzZ5SoRuGgwznkJoTtis\naMz/JOTAjcRvOeQ62aTjXMybkq2SDVLnplLd9Xh9X9s7njwB05mwxPW7zLIA\nMnf4A3Zv7CQwKZyKUOquFMrUdD8siTF5dyHy+E74TfZhUOL3DnLUdrdSIWyT\ng/0pfQ4RKKtTAIAo05KMTqgL55uE5wVFIOSiavx9ZtqauAX2zvwe418fSsRh\nXjzCXYe0+h+ne+mXUyYobB0VRUqOYogT8BP7F70cD2J0c0QecDoUk0ggwJfb\nBw0t\r\n=PmEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9164b37cb7669c9dd08927dde58dccbefad25194","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.27_1597876489124_0.41992622624347575","host":"s3://npm-registry-packages"}},"2.1.3-unstable.28":{"name":"aws-amplify-vue","version":"2.1.3-unstable.28","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.28","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"818b624f9d5c2873023ca7f401ef72a789a8e877","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.28.tgz","fileCount":47,"integrity":"sha512-uDDH6MHk19wee04NgpVd5vFSUe75lF1mGIST5bsGUsMG9kY9Cq5mmQ/OoSX2Kdsg7M/ZrkDMaKK9zIwdPWk48g==","signatures":[{"sig":"MEYCIQCTvUIWdARoflcdeGjboZkZ8N5WIPXZ9W+Xsa9T0tOa8QIhAOvcWjgBtltFu5ghTz3G1YPZzX8M4jCUwXcXfkj3K2P3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPbjVCRA9TVsSAnZWagAAFnoP/AiSI/nde85dh17ULlqD\nQ/JGW/mBLAicR9RLwFECGUodOZJI4q/XdO24xOmqbxxfFKWfz8ytK+3DTsHH\nCly9ipBeaGD4NEr7uhn2haS3HgCFc4XpGInEXZRyIOoyu55VbgafKsqVCYLI\ntAHzh22sbE9MLHY50kN7/PFxHnWscuSaFVZvkBIzZjQMQE+wdI/v9vt0t693\n03oMeiVPLgF48BDApi9vX+sv3ivsKbKu3RBnfNGt3+J5syJCkJbjULifPsGs\nMvgBHv6PEG+gu9VayQoaHaRC9k2KhIZNew5UxEZB88Sam7uMAcFCY4bEiVda\nbOhdUWUqLrNUTwqdqe2neWvb2Ex2Vf5RHBFUO73RnM90lasapdPDkCAuKkm3\nFstHp/HqK241T5R4hCHPD2vrLZXMmP7LoLpMTbspEd69dDbYBZQvm+H/PImZ\nrT8gZwUySrNiujyXvV33bIbIUTGlJn9hiITl6qcBsqeNpLAr+tmk6byQRBHm\n15Jzx/o5TTfOaE26c5jEI0fHTwakxuL5Lu0WuFGMlBkDWzSJsb1DafZj6UoI\nT3phxXOj7cEfO9XhvBYlrzMCFJK0ZDl90zAAQ28KOxhFfuE5yF9gAXgBBsW6\ni+SD8rAg5it8Se5Dn02QjenkgL1RJnF+CH1Zf4fcwqqpqKDi1MDcmlOnx0OC\nryi4\r\n=eUqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2b4f6d8c5377cee9be0446ed9f75fa8fa1ce5803","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.28_1597880533298_0.33398522005721576","host":"s3://npm-registry-packages"}},"2.1.3-unstable.29":{"name":"aws-amplify-vue","version":"2.1.3-unstable.29","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.29","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"117363811c31752d93ba04f5540f71b357b9b89e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.29.tgz","fileCount":47,"integrity":"sha512-JZLl/MVq/S1GmE4UHA+9Sg6QeFcbErfTTvocW4viLpcRz/xULyo2aqXBZFkuJM/0ci5KFTNAG9L9WnQNvaEwHg==","signatures":[{"sig":"MEUCIQCPrTOxuIN8cKri04kqnyZudWRKhbKI8aniDFsXPVJwAAIgdgpb978zfHDWB3vx4SGYLHYd+daXvMmfraiAwzlcaeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr6ECRA9TVsSAnZWagAAwAIP/23R2NH1QVvqkQKByPHd\nkoVAlKboxrAx1/s6Kcd2OoVwPBxM7F4ZO80oUQX/RePMmMZn4+/3YObvW+Xy\nt8SA2+JhuX1H8YEt+y/rB/dnv0SdbHwwRo3ZWWZUHTIzaQpg3Wmj+e/o9ZDB\ngPpSgvUbfUdfXWPUPsmQgcgGqmPgKT9zkRMvWzkS2Ea/MmDnFsgpt7Cu3lFK\nf4TKym8CKA4IrUH62siA6eMmVlwynm2PhzNZu2rydJjPIKco9LiCUmMJc6cm\nphlIUY8+jPRkWaE8unwEMjr/LEU0hDoKTPKxhqhnDdP/WMY0U3k548zoESih\nM8aqqPZpZypq/03GuEwKfh7teAa9laSQSOpZvAFZcmG9sXmJqicYNFUV3QjM\nZsv+09lhKZIKJnhBYVHkSYVoLZRcVsfYzrZHLksH4UqExMUMXMK5VIgZV61n\ndepfmkcK3diGO6j5QuqVz++bU8sL2Xd1xDknvz9idwwwC+DAexefi4NhQGej\nFE+PoycE4TS1qRuccp/vv+ZqCJhx3gaXUAK7dzaRBsFejlB2A54P0TwTJ9YQ\nxuu1+e9L6S72AwRpgZt2f8+YjFuC1nAaV1kLaRGL5/jmnVhgkqOaQM+UiwKm\n+ew3oqwm2Vq9YlhHOGKXWXJ6TApmRuSsXElofUzD/thGxSQMBgv1DDVPPPwJ\nYFys\r\n=x1yI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9d91562a64c05371885d68b6326366dee18189c4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.29_1597947523794_0.40717151112442185","host":"s3://npm-registry-packages"}},"2.1.3-unstable.30":{"name":"aws-amplify-vue","version":"2.1.3-unstable.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.30","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ddd765cfa6be643b5408fd16de530b96ff41a418","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.30.tgz","fileCount":47,"integrity":"sha512-GbdXfM8ApIalgokyXo3rimF/UPZt7Xp9H9RwTZKot2UhEl50naDGV8GNpXA5OcJncVMB8Ib4Z+X492zk/PpN7w==","signatures":[{"sig":"MEUCIQD2ZKbrRYinMafm/luh7Fk+4tB+KpkmYZOjDNvyGU2cNAIgWWl7yBCC+ozswTy8lgt4N3mP40EPYHYCHSqfWzayTj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsIvCRA9TVsSAnZWagAA+T4P/j2zGxtaQQgwha6mHBTZ\n4XqBmtcZ8plaBAKyR58wQnM/nldQ1Wc/HgCNCgtduTPA68Me4gKeX9BrCmp5\nd0QxtvqbvIy8cCAUEi/9T36DvsLfSQAScv42Eg54ZdgArVzfOrRBsuQpxuGc\niHolLTo1Y3OZR2GY1rwRYq31uDjVdxub2OL2za8EBOeFWYHs7tZ7a768Lr9/\nFVY4GOySfZYZrnh+QW/yL0dysU6nyzLk+tCIEFcMbFCGv3WzLio6u7fC5YmU\n2PuK6VWsmOnpm3+HlL9nrLOYddMfD9pWTFx9yJ3On13u+af4ZGXa62MRQPMi\nTODumnWXsDPC6X0y8a5aTMBPrF+CIWAnwDyzUNzooB9unpOUREfPfX8hlfUh\nXTlXCx1Yi0s5X9k1OiJ6GB8iBpqoUS24UQ3Y7lLhEAEA64jpwBxjs7VZGM2p\nV8B1ftoPXMAJJQMOLy1hNqi5/mvO+LXIbLEpbfXY3+DlF33m+RLPLDyEHrEa\nTLDZvrN1GPkCZjqij4ZjBI4VMmzFE7D7CrOOtFflg5DEFO/JZHmXosPG+KaY\nz6WzmgJdN7vVfi1AwlMmhy5DvpqGoWPc5Rpat48bp4Q/M9i2OIlyKKzL41zw\nbBcG8BIBDHeRJynp+4nqeYe2D1rCUDxAzt73ya0Pz8R99pYvsa/fNO92cMh4\nnVun\r\n=5+Ao\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9056785edadfecaa3fcb9ed35e9d143ca629e1e4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.30_1597948462692_0.6334530997992887","host":"s3://npm-registry-packages"}},"2.1.3-unstable.31":{"name":"aws-amplify-vue","version":"2.1.3-unstable.31","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.31","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d808c2e18a990b4995ae55f1670617ae777f7902","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.31.tgz","fileCount":47,"integrity":"sha512-hIZvpDV83lhfimaBP6g6qEJsc6eU5ooKZ/LTQgWt0BmjFh68BWjC2rTYgAQixVUmuy+jIto46NzI5nfY8Gq3JA==","signatures":[{"sig":"MEQCIHCIf4UUHT9GaFcnFyMEroraeNEuzKimlrn6MNOk4/E/AiBlDw0FdlCc0aNhWr75mKtgF0oXsqGJv9+tFXILfqnnPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt7oCRA9TVsSAnZWagAA8JwP/jXbIqtzn7m09u3aERmY\nBtFi63b1+Fqr/BwsHqB80GoxhFAn4uf5lLWxuV+55Lb1iaECq4IBnsYv+V+o\nKc96p9/m8SRx634fNSx3oJq8OzoK4sLg4/fO597xDXJi/fT2aYYZPvrEOWuv\nNkLy5LbA4u8estZN952w+o4EjN8NZ7arr9MPwpv35w5tTZJUb8SS4S3fCBUZ\nvRGTSbCUvTrvbMMed6CxAjhk3rGKFMzDxjEqGQXL/DO7Pyux+GEH4epcUhUG\nGaykhEt9vref71U3WzCOMDS3qLt6CQeDRsZ+gmfm1n8rTkMndm2mPwCYhgRW\n/j24TujMWah5z+qZm8+Zpd69A4chgRfPMJEEgSLXhqLL7qwpPgBiOUFPIaQU\nd7PwuHwxVAQ0pnv1IiiMytFttneNfNvT6GFWbzDMUsriDk+nzk1piFJtVewE\nxyHKkFRKBjadaw+XzXakgWma9kOJ3SnGk6EDnU06IjlwrrYrSsDHhskgjecE\ncfp4gxHcWF1eaZILGwclYUsZ42sK459S81JblypocKblHjMlj4pgsn0oSfYG\nAp0WyieKk9ownyO4XSJKl7J4vt3Si1CzQxrQo5uN2i97zqHa+8O5SNlLhf80\nxwvpbFx7lvz+w2tXu3s/ON4mXlC0+YLi50wjU4krIII1aW1tjwddexhxbv8K\nSwzJ\r\n=ryrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"00d5e1773766dad5a1c04b70e2d6d72a42268796","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.31_1597955815938_0.878440323289327","host":"s3://npm-registry-packages"}},"2.1.3-unstable.32":{"name":"aws-amplify-vue","version":"2.1.3-unstable.32","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.32","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"1c135885791f681ca06d4c979a70b5aabf2e84fd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.32.tgz","fileCount":47,"integrity":"sha512-CqLxJ2WmTS3gvPCrYtyF/mOlR7gtYYq9RqZo/exC3IZqSmFL7mFRIDXIXI27ntUswwui+euK+WuKlytiVZ3IKw==","signatures":[{"sig":"MEYCIQCDD4SMLXa+5pS7LcC8xRg+TRqDdi0mj4srNAyWZBoalgIhAPXIXOwv5+9C7dmDJzZ/Q3FvgnXBgOTD/sLypDCqIvaJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfREKVCRA9TVsSAnZWagAAncwP+QAkWNN1UFea+yjnGj/m\nhf1Pr+jvUD7xmp69iLY7dGS6TrMAH1bE+J52UL+jrNm/VKm4xonw3wdvwFhK\nyrGQ6siz05RaJKiYkEN/Qu1hqnEE3FTIogZuiLm7BpUjftTatiII+DVT9Sb2\nHFYAx6fqvsR+w6LOSng4R8mk3JSRnx2x5+iiAPY7toUFeWAwCqEPgowkgBRz\nOuqmJ3J/1SVIid5gDpvDB0zFC6iDOVNPQst3y3DarFcYcsb8YplOJxJh72YT\nLK3Rwesqso5JFyN92Y6+rPhbT57FhKP3PMhEZi2eZx84FB3zam5WvO7702pa\nNt90NnAYlnlinWj2Wj8HjhYXRtR4R7sqpfgyEOEIMG2EmhsWZCV4szRTuHAD\nd2jzQ0TVLazdNTb1rLwL1gWmVWd33wPb8Cg+SKixffhGHmy9pkHRiU9pJ9h6\nKGIxYyY9dC0Xd77qlX+daSxR/mO1p5H7C93lkiwaqzIu7J/mwagVfj+I+qKd\nyfXzXir/QPJN+jDeKUIDQNNKDsKRjLwo1i2Ns3CzRNHKmRxuPw5mO1R27TkJ\nuVLyc72jmIFLYStx2rr3RgXeLjg6cvICzHYAY+JySOjyzwxa1QnVhT4F4WBi\nIrpHxpUg3CF+c/9BTnh4ONTYbTfA1T7qrwcEyAs+gHJ6cXRj51q68ci5TDVg\nR1Zr\r\n=sCcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"46770e97427ca06c7855b78363669ea62b47cd76","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.32_1598309013102_0.27831340515919756","host":"s3://npm-registry-packages"}},"2.1.3-unstable.33":{"name":"aws-amplify-vue","version":"2.1.3-unstable.33","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.33","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"4d2b6dc2944684dc14ae18481d4d3d67c6241a94","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.33.tgz","fileCount":47,"integrity":"sha512-Rk81h0ywoxFA77J+Xt2LWxxyOoPO3DrraJiaeWzWsO51zna9rA4fkYcz67cBQdAw0Pus7EWl4xX5fiYQlyjOkA==","signatures":[{"sig":"MEUCIFkoe6S5ChtsHeHfA7Xw5utD1kjebKDtZNnkeiswIzxAAiEAvPY+f3KqDXwoMNxcWhGCbEPmFUVrjAwezIyuXRf7YZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfREaMCRA9TVsSAnZWagAAzxEQAJ5Xy4qpx517TDBYm3jm\nrgH3DnFgXnhDJyvBGJdCbiMEPX/TkOqySVSdea1xBMBbJDAWRRrtmWZSxApT\n4FBtISU+dBjrYtAq2pvAsgr4yqaR6yY4/KkS06HQI7baMoK+EyxmIzZYflg8\n8Oc8S3F9d72XHKQ5MfQqfEp6+xPq8kA4QVF63QqwaftLpFe0USj0PalakIYq\ntW1XChTljo1/8JRWYKr7AK9xMkS/WyajNDRn3iXcRhbGl8TVr5bMvr1jAyit\nhKyhGiuoOOjU8MA0TxL0WFoOAknDvjY2rasLzTRcoQOuDH3pzIYTIV5Z+mEI\ntX9wWebV9I7doBAB3ngpTqen5nXnnUwhuteVeDeV+sGUfpqpiA0hzYgPix8x\n/T0kK1c/m+gVRwRU+xNiI60ag3CD5ouzufUkp4zf4SltY09YO0ayVoWudtlV\nP+nhnPp1LNYDhOJnGcceMFwJLq4scR0vsZN/nDkldc0EhBhlpq4vcO43QPiI\nCR7MpFtOQnJknObw6DGn4znzWeQwxxSuL6+Hl7J3VaiVjnFCyOTDyC6XXkY7\nB55gP8hnjcl08F+Irty5s5aL5u/W1ZfcTYXsZlqaEdCqCYzntQuQNBXp1BVl\n9Y1AZpg0F/IZCaPCZsOKOjPK0lifc8GTMrz1Lj6W3OQGoUOjKiCCZ6sfhv1n\n13ST\r\n=qmDz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"18d318256b0115aeeb2ba15c72ce4ceef2e72d85","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.33_1598310028410_0.38672797254989444","host":"s3://npm-registry-packages"}},"2.1.3-unstable.34":{"name":"aws-amplify-vue","version":"2.1.3-unstable.34","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.34","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5ce2d79dd7aa18080796498ccd1b1d200e7fbd94","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.34.tgz","fileCount":47,"integrity":"sha512-4G6wBdqSfro7Jo0czWprtdEHxUuLbSLqwaxDQJxQufIFwIT8VzNieAzFQpTilcXVXY0O3vQigLznbdgpnVIv0A==","signatures":[{"sig":"MEUCIQC/KA5+F9Ym9rRVEQbhuBcvtnk7nF/HxV5EYQuvujPCBQIgRJVyfIwbrBGFql5oVYiYQI1yLBFf+Hz/pnP4wALcMaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRFAiCRA9TVsSAnZWagAA174QAIqCJbo2PfnwfzN1H7SN\nUhx31O54z5N6PwmnZggl3f49svD2o8KmeiU/VzIFo2aVHfliu57++xRMLHoL\nXuYvstj3h8Md9pRFkeiJanOx7d8wwGkFc55d/rpGBFOWwrkUc9298Om47VcO\nUNbHK17o4F/NG6gQ+z2L+NMCh1oHZZ+yAtlMJAO5liu/YiKMPOg/32rggR2O\nNRMYXg0dZFnZulZelgWZUimZQeIoW8VLvxj0whP+/8mVijI8kWrIFps2ovXa\nEnwcl3kHhFNWtkUj++YBCxAixY3rCefngk/Mw4AStJ2fwEU4eje9wa19w60M\nRUumt5mRxJt75BCpD+podjjctBPjgvIoR2FPizpj1I4+3Cq09NXT1Y+VrX6p\nYnzNwvVfTo/1uyP19N3VqBdZOIUviRPobWpdbLLKHcFB7cnoD7hEf2KvPl62\nVb3LiwO05u33/YwTNEyOXAU7GI7l/TVQCz2BTyanogk/QYLlIQrJBk3drUMf\nfrDPVxmx1qx73cjmD5bWLKs22fdOFIZLjVdomEIchVySc4hvgJXObw6OYBdV\nx7K96DH5qBd084aLnTKaxDgbcTGzO8sHnM+CfeprpzBioOZS+Ufrn7gV3b5L\n22neN3EGiPByXIZLpDO+eY+eBug1JLwy+qYqVcEIq4oYlUddQ4xIWV/pTRyN\nFUeg\r\n=TWIu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7b904bf8647a39e5bdb683d9767aaba69ab932f3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.34_1598312481763_0.7611540078720587","host":"s3://npm-registry-packages"}},"2.1.3-unstable.36":{"name":"aws-amplify-vue","version":"2.1.3-unstable.36","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.36","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"17ac4b13499a36fba701cd3f33b0ec97365e5a8b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.36.tgz","fileCount":47,"integrity":"sha512-lkMd8ShcEAy4zAVg5uQtHUagd3tqzcIL0UIjDvd1+PL/d9rXgpLLpXU/V4ZjyR6mCLlyVTz627Rm39YLj9IR4A==","signatures":[{"sig":"MEUCIDL8IGFBPuaK8V7vbnLjVJr7l5NLrvVYuILT6nFtifFKAiEAobYIGxXuEo8a0ebL15qV1B8KB3OzBcYMa5qIwvM6HrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRVPsCRA9TVsSAnZWagAAnlkQAJ1LZf68YxpaBgl/jUG1\nsyX1RPuJNSSVBfUhlBo0qk1vz5TayXq7sBmY9EINZ8wxFuIOiU6oJkGCEfxo\nVQK9CbSe+dSa7I7Ui6qvib4XMVclekAqInjoYtSKm8fHylX2lvPXpkdIOYrw\ncGJIOI004d6wdHdGTw7F9JAo9BA6ZYd4Qq4+RYPk3bwOnmGsdvelV7o13N54\n3Y/6A1VWDbYz3A9WYm6jKtwX2lxMu7dqzb+MS9mxtl69PXY/nKYnn8hZYTUO\nlFoy+TQJNM4OtecpwjDtPsFvB9edTHL2+SA80fqaKZjiw3JgedhpI0UyYZzw\nNyypJ7aPcpK2sWxDzeaW6qmfR2k2BJgkW15HO4/WJhqQD2CfgQHC03sZUqup\n508vSOXkh5hi4CaG6jw+Rpfxezy2aQRYRW2b8zq17K8sV1qX9Bxd0J6xNHV7\nted1uWxYSdcItezGOTyeZokqRKHdhfPavR9tvs1TSySuxlzY8gZrPOiTWt8N\noNFxyQkALfEU2NUrLM/lKAtXyQ7VdnTzWj1DoDpZNwhSsLaEXy7sLhpRGN9c\nA13+xADQUqjhuAOwj/KB6row5CbqRpjySmxuu1aMYJpBKZM22pXZTPFtS1dW\nBtmgLbNoJ7/YIF95yDrZp91AQMg+GiXiDz3bIyGZfg532HBm2sQY8jDxHGoQ\n76GF\r\n=nUAp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"794c1da170cd98d3def4651751b851f28810bb6e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.36_1598378988020_0.534767271949927","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.35":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.35","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.35","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c2f0a97be56585c5f3e3b9457475c165af78f909","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.35.tgz","fileCount":47,"integrity":"sha512-6iQqhH9/K12XhJkDwePRTRb0nHLs20uUD3HZxNKyPoAr6yZvICJXNXiCg07MG36lE3Jyxagejc0dC3p+grGIFw==","signatures":[{"sig":"MEQCIHsUm2sxAdL3o4kdY+OrdJlOqkOUiQiicKYraVFBO3kXAiB5yzqPQd0nURKEu90fuN5MV1Itgr/3nLSIZFZbBxAu3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWSsCRA9TVsSAnZWagAA+L4P+wWxrY3HHm4nK48BI7HN\ncJGI5HPSoeUgwfCjyFTUw8e1zKWMHzQl9wzxiMawOrdHxrq1HrUSA0aVti54\nepSVmlg6Lq/sC+hnX29N80qY1Td1m0eUjgcEcbkHv+1FrAPX+qhFx6jv7R8P\n5Luvg+oPppZIDBYiy5XLnryeMiWry8JIZ/JOCQ7pQU4gLV1XyX7Qd9Cz50D6\nKd4ltQNRjKMVHohF6kCb3hQQ68EZFt6jaK8GBsF07ffBj+pT78HkD4IufyZh\nEEzZfwlt96yG45PD/dL0Wc4T9hTgp7DghN2Ewn9X1Xpie2MU8DJdO9uaNaDc\neLgcXWiS0ANDqWu80WFfx2XIOuyj5Zgv1bc/l7mzRTjQwRhVmpRW4Q3UW0sz\nJI8e7aVU/wi6H9OpCe6scVI2xGIVeu5QvFUTlFJ0K0sdaTKg2eJLrw6t5Je5\nBlXD7eAdHw9vvslglSM/+3AS0REGw5UHw1IVtOpMjOed80rqvThRJMufsCgS\njeMrEQk8qM8Wz8WzNQ+n1NX9E25DO+nMTMXE7/aEr6/V5MtSoLgKi3eJijiS\nJ9jyLqNBlbhLZXABM4S2pknO+jCqf14/EoySuQ+K1i9rO+r8cAOxtJjQi4HG\nNqub7ttdiuPV9M3s4Jj600RDnU0P3feB+/+4F8t7eGWyhfS3RLf6U+L7lj0y\nfUf+\r\n=d5wp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4c5b5dfe6918a2dc400da67a65a8714a5c5691ec","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.35_1598383275972_0.5233142556659212","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.37":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.37","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.37","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"b7696a21f3f159bf0ae5e96bef8174c01dd471c4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.37.tgz","fileCount":47,"integrity":"sha512-a3/2BfAQHLK+yKlnI2Clm5F5DZKmdD5o3dPXNapc6S8KW5+VatAc6a4rhcR0B4rnDsjfyDup8p9Ebq8EsYRZ7A==","signatures":[{"sig":"MEUCIQCOaGJ5YAAd6EPbdjSX0NfBMO6KH3U8zuDsEVCPRSm3EgIgTIniLKyr7Zo3JO6ACFiB8JhxuWHs7RPQ0Fh52r67I4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRaZkCRA9TVsSAnZWagAApzwP/0RQ0n5I/o6dBzL91MWB\nDj/GQy9+Xsuo9P7kkRTX1ZKuTkiPJ+wVu8f1tMWUzfryb0XDWrVTUsf3Hwq4\n7etSe9i2DWzGmLJSjjkiw92MsXXQFt72Wm7PchU0A9TGejW9f4lcoFM/ZMiC\n/qkEJHBdmRtMDgSb6tKV1yYv49xGF+f5zAJ5/lSFNjdDG02iidesB5Iok/nB\nWkYvd/I7T/WcjtXnXGDZadKt96dASITgaHT0vfnLBsRkFpvgyksRu13KIYcj\nf20xD5oP1MtQH+5pYstrEMly8yjhF/k8xAl6uxRwmF27z+rsQssf3TBbZm5L\ncJI2ILfsikrQP94B/5OPbsqdmKgIAdLgte2j1xucAxCxWk1y1Mv883IvoweP\n0W0YfkrsRgmi8J6bbzjWaK+82Y/d+IyaLvAzBoEouVGHAFe3olNHdTdG+T5N\niM+OUY+asQeuOZTVCsn88KMSw1gxIjSeT4vGsvOEKMzY/85wcEnlarNUJApi\njsPihRw5c3NjEppyEREG+9ABXkqwodn3iJrKNUJiCGohEXz44Qfw+c5Jt8+y\nS+WObKM7ORiqH2nekjS/5Wjohswe8G7iypf0D6+4wWYNB2QOFr/d7iU75LBT\n1zjCRNxWAhGa7/RqOplBydq1NAHuQmSjyZXZMKhK50VqcIKnV78rsmjYn7OJ\n60s9\r\n=v8Iu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e26c3ab065bbe8a466b3019b01b8dc93940b6626","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.37_1598400099471_0.6247549943260029","host":"s3://npm-registry-packages"}},"2.1.3-unstable.39":{"name":"aws-amplify-vue","version":"2.1.3-unstable.39","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.39","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"d883355c290f21268cf2872f6e628654620dfd7a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.39.tgz","fileCount":47,"integrity":"sha512-nGuxl/vpWbHwcyUid6b8dmT5pvnfc2OqYARWWTrYrsgptVJ68+iMnoGmFWVXJJ/925IhDMWc9ZXNYkVzWdDNvg==","signatures":[{"sig":"MEYCIQC8itvM6BLqRg9bwUHfiwTc0u8b75QJLdb5pubXSOOOaQIhANvNVPcpi7PDV0v3beOHfLPfu0QhH0W/O5B8NbcY6bWE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRasMCRA9TVsSAnZWagAAGrMP/39LaNq8bvLhJp8pQWH3\nNkwkurIxiMO4hqoWwVCMeb/5r5zEj4uboNnBvCyx4eIw0lGtNPYnQdIeHSmE\nzifLTLmlX8PsATyKnlxc+RwYNYShJzSr0ocwxiQEFmMIiZwNiYvxHetfwKzu\nin6AubLvxuGkIvvQEkEzowvNfP3NtkYIs9StPmS3HftFBnuBOPwsij9vUS/Y\n0owDchTzq6PWRqb4G53aVOCZVeSd36es+X9R4ghZJpJgaiHAsh6RC5YhkIRq\nvFmJIz4ZJG4Yry5jzq5nCK74gDa6BHe70Ec4ETndPLgkAQafBG5uTzU7Qb9S\n+sEyWaRTykAXzNYDu+Ow8z+Nm5utCHjiQ+JFKUPYwKPuzEnwrDsHHbJwiDQD\nuuDcJ96YDI7ULlKKxNX/2mD4lE8lCJTsfnZ0/YBkN7RhpQ4kSNwQ0GZbsYkl\nbdD6AbJwi6LLb1b2PA4/FpligtlwBTmMDcSBr/L9KllC136UC5H0ph17q9za\nbsJHqAmuvqmPT9pNy4azZ5AR85h3wkswcA58SwDw7bGCSuxMQncu3Advw9xe\n/ssmVVAWa/ZdZJrr4eysRscR90Od9XWR74I6yUzcZvPLBLIgWNUJXwFXIp5X\nZxRH942vJS8Z1F0O6DFz2kq2x3FR5VNfenVO+ZzqRFcTNmjqlouJzy0VTbPv\ndD66\r\n=RG/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"85cb5ca42dc2bc7171f4d535ba2fa2ee270a955f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.39_1598401291973_0.24458877543079005","host":"s3://npm-registry-packages"}},"2.1.3-unstable.40":{"name":"aws-amplify-vue","version":"2.1.3-unstable.40","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.40","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"36c11b8dd09df139646715d9256af36f9e79c235","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.40.tgz","fileCount":47,"integrity":"sha512-SUlu56uEw/Bl7K+GLfCrGaHdSmj4sUhqtR7MfZqhG9eyx3SjF6CKo6ftlMS6k1gbzxmy6H+pY0x+0frgVbbJ2Q==","signatures":[{"sig":"MEQCIAa9uPAU4RYxcJGnPUqgr+pL1u0Ev9fJZGdaG05BW1orAiA9vja2zfx8Nlj045PfWmzB4vAOrwVS/gSWfOD+XAAH2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRo+gCRA9TVsSAnZWagAAqOMQAIaaqGCUo0L8A/vzAx+F\nqGY95LipzhPWPhYR/ykB9elhtgtqGURl/hzCumxys7JdWPmZBQe+kHXBSN9Y\nYTSsnI39JKUZgSIo+/1cuivmBWj1j8gKEkQjn7H4AiRrVJqxr5ohfCgzcA94\n/Ud1ywnhj+PDKqK98ioX35I5oOQxpudsz+a5oNb6iWvcxELzsEQiwZshhCJq\nb5pVbOx/JgxikpCKmKMtX5N6d6ROQVF+U0b5Bj0yxXldkncr5Cuh5e834fh1\nitdHjk9BeUyEBkS9Sv0QNfqcBcfTX7pcMln7AQME2GNkJv2Lhb9pJAFfrxkG\nBYoVofUDq4I5fBmu7C1Uil70unV8G/8CKWP7/hY3ysUZnzXBZ62orNrAFI6h\n1miYc70AP4Dr1hqzgUrECkEJQG7Zn4bfuvEw07h3UCMwL4wlaMdb5NXjTz2H\ndF5teP96SLeP7iMG9+N5J9vkvfxR3e4wjzAc8vXD3KXfyIQXI4VE7UQlVUxs\nAKCPf/mq3WCkDKuHskP/zrWMQV8t4E29D+EsEvDtmUm6sabdsydFlNt6fr9x\nGNpdncXjTmqrfQ9F+s6Fg++Wk7VgdY4dt+hacoVmhdOaiVRHS320W5Wdn+JA\n+WxrSa0CtodpkrPJE3s+TkF3mPwQ8frvCQ9B4GHoT5Oq908oXtYPs2Kiyvfn\nLvxs\r\n=aVZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"84af018657a30382cd489c35a0ebc4c41a63bc26","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.40_1598459807779_0.26888534194846425","host":"s3://npm-registry-packages"}},"2.1.3-unstable.42":{"name":"aws-amplify-vue","version":"2.1.3-unstable.42","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.42","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"ecb8c587456e4afa3aa87fca2431af1b3d02c27a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.42.tgz","fileCount":47,"integrity":"sha512-1aORQdZDRfMY7VK2dBnYFHlvbYWYXogCyQ3mCsTNhiZACzN5ZxdnKiW2tIuFvPHgS3kxYf83VfXFOBmIqmmqQA==","signatures":[{"sig":"MEQCIB2ubZPl27qcOckrkhhoY2L7JfDqgLSM8Cf5F/SMLZPSAiB/8iYRtYNDZV2IT7a8M3ICkKAYDp37Fza2x1rSfZUklg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRt0bCRA9TVsSAnZWagAA8U8QAIHsrbcHZnzGNdbWo4as\nufLlj1IpqxXe01D5WNGdI6dIsVR0XgCO6ULzlU4KsnSuZYoZ3pyn4haVEYWl\ngT2KlHJ/gNQwc8OtLyfM6iuLMxicYYSe4CCcN4nF88wEcBafFWPc5Y/BTvw5\n8Ew74LO6jyTnUjFqNimV96/mzE6No/sS3h3XMCqch7JSYwAJ/Mq8ruqnqKTB\ndkIRkZZt0pGWQ75vEIf3B05KKmmSztcWUKDKep6OomGXveJVmBCMjlxGc+l3\nLG1kpvC2zHlNaMHoxkMPzR4IpGYKtWbhDvww/zUXoBj7F+Us7UpnQ3azhYMK\nj+aXKH1kT5TU9/QWnMaifeguUrv6WjvrC+vSWOyh/GbhwwnjFKqdz1tN3Tf0\nPIRVwKzEcQGm9eyKObf+lM9Qa/psR30z0ymhmZMwPytD+e/mQuVfHGWlMshv\ntvE/WOLZ98pY4/dhd5ra2HkkLB23HXNXpLm6u1KWAhbEche2XN2iix0lqgEj\nv/zJQTNxDMybxYKN2KLZ1WlC/fta1So7EcA+6cTko8Esi4wyn1HLiJKA+ZQT\n0fOJPK8rZfj6I1nM18gt2MWBIIqXgg1232Tdz2QvzYypwTXR9vb25rkGeoli\nwziyKXJSNvmKtoBdGL9fnoLyw8faO3q6DUDgYWpzARG4qyVqkze0Myv2udPd\no4gL\r\n=Omr8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"abf8e824308c229e09e585a7995d17a51f36c652","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.42_1598479643052_0.03551617919460104","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.40":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.40","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.40","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"24b8118572876e75cb907ec103c1ec69bb9f53c4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.40.tgz","fileCount":47,"integrity":"sha512-gCWB8n8IFWQ+Gk0Taoc3Rjr06pJhjBXsnim0G8sCKLN2sOejlhgBnUNhBQAnmiwqDfRyOIiD0aKpZ4n/uT5m6w==","signatures":[{"sig":"MEUCICiYoY6DuIAi744EiUO5Vd8OYeL5Gf4tvjFNpr8OS26fAiEA9s/3/P/8mV+048YQDv/eso1AhLOFWdroI29Fri8aKDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSWkVCRA9TVsSAnZWagAAZ/EQAJm4SnfbASorWOLb4d86\ni6+7KNwbDDbv7OgJ5+fejmqLs0NufKea3YQJFxRGA0T7tuBsgGZfLM2nKouF\nj/kgVw+o1yvnVoLd1utU1xucoBpH89TZEGvhk6SLZJEnsPxfOWRnejDEI4R9\nw7i6R7aN53OJhh8B/l9Acwh3aVeyGQNkGGncBa16czyyJtiiGt/uCmOQcl4m\nG/tMnolhs6IsqdQYAA6X4ODDgRRvKtjO+9Riu5x4PXm/irMwtV71Za5Zbw8Q\nyVqvxO8aTySbnRjCldmuyljAkw6e+iRyhK7t1cSAgw5lmEqzUS05PCf5d0wm\nmPpOom2n1mVa6oGK4DSS/BMguKVthzZOMrm9LAxcXeLA6WVs1xXdTL0cWCJy\nhMzv5EGMSirG7YYcwqCKXhEGh8m6pm7MFrzQBymUoKR79NHjsKbOnruCV1cE\n43f7l8y49c1HPPfDTI0FLxkPG1M9DSMJXLL7yGZI2EMbs3D6LyOR01ZQ6U0l\nOR69NgeRf7sxoxOh/+w0OhmqBLb9POg1P4TgK89w9VHCTbR4ni54gaAaJF0Y\nJTroaIuN7OSRGnK5Z7+WVsJHvroY7AUWanve6nO665sG9222NXi1U5ildDdk\nrmmx/OR7dSl1PRYjZrPGLMVN8UJwlOMd9eTwSSBcsegIxF1ZgPnVsb1KIb8p\nqQ86\r\n=YZkp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cf2ebddcca9cc8715e33e478c9b5a0b7475b9822","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.40_1598646549307_0.1285873355167717","host":"s3://npm-registry-packages"}},"2.1.3-unstable.43":{"name":"aws-amplify-vue","version":"2.1.3-unstable.43","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.43","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"8761a6bb744576140571db68b539fb936122fb0f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.43.tgz","fileCount":47,"integrity":"sha512-H5dFOBfOJH8rm0X7T/ynBzMrSVmUcxw5v4wO8fHXAitXVDmwUDHTBAmbg+lvRVxjIBBlx6g+FYjYA+w59G/mMg==","signatures":[{"sig":"MEUCIQDyhBeyWH1sQ5QLUlCryioDY+hVUizz2u7ExH0F/12V6QIgTQ6B6RKVvhfxU+nE1//Qy8He1ms1atHkZYsSu8cvpV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTW56CRA9TVsSAnZWagAAWI0P/1yA3ASUKe0uqLXrlTin\nJrsQmYlIH4kvhmX7+yANQftdI6v4ces+3q1lAMfFMRMpHKY+bDhoXO9fadQ9\nIoa0MvJQ9V3Aoe8QofuL9akqr5IAJKmffvYYOsRI5X3fJ9FrTzz+RTj1owFr\n/jV0bLZLmoh3/lCwxypm7sJxe9LmgFN4m4vlN8OLSaJnREKPJAW5wPja9IHT\nlRid5bOFk6I6RHyZFXmEWPRdA8bkXSuC7OL/9y63dZZYRHG4CcB7t8KidtfX\ntq0QW2A6RxM3aFPQUm2nSHhyd82tCfMCgXcmxrc0j1/+V8h8fezP0QL4Uwcr\nYCaf6DfqfRyHg2DuAeiCY51QpPPu0HS+Lmb6MXkH5EAQXhFJvQ4In6kc6MhF\nDihu921Lwtb/W+Hby827Vu9TEwpWqzXaXOC23aeQJnyFlMUBAhyj2xSiVDyH\nkPwRx2f0UpL6PFQYi/ZAd2HwyVsSvsjtX8EQAZeiOPPRAapGZx18A/87h/oT\n8ef2QXPmp+K2kdw9Ak4EMkrmuuKW+gVgxSBKsBG2gerES5Z10/3vMbLWdFIq\nM/dc/CyCFDXQZTZPPD2zYHaKLeLMuYmP48ojnCmbkhpj9Jb6RcLPedcmNwkl\nt/jt9u2oVXn4zP7aC+JoTp3UZgPw7s/2OlTBe7GWhA1lB1Q19R9xs6cEV4sq\nGNbe\r\n=ZImB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4e25f923723441c6fb705584fcc3349214806558","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.43_1598910073945_0.7909820608534035","host":"s3://npm-registry-packages"}},"2.1.3-unstable.47":{"name":"aws-amplify-vue","version":"2.1.3-unstable.47","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.47","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"5f121b1ca43bc304389b0a21baccb890e1595286","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.47.tgz","fileCount":47,"integrity":"sha512-1xJGjZ87P02ayqmVJWtePD65B6pntVnB2F8wMkEa1hsfbH/rIshigtjnP4yk28p7rgfQphVKxliW4nxTCbdyww==","signatures":[{"sig":"MEYCIQDpsyK33gF0pt9m/q5SHYTZw+A2ajRO9i+OFOm10UPfVwIhAMcpHuPpRNs1ZlEAJTqAwQMKFZCa71zfuY1LCNj8MLpp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTnnaCRA9TVsSAnZWagAAhI4QAJQIP4f0GncaXSFk5gOZ\nuEJ0P9QfRmI58mnO6lCrpUAj4nYeXNu11xhndKVQw1RIcG2A2k+1ySapEqXb\nOR9STXxjZ36+FNzd+gFbxWHiU+sEGsrc81I58jn7SFdUcPPXB2G5Zgv7Ew/s\n0YyAQw0NzrTl8I/CaOGNcFC9P1kFX6Ky8QrrCiOWiCXqI6j9BOoijRXFL/K0\n+FBZZgrHZHXwvLxwiBeQVIV0z9s9JrC81zjkz27f0A1xU0aoRewckVRCf7UF\nmywjFopmPM/WBUANJ+L0TA0ENWILEAnrOP6OegEit8djUhC9MGXZBGPHqASG\ny68hQO9m5L8+QY+EnlFcxYHArKXz+s76wOJumvuBb+h3+KxLL84204pHEhb6\nk+/Q4/ycCQTS2REq/q1d8j0fhqbwfsiojP9awepJXPwma8U6Uur40lE57nCu\naOgUTwKhwvwyGSnbfVGAKVAM9Ro8uq1fMczTqaf6CZF7xKJlsJMyn+MrJZ7r\nh9Cbii4Tn5fQujMdXcEdnTcXG9Goedmr+UlSf6r4Udfig9iyxgX9FE1fMd9b\nAxD0t/84opmnkzZWSjcBBkMetjsEwv1IkiHWVrkg6vPqRK5aQwWqAS697046\n+JNTd/IsvpUZe3kQkaFmOOU+elnihSoLd+Q/feliTVc1nflkCIEo2c50dv1d\nCVHn\r\n=/YPk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cffb932dfd2c7bb1ca246adc451cc7f6dea2a1f6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.47_1598978521888_0.3907816143714289","host":"s3://npm-registry-packages"}},"2.1.3-unstable.48":{"name":"aws-amplify-vue","version":"2.1.3-unstable.48","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.48","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"f8cc0888b21c9a70e82f9666282cc22be045f4f6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.48.tgz","fileCount":47,"integrity":"sha512-CPnO2k2ra7Z85CQGRNJHCSthmvp6gKhkE6GTO4twhVftwBwHBtOK0bQVddkQbH7R/PTHPp+SGF5i24CRyjgfhw==","signatures":[{"sig":"MEUCIF9wAHo73xpxdVbYy6ycnXH6mOV8TFaeVwQWDHgmPOrxAiEA72iYxFqwS5FXJ6P3R3SkLBntRo/uK0rpeHEKvBRcxxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT9sOCRA9TVsSAnZWagAA8iIP/jMQjTbLenUAkfnW/afK\nRAcVx8kjAXd/k4UzGB94Oz60AJxSRv3MUGj2JQf/4S/XHP9hh+f7s+MwkVl9\nDh/yv5XJgp/6JNqzAYI5wgj6SCsHKkwzu/iQ+r96WXxqZQ0Fq+z/XqouNW+8\nrdZBINetIeJEdu2BGO8IIlXh8UXpqDqp3Uq28yZ1KlczC+xCL855vh8DneLU\n9UD0hyhQ0iZhbf6iAptLH5ToX49Fr66rSE8iwrmzjdIIhPBJ8po6JIDmibJm\nSbUUekoO3zQQSFfDs91x4A58sAifMNqS8ZJQ65I8dKfRC1o3GxHRZE+yPHhU\n0Jgkv9/0HnvbeZW9jriUrPcOwQk3pe/GlCH+UNv8MEdfrOe7Id+lOu07bBt4\nSDNkHnvhRGhcI/8qocnSkhFOAIyvbm0ed9DQU0Iz4MRC5TVIhMgngLHeG3Ua\nZGKqZy3HkuD6InysBX9lpu61kZRqsYAtfMSA8ystGoreC23fDVfFIDYf6mKo\nkGqjnmEONJ2gjHKpXj0cbylSJRdjJ90m8/V9RjbasTQ2G7dLOZnihX4jSkjT\nrH3rtLGBpj/l671JPEqUHQV8S6aTzQg2bRbROQxlvQnOTNanG/SHT55BzY5e\nrc6Zc5EcD4kWpdFC044MrSSS9lSt7NmrVTfish5+5wp5wTatIS7UtMy4ZXtn\n501Q\r\n=A/1p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1cb1afd1e56135908dceb2ef6403f0b3e78067fe","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.48_1599068941666_0.036595391800944954","host":"s3://npm-registry-packages"}},"2.1.3-unstable.49":{"name":"aws-amplify-vue","version":"2.1.3-unstable.49","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.49","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"995e13a425236cd37d8b51313f1e862e2d450015","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.49.tgz","fileCount":47,"integrity":"sha512-r+sAengfCZzP1Uj+cCfE8N+0hZ8cFHZ5Zd/EKCuvGPrG4O9X4xxO2+pCqo7UWSrlqjphejv5J6sDDEQzFzdgwA==","signatures":[{"sig":"MEUCIE+BmJwU/NWtNyxO773/30dfjt5Kh6UsPwXktBXHLdVGAiEA9NxGZUoz1IWrehVTJjTqAUTU+4LLA8oO3Nx3Bs6O4ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBU/CRA9TVsSAnZWagAA5Q8P/2rsmfYz3s6Nq9NhL9Sd\nHx89wBLBB3PitMV1afLc4zmjKDI7/KJGyPD9bQY+AS3DcBDT32AeG8b9OWoN\nix0Y2h3ZQKRMXBRo3fesrZyKIvlGUAb7dgaJ5STRp/muNObaGQHTGpIT6GCH\n9leNxO/1FxWrhttPQZQgXYIWl62AqXY3bl+ThBn6MShJyapIHJ+pIpUR8YYq\nSfcISbYXXPz/ewWhI0LEKA1vqGOFIg0FvnH79Q7kI4bKEQoijYRmGyumysIa\ncTSxLcFItysITFctAWEemHdPf8xDNz98pDCeotxIWlydzPHr8ZOtcrRqXrB3\nKbUMA4/WGBKXLgBrU8kmrLTl3VBeoVq21/SssecEqzCDdJFximID/tnm3pHZ\nSLkRVb/hDPu5CRIwDc5LIu4YNWITIItYXNY1EX7utv2gI9WFNHWARAfGWXDB\nMdQ/yPL9ZEPlEnRvcHrWeK79EkIWAk7VSrJtCwxWO4G3D4FCYYwqhuhKhZAw\nj7+mrsPXkOyMty86cFobIcvWnerWYeBZobIgvFvt/Lu2175wBvI7h8sxIitA\n8awY3DYfYmo3qilMxBOFEuMZSA7m4YbY9811NF9LQlFxiuFJWTScr6TbynNm\nREovsxMVqlGXRySn+DCKRuO1+u0vgCG1+LPZBcbH31vKHPBBfyDnwC3X0Ujo\nBlo0\r\n=rAKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7059556f693b4a52143ecaa9934a14f7195caee8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.49_1599083839187_0.19297791968490907","host":"s3://npm-registry-packages"}},"2.1.3-unstable.54":{"name":"aws-amplify-vue","version":"2.1.3-unstable.54","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.54","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"7f49b49ca54a7a78b06d7ab433a064a8204e61b2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.54.tgz","fileCount":47,"integrity":"sha512-f57LYhXTZqT2qZl0c2h/94HdiHYx8WeYwJvGFESmcNqlMMVjQuc+JhcXi3Cnmj8ccqJjqrsvoKy1EmVqhnUQqA==","signatures":[{"sig":"MEUCIQDC/pVvdmpyLDs6YrzcQQ44u6//vTc9GvFXYObTX4sfLgIgPiHVmiHdDSAmwyn4gPL2db77fBgKE1x8vMARHHLAS0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUSPxCRA9TVsSAnZWagAAwl8QAIfkywD1Vsbd3K9887VB\nT0BZxm/nztxQFTR1KyU2ZTy1WrCyGHJtLG6vyEoGxMcOm0kBwFMvYvrnsmuR\nXsN66iUl2L1NbXvjauXxN7Cgv9WxWamYFQfuAWMPaG11i4Kblfcj3y00L6xt\n95RChd0dt9yfGqwPnlSjTRfjt29MKnns/wh3a9ZLnl2nAK5xUNz0NBA0bUjx\nUGdrGoKogcO012k3Tt7VDv8DN0a2GsMDuU2i5K7p15rx18P+8HSGbDuWSzaq\nmDsu8Vd/2J4z4Qm4IL5/S5N8x5/y+bua2Nu9FtO+jnwB0mxLa7BZpfSAIM9U\n988jId5kKD9oSUub27osJN07ecmAl7PK7/IxL6BkgETCDcPsBGYO+yByZvjd\n/ZtkAt/NzZXQjQ7OjdYUg8D/Cb9eCAOYCBM482dwOepOEJIZLwJD3lio+OeB\nJYffabs0/1DC1NFNiXdaQNaajrNvLLBbWOV7OLFBamqc3nyQk7zf6hmkJzFy\nPf03AlznH+Cxas1XJWAwRFyeuNjNFivDrz6WkacBMyUa+RbjYdmK+WNNtGdp\nqMOcVIWXet2fZmqxUkNb0+/0xl6v7GQEwO9uhH+8kAZlAw9emGL2Fliy4msL\nV9nK4UdfpsfTejsQnwVi3fty/d+0jYzxSvAZW10B9gTd8ALGWyLye48pfRI9\nZfJE\r\n=4Zoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"98ea09313cec381f85c91a2499c922dfead16d95","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.54_1599153136379_0.3244804614195036","host":"s3://npm-registry-packages"}},"2.1.3-unstable.55":{"name":"aws-amplify-vue","version":"2.1.3-unstable.55","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.55","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"879060e8cab16205f7deedf12be90218e8d79991","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.55.tgz","fileCount":47,"integrity":"sha512-U9uhEBGRQr35O66VdIVEgwjd74bFo3LbU5eA3dfmvwdVbYZtW/Y1Lb25ltWAsIUj1FwCiBCByffzePnDO36nDw==","signatures":[{"sig":"MEUCIBcGPytH4zsV8mqJ7+mKrM3ZWZw4s2b8D5EC7EkgdYtWAiEAuJoVpZcEldQyS2hyCIfBYVS/1TDFODe7LUcqfxhn5Qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUS3bCRA9TVsSAnZWagAAFmkP/1nRYUO2Mpx4L8WxcY/T\nuDYNfyYzaUHsnIqNJDCVnCLTFIbV0Icx8Uq1wPmt0eDITmvW1gJ+KtkzpTZm\n6edTS6Ag5S4jo//3s6kTeX4pdwY2q5VZSpDDab6lD16PCZ4KGPt9Tr9xENNG\nmCEDncUZlDdgNfKOGRyt8/2TJBZ4pYRI1NAfkzRP8jxFV7LrQyXXHl1guB/J\neIHidjWdwEwKysVkg43bNrmkVRkF5grA67F/k6De5ICziG6XDC2ISihjoa92\n+1IJdyG8sTYpXMMA3LJjbCAX2ljUF78OgIXuA6axfZqXquJtLGl08AIA6CW2\nWf6JGhczWRJv+9cBqb451I3NSEc7fJSysaUw6jVTZPSDyRaBLLAS5uLP33Gy\nPjUv/TnaYGEj/aqvgYEXBwHq0kfb85ie0DP7ZoLL141EadwHsrmSudZesnKT\ncsQtzNJPuomyOdjNkjRTuwEYl230JfkWDV/4it6XJCSg2oWIokeVnhOIwESI\n5thE1UTqJPP//JL5Qgwtl/XtVew5uaXiJPlINvvLxpdKscA/F6UglRENiBA7\nZ5rNpMHYkkU6JPTsAA9OWSvqLdfAqh3rDDPq8u769Nj8l98tBZMpL1RvNkxG\n9E8sUiwiKykW4mUxNAJAK+o30st/h117rOGE/U4xcZtBtteAZtUzudH925SU\nBOml\r\n=HW9v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9bc794dd475d7bc7489b4c88f0cd8d2b247a386f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.55_1599155675390_0.14845472734531318","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.41":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.41","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.41","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"a1375ee3e9428e7c7442f8ea90f37ae420ccda84","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.41.tgz","fileCount":47,"integrity":"sha512-cwrryQNMnqoxDxrF/ahQxJwALj4CoH0HVxuQ3TA1Li4pajlRQ0qYfDf//vJnnf474k6yOaQ/UsDzNZlsGYosaQ==","signatures":[{"sig":"MEUCIG83zMqE1ZzdslXqplI7kOjz7D+p7QxZ2rVWG3wXRwMdAiEA85uP37pD2xpnrZfMqWqH+1CCir9sct1r8FY07zxc2yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUT+oCRA9TVsSAnZWagAAE3IP/AxP1/Qn6W6QNTJxjtMM\na14x1ibNcqH8Uwl5UXvVen1dMCAzDpYRzdIqSAZS2y4Nnygg4xbOfVpSucXJ\nRaqoEkQ6HLG077PXmZIe/24WU62Vj8sAgppzHvHHKsMTJimbrskWAM+dfYO5\nmrVni5xRjHfiPERHDIKDcV+WSZu4iI+gHZbv6iadlLam2Zf7QsND4EhKwM57\n+oZNbJ+pK6RYyU7EsSsZ10Ftl0+UOxa9r7lz4jW0HRSSkXHNw07cot5mGz0g\nxmZcQK0mBcAknAC0ySpcDeGOpmDsA+oFMvEDFuzO4Mi4ysLaM7QatMdeReIh\n0c/idhk5fw1WyLFH9s0myBhleNLiNTZc6AmRFMlomzO2UmVYk0ZrfvL4Vf9+\niAIEvnN3EcXg80olkEzUFr9eT/PnqpZhasD6I3XiwkzCtCyJNaMpT9Clipkw\naut8kkFqjSbs8gTd86XyxwxkmbFQzIgmPQwAieg2JEHN9m+EURoBzWDkBz0y\nI2yAoC3TRgkLqb+tklPC9ghe2RY0/+oan9sjbYmn2yA5bxI8DrlJANEmxx1C\n6uDnNZwP6dNcy5nh//c4d8x+VB8upZ7thvPPmH7llwjblJqm7IiVRlVBELYn\nCzVTvkYM4dhI3/n8ch9OIDpSpsCcCUhqxgeulm29a/J+H2CLQQbrFxgDEZPE\nUbIt\r\n=9FBU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"224cf2cb62552414c7138fce0229242e66c8569d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.41_1599160232093_0.22129907301742247","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.42":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.42","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.42","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"6eb8d045693fedb4aae71cda7237c00faf4c0446","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.42.tgz","fileCount":47,"integrity":"sha512-ZsDEm53NpbZzZ5LPMIMfJLoc6zoRICuc3BiXCjMJb3Af9z0OuCzsdik0hvqW65+M9aThBhUaswzPcoTXZK7OMg==","signatures":[{"sig":"MEQCIBcR1fZs+ciGqxRcfhoGuGkb05Xbs3kcxWgnX6cMQsirAiAyz2D2VXpUv31oFS3R51jnM3JAu+IoFfOJxrUjTWEawA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUczCRA9TVsSAnZWagAAy/AP+waGjk4DKvosbnlN38QK\nTWvDC8mq4fnqwouF6fByzj72vWgcdITn16w3QH1lVw0JP1Zzsz0VHWVELi7w\nC0dNzI4aD/ZZbiQE/7flqdNb8t6e70pvwvaoVPDxuGdIouuQOGEaYgCdcPMI\nDnIIn5cFDn8qc94KnQ1GaSzuiLkmPgqBxVTSvohJTyTOoxERfs0kxDm2FHHx\nM5ToSSbryBUr0AT8M4BGWsozzC8JzKnvqKkKKipaLganciSRoreAbvPP4zM2\nUKBX57nata+k1NRa+GDunPnspWeeC17ygWLW6e6AXu49941JoELVpvEQIi8m\n05NN5WYCluO8WAhrgUqJY2ATUOGzVUzecfIOZxpgVA3lFyQLMs14uIEjHC+P\n4+kxbuCs32c/1CMJj53WdEM14JAPYIn/WTrCxHzGN7/II/YTv2pffnnrGlGd\nIzowWJo9LWrq6gKIRqYgbn/3cuLuTsK2lvE2QkYMo4Te08a8bdOoEJ6TDV/j\n1QAz9/uFs67zJJS6HNJTl11rgFuM+x6A+1UEC1DW001ItSTx+BLRvLJdykx6\nUZfn4StKdFUwpUdbb3nf5bwlneRPUn+udWXTR82Ti+jRTzYZGaF1Ii8TcekR\nLU7Cb/zwlELkVsKla7gqEZM4/vi4xYbTQOLyTp1CsEVs1Y1NrCCALkL/ch0J\nhsR+\r\n=MATv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c8c0786c55caf98027e37e273f085fa8b3cd8ac3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.42_1599162163353_0.9218711141845715","host":"s3://npm-registry-packages"}},"2.1.3-unstable.59":{"name":"aws-amplify-vue","version":"2.1.3-unstable.59","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.59","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"9844ae1d2e51948f2c313a73d7bedcb87013e55c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.59.tgz","fileCount":47,"integrity":"sha512-+1iUVo6TojnbSeZfwwgRA3vkSVBVfjDOU7R+PTYrdm9jJR0VgGJiocqTivsh6WUgqe4+CIeKHw4tHKv6sPVW4A==","signatures":[{"sig":"MEYCIQCiz2Pb3Vo9+lFpeAvuuuD4FpyK/wpLwwd2UTk2BE2n0QIhANPE15uZ6gmu/lhRrGNgec6GPnJDGF4P4mUOZi0uFAy1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVi+CRA9TVsSAnZWagAA438P/iC1RZwWH+PsP4Kwvfxr\nCCH0HSdh9oofgNRzvY1SA1/j9vn+/i4OaLsj4/SxB32mup3bpe+g++SH4RwK\n9LbFCrYtHVCOJHz89jqU292VVMrCoQX52NEKXhioF3i20ToIlu1S/qQT+dP+\nHqWJc4BcNPUcsseE0dZR3pO72KeUG/x74oZc3xCo5ii61zHrGhCt4lmcG3q3\nryTREf6C7TKV8THhRYq4cneZyJ30qrSElE5a0yCDDB17dkzt7tldpA30AZCq\nJ8cQECQnO/d9qLY9UKAmH7cJF6I31tPo+zBCUI1jF/XzV4GTaH3taNwEOk1d\nuKOK5OoTTnyDcb0H6WF6bDk4Vmqo5/isol7tWQa00ZM3hdulVpWpaOoB4osW\nkbOvc6mWkuKFGTqkYBzj+CVZanF7U31jlbWEUQU+IdAon7TKWauw//igPxNt\noucSn+Dx1HuJUVTMuTJlpZW0keQs3vzLQVRGntB/2vLtHBTBzvP8LQ6PQyJy\n837MljH52Pc0R31zEFZH2V0JFSau2EEH2jJzBsb9YO39IV0OjJk4FN1jfXxD\nE15hRZcv7Xh1KFaq8Puswt22Tc6wr88bRWSGx45EphKdMG+7TVKIX7sQ+ihx\nwENkBHVhcRTJdkywlhNFgrqIxNA2XpLgAt9w521/5Al2N/05JfoLPYgqMKgc\nmCaO\r\n=UiQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0d24cd5e4aec0880d69a4652966a8ef2399c0c8e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.59_1599166653581_0.4692059751838875","host":"s3://npm-registry-packages"}},"2.1.3-unstable.60":{"name":"aws-amplify-vue","version":"2.1.3-unstable.60","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.60","maintainers":[{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"}],"dist":{"shasum":"c48942c25624d9b9677c1d0b487b0461b8365112","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.60.tgz","fileCount":47,"integrity":"sha512-TWGSPQ9PqXr1/miYCY30QobTYpNhPNu3dsvljiInQ3cnHyUIoDIqIk2wvzDgJlpg/QyejR5XFmityS4Pwlyl9w==","signatures":[{"sig":"MEUCICbrUOouXvZ2pdta6NuXi16eR9IzqPxLG16N8sT3Do7dAiEA6tNWh39T546oacC/FY+EzOJThxNufyU7bH/yJRRs6Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUq95CRA9TVsSAnZWagAAWhMP/j0gfLQIDMfGadrdUyBv\nANEC2gj47L8gkVwkq27zGO2BzPidA88dMELFfrugx1+82rKIWbG/+XQh+WCv\n94z2ZAjAD2IdFHinE++kAHN9qRtG1HCRkd7hlpUrphrZUdtwKY/lUvO+Itge\np/xs3aTKAk27LO533b8ZNE+Vcbo0QdDImHTjPNYfucU3R2jvg2tgVMAjcgqo\nu0sorDFRkP8lQcV3OAD8wmtPZ2cb8woNAF+IJX6iw7mblzHqTCXhZGPeKmrv\nfsjFiqCcZvQCBYZZiNuE3ChZ0WFHdqkewB5u8m0KMN+OBocWZB5ckUYc/EzY\nSOiQ9lw6fBeUPwvw7c0yoPVn38O5TjGJ3YetcMqUhjlc2d5aEo8Vu6f4X5q+\nhbTzAxwWf0D5ukOJlN4rp0KAoI+zaZUg9328pArsd2HwsKs0JMUUQPwplaS9\nxysaUhl+ijIm/hCH5dC0QNsC4MK5Z0FDJlR6sfvbbj3FUL+kZ5F1FJTkJJPh\nMAeuUtOKApsvqNf90pKaQZFZQciBTD4icBTBqo+sYxS2AyYyCUi9e9oK47aB\nCNyEKRsQYHBQLFdiGu7pngfsy7fggVcR+YLjCbifCQ5laTTonkUXJrHXVuQo\nCRYIi/lL9ZP3k866zvKssINBkXPIrt4OyGJ/PiK3d5sBpCSFLohyOGD7skSV\nvMrm\r\n=9ik6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e56aba642acc7eb3482f0e69454a530409d1b3ac","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.60_1599254393325_0.1363684748536882","host":"s3://npm-registry-packages"}},"2.1.3-unstable.62":{"name":"aws-amplify-vue","version":"2.1.3-unstable.62","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.62","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"42c5c0a797a8828cd6e3e3b94399fa469a6db169","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.62.tgz","fileCount":47,"integrity":"sha512-9Myn9YXIhd0vzSvhgIqMpBG5g8JTOHUQWlGw/qpRH2yXDJzmFedSQ5jUuR1Kh/oA/8a1jCg1h3uGPt/4Gos2Xw==","signatures":[{"sig":"MEQCIBOMjzpMeBuNIvwF8zSR6gvb0FRv4cyFQnSI38DGQRwpAiAjrJgL2tGG9L58Ekw4dcw8DRGxlbUuraCINWG4SZeIiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWMr/CRA9TVsSAnZWagAAZYsQAJnSCkPicPMN/ml1TADn\nCZdK3Um9itGnt5RDVv6TbUy3JGhD7LcoUOrJS60qipW2LCTxo1qW5/WHQzFt\nazjMmAe+8bfa3h+4cqjZmHwzbEs8i7v0gm9Fx8KNvIR94TvY9q/4WuIN2YEl\n2Bc8a6WcihxsUAQfKIhHM8CsJCjmZfwNmOfmUHVPMC7mptIjaIt6uFw7857n\nvuHIU2MS+F/y9lSUxgQNm9COo9/uqC/6P0pWmVJHmMRkS2yEz69rc1VWHZ6I\nSn/6yIGbZTrA4lj3P69Lv0EDr4TTzXSmTnkEoNdVCZa5PhK8JH2rd8JJ8dXP\n4auoFEbGJRyk5BqXNm6RFZAedMJl1Gz8q3olWuFm9vBjTFOppDg5hTJQXCYT\nmB0IN49kZcm7k/LyXAtcmXCs4ett+784EoRlrInMUykGbYeXAwpr2DtQKb54\n/J7UoZQ7j0nzWCfbgfiJ5UqWr+DPGhybyF3XEu+QrNZdHyYl5NQvkjGsmD00\n0ll+qRdLqgZGNgY6xACEkL4ZQiez1kyDKprtMv1zUhM3v4RT7mfOVMcsmzLb\nQh2RsqEHBrXZH86qRhRhP/eBulJZlTxGOw7oh85tT6lYPo5Q0WE/elr1vZrN\nKPoJuXjUMPiPwo4Ook3vdfZvdjk2BtkCESocYFJe8fH0i7UXeUVOlH7LXKrS\nnv9S\r\n=ia+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d1ac3691e4d52b0e683bdc4b1000ad948a826845","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.62_1599654655508_0.9245180043540537","host":"s3://npm-registry-packages"}},"2.1.3-unstable.63":{"name":"aws-amplify-vue","version":"2.1.3-unstable.63","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.63","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"985ba343945e8453bb27a16f8d285bd77d0a0d2e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.63.tgz","fileCount":47,"integrity":"sha512-Cn3FTexs3VC+U667v7Rzoe8S873PjDU6Vm9dYu1iE9d/9gd6v7pOvnigCkrEp8+QaE3PJDiyHl8MtooBGoVKPw==","signatures":[{"sig":"MEUCIE7qIEgW0osuK5ppvhbo5gAuCVCoGl7oigffaFSaZEzKAiEA94cwQWAzlMU6tfB/kfDSoyNd3bAwEwO1rGrzYU8HhoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWRODCRA9TVsSAnZWagAAltsQAJgVRME5pwHe3NrXiOtJ\nKZ7I6hlLud7vOzKZH3Anfuf9BBnUzWyQrPs5IJINo02DI8F2BJtJSMe3OR+w\n9hoNo+IX1kbkTSc4Pz7FFFRzPYd4H3LGdtdYmDG5f9K2qOsXwexJuE9mVqkF\n+FkPGHIwM6KbxzbcGbkNb4ovfyezx+PfOuEDSvH4re891l9rmheiE1tCTW4b\nkMdR+57o+zaCU4xAjNMnDYomK2z8F2oo+3xr3rgRIC3wXQoXZ8iVJiAoGR4u\nvY6dj/lP2aOGpCAm8oFdHldb4GQDW3fsE0j+yMrHUaOin7hXl4WAKvPnq4Ey\n0PIub4CGATQqcrD+5IrHSSb6+WkdtVttaL6m0uLa8ADQOQirXsJ97ux1TOyq\nj6AuFJIK/90Cs6GUPjf7J6nQ9v8BvoGELUuxf5V92Qt/PIX0Lt+IPFO3tV4J\nsxnJcGo4TmyOFR6QwuOedrIxoZ378HUWM62oNGpMeb9snB7gHCOCMbWev6Nx\nm13jV8zplCm/b2SwhYdDiGtn+gg/ncYAvStzo76VzN0h47zxLQbwP+E+usid\ny83MriEhCq70j3axRUGFwa9VgF5HUANItOW1NDThi/F1tsZB8iDF761Xacph\n/j9kkwhpKbGlWRIuo7gEncHtKHKf/0rhEfeJ/aZ44BLYMTO1434NSAgU+Zhw\nCfZg\r\n=OZrP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"07dadda67e7cc23397314e94bdceb6854a704797","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.63_1599673219036_0.954800262539331","host":"s3://npm-registry-packages"}},"2.1.3-unstable.64":{"name":"aws-amplify-vue","version":"2.1.3-unstable.64","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.64","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"b9aed520f7ebc69adcc6c01cee6dde0774146aa7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.64.tgz","fileCount":47,"integrity":"sha512-qxfKEuvBajxSrtvKyaqYbLPUZK97RYOH8ZRyJ41MP5PxMtSu5ELX8dth4uUd8b295TWlQgnOZ8jrOWXq2Q+2dw==","signatures":[{"sig":"MEQCIFwlPyin4NZl18ghfMmxBzQVCGECDPH/UhdDVuJUvNcdAiB93tYkas5+WHojqG9vgcvVTXiXaZ4S/ccswVcAommWuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWUf5CRA9TVsSAnZWagAAAH8P/2x/djwWYJ+rBxybX3eI\nXTjAbvk4KggY3e5tX4gZigPeZPK/USoFFRLxjNNX0UgNxe9QJ9c3yl9r8uTF\n++CqKe1kkfxIoxvUWhhkRTbrGS8W9OrEIphoIWrHj3ZBF/KuIxyEauo/7La3\n5w4gqnAW57FjpJaS+007VVgKwpGX4t4J1JPsZfyNB+gGveud5YhWUDsqnvF0\nSUIoqeUw0Da5+0HOP7W/U+qbZuly3KwZuGZ+l1yclGPtepJSuD8qZL4Xn4AS\nFZiYJusndwPKSGWkFsGlAPF+hQ69EV4b21LNwHIqERgS9ZyCAd6AnFOq4G/T\nI6CDaUowhXaNEFRjHXQnBLc50mLo8cLNMBIEh5CxXxpF5bWaSvi4LLs5IxS+\nqsX7F1BZVieM5Hs5T7VyZwYx/CjJ/pNRYidQw8K0iRylnG72+cv6bYyInQ64\nZ0S1zAAhVd8KetVBiKbRn1IDV0IwTWygigRjnj/uItfFwkzbfv4KO13SRjT5\ndv74fz3URpY5oxO89Y2mAb5sgGVihwIshMQFnCyIucNlyNzm0Qkeu9U70fIF\nOsc6kffYWHI8Wc4ELIDTe1hdSJNxZ4Hu6fQQdX+EnPVMIEiazbvCxg6pZY9c\npMsZzQ7L5RfuawVrSk1PMv8wszC9/ZdsvSngVIYwvEOIf5IojiS2DjIr+uBT\n/hR8\r\n=pLwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"92d4fc16783fc232626350b57adfbcfed6a9d248","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.64_1599686648553_0.45895366420898953","host":"s3://npm-registry-packages"}},"2.1.3-unstable.68":{"name":"aws-amplify-vue","version":"2.1.3-unstable.68","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.68","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"90b1bcb616f899ccc96beba185280638e799ebe1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.68.tgz","fileCount":47,"integrity":"sha512-CC1q33Fm3MJCe1JMd/MPI5F8EcOefjAQVBRxDxrj73zEwGqrYHAPkmPjVMcJpdRCUbhnRz1qFMDLErj02bFgrQ==","signatures":[{"sig":"MEYCIQD4leavOenfayrVZ4BSKyq/138OPKqnvaInhj84DT2EngIhAKhgXHq6YRxM41lwmFkxMUQ/mqSafvV2xwMhnk+89qyb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXNygCRA9TVsSAnZWagAAQtIP/ik/u6j+YroP1+NIYu4k\nByag/Ab3CT0OgiFguL/Zneo0PYWUda3Jdu5ZsLpvZm7kpqtx3j3QDkDMggTm\nTY8Rn0RI1StNUNh46ers447dMxPjsSxQNzl+GDZLuuUlAOs5SDg3M7kQulcD\nS8B0ncBObDeiFyxhLfMmJN+7x5zs28f9qGMHSTOI8TeXxDjHDQKi646cRM1S\nZ/dWggDTsmUOqkMViLosW16JaOELk8bZ2NACt+7mzCUxvO4v0dYAoWLZwGP8\nX3dgJEX1+hdWqTG3huiLF5Jx19aXfMtx7MnY4Pa8cr89C8JYHz8djCShkeIf\nLlMnSc+dSytw/kLlDWNV7fwDKKoDwjEFpjtyMONmcaVmHXjVbeBYKwra/RIm\nGi6vO63wf05ote6WbvXB1uyt2+47LM29hJukUBZbaTBdjI7mmHr4gFjPh3GT\n/YD/l0DFvvUkElan7ubhx/qidbd0B974P9DpVDs/zK0nD0FcZS6ryGx9Flg/\nmaQqFQ3f6OAa7mLk89nk5updjhgrgzcZv/pY3AYLIrz03eCZhBx6DQe6CZ5/\nSVhhI+JLc5I9ogif6eINahzxS1vfhAT0UQlOYnHpFBY1iHy+sn+D5bkxOkKJ\n1kMZlLn5PFXMSwHs9Qlm8USNDvnqmyPH20xZ9t0dZxrEEtqFN3QiH8LezVjl\nEkhY\r\n=wn2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6abbf5053978420ef008fc45968a54d0762943de","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.68_1599921312309_0.7301190446344512","host":"s3://npm-registry-packages"}},"2.1.3-unstable.69":{"name":"aws-amplify-vue","version":"2.1.3-unstable.69","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.69","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"d8ad32e47db93454e3675416a14444c2ad0f22fd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.69.tgz","fileCount":47,"integrity":"sha512-swMDSkQh7fGO4twVfDgjfI4P49I+rVOq+mVPYfe1ym7m8PuSn5mrGLCPW1KpeGZjZhkBgglaFOQp1B40c2urEw==","signatures":[{"sig":"MEQCIDTH/Haj9B+GCdhBvLegIkW+u19qwDY0Q9+6Ax9WQBluAiBpA1Kd46TU2iOFZpORFoT4c+qZ3gNLejYA8Dd8odIjlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYN4VCRA9TVsSAnZWagAAYP8P/3geaqaivjljc50GBRwH\nNIbw9st/8DPNhgPMfh7dn6Zfp3LY7l0oI+fe0Ttr1DthcIvrfbEm0aSq+95b\nio8i9mVSqidQwvHvdweeaY2qOiF2udNvso1RqyoIveHlOx8gj+E7acQhH0IL\nvxb+J3z+PS8YToudumlNC1u5wH3coazJTTEM5eFqGKbMKcdyotJjqjfMIMsz\n2T5YiV05tkhSK9FiuJ8BeYCfyht1jWswLGJyblmTnR6Bi322yHVLyGejSJgu\no6xYRlGs2txReMf7Cj3Ue+5z17HlKkzOwj15i/V0JUfzZ/JUxfSkddtD/Pz2\n8qN1l/Ddn+3Ni5L2a6BS1gzgQzcBVdAm6aXEMvpUnoJ4e3KQ79kmmr8Fbeep\n0UKK5ZnBD03ZPI+Zk+WBp+BOBegYB5uPtMg8Qu8fV5rkmWSrtlMx/D7SChMG\npc5D0rStKbpPFhdYNbl+CakmoeepDUmcatlvoYsN+8mAMEvA6iy3hjP1zEFQ\n1Joh3fJbHtpkkjGKF8WEfw4faodcaen2V/NfsCZr3t78xt2dB8MaTe/zNOk3\nSPEDsyeDw5x/DckdBf/G1gWRISboTSWxPJabtTyLFB0g+WwhhSdoQdKB2A9q\nWuyqafNm1dmxgdBoA7NBVKzwxXE1hzc3T4U1LQuo+/VuojlIEaIEhmcQlWMS\nX4jT\r\n=IMvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7849682f6b3941ddb8d2d63cd865ca34fa7faff8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.69_1600183829110_0.8417958073653535","host":"s3://npm-registry-packages"}},"2.1.3-unstable.70":{"name":"aws-amplify-vue","version":"2.1.3-unstable.70","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.70","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"3122c3d995bb84c07bd483710bc2621ddb216ea8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.70.tgz","fileCount":47,"integrity":"sha512-20EdBR2NEyN7uc3PTwisEL7vC/nKPqkaiyPhIOe4Qpe9T2PVHz1vD5NZPswicRTJa5SQp8sgC01BD95A9NdrsA==","signatures":[{"sig":"MEUCIQDw0XtZkMRZ0okZbKC3GR5g3SjxiAaKXN3khO6jJp6/fgIgcm17OCFiCKCyj1srt6qb658pOo5w8uDOxA8OIw7SJyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYQBFCRA9TVsSAnZWagAA60gQAKAL9MKl6qHpJ5sEy4PW\nDzhuMLusW3BlQjtvrpIiS8Tisq469P/MGl2cXBB2octk31gPTdoUJQiU3dNQ\nZ2H7t1Xg16mmX72VQQYIZguxEFr8y0hZAWDzHpVuIkKpWDMhMfcLqczqnUrX\nws3L9UV1wPPz3tGqvLd5Qh4IL7eWylMf1BUD2poU0eoQKXnEUhMstYImFGNY\ntqrZj00FzI3GHi8EeDGn8f+U96nDKvdbIvf50Gc9i+yQD51mE0/QeFJ8nE/9\n9qtJWzDULNrcG7xmHcSJCejqXWwd+1VEolmR1Ld6q5gInu/9+sisBaER2OMp\nB/NQOM8T0nLMkGqKn/xzxZGPXMxcqjZM3vgHUDZIDuDR7j18vxIPO/hOv68M\nVKYZaWannBSsjvm1yrcSm3PsLIkOQgcwduJ8x22Mf5HY6cEZlypSZNoAagWH\nL4ZHlIxzfzL/pFWNiMdtFexF3lR1exH4m6A+zJHaMxCMPC4PnpjMDO+kSbzX\nuIM6hTOupl7q4G3GVAZNcQYuE/5AM8SSpGKdKKZCMDlZUcRXO5hCoaII/5Wd\nz77BsLrYIfz3GUjgQI+RoiEvkn2ErPgSxoPo7FPNsSulTHwo4JObWHJU2El+\nJe5v4aYxFM/uQqUTPv/0Hof+SGy/1BQPZvJQNyT7cmu3vBs1yu93uZS/byT2\nLrw/\r\n=f8Wf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"122d6c1283ef46925735e94e9afc5a2608946e65","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.70_1600192580674_0.509845708904854","host":"s3://npm-registry-packages"}},"2.1.3-unstable.71":{"name":"aws-amplify-vue","version":"2.1.3-unstable.71","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.71","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"8fe3bc06e81744292ded43ac7e35d3128ad19ccb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.71.tgz","fileCount":47,"integrity":"sha512-GXS5MJSqDdiT+Gcpu9FhLeL6Q7cX5bIQ7/QFXGLPc9ooT9bz0mKBHJMuP+TOxIe+M70UZg9okZSl/7rLsRIudA==","signatures":[{"sig":"MEYCIQCUdunmZ3LmxwYtIiNfXbqOeav4ORCzAdPiTuo0W+6nBQIhAMrmuWN2rgtfOMr8SiRsZ4+ENo62a9HI0WaAGVZG+SVV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYQNNCRA9TVsSAnZWagAAa5QP/j49a62Aq4BwW/u5H3xP\nysUo1KJWOyQDEcT/0K5TXMhlY9nLJWqJ3Fg9w3aAqosxjQ/QBQSiOKw8HIwV\n9KTsaMvXF8WkG/pn6FUHOGuqQ8Jy8t7MqtWA4ak1V78oF3f7ByJy6xNlQQpV\nFqdv9avupK2z8YvnTIbTNZiacHwsdqeJwcuPJNOG3mHAK/4yx9mEelpWMyF/\nx6XNJLedXya+oLsUcO67cjrq55IibQgVnUrwjVnKlsRIjtBzKFSVRC/TlUPA\nEz7AL9zVaYtSedsiCJMcyW71cIeeSWi6cTfXkuVuQKkaUT4H/VbhFEqRpTzG\nn9IKfc9qcyb0hBbYaws+EFHg/quOQFuCtvMATtjkq1o7RgmDg6V78HjyQUxH\n/K/U2B2Dc31kp6/lc2bgguylMBhmp10u+OhsKD3rh9nLPIMCqenHAseT5FGL\njiZQ8rUNeQB0+lMShJ52KUictGGH7ggh2F8Z9MfPwalgDFm1hLT49jX/3dax\nhVc6YE4k5L9aKLu9w1sGhmyZ0zRbuI579B9KxJCyIdWJspY8MoJwJuWKXw/7\nmf7k7UHxyKaLpdPtSneTWbJIngcDAdP0cqt1NPLSNBbzBt/bgnSQgyi5rPwF\n7d6Ej+e1ChPdqbqakviW+KD+937sJzGVYXQljeHxwcm2fHZXWE62esvmN37Y\nGSiS\r\n=q6EH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d9c2f5efbd5ad5dd97e441d7f453f8358f615199","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.71_1600193357335_0.4093251472965491","host":"s3://npm-registry-packages"}},"2.1.3-unstable.72":{"name":"aws-amplify-vue","version":"2.1.3-unstable.72","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.72","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"25ed257caa4f92296e08938a9f07e99258ec4aa7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.72.tgz","fileCount":47,"integrity":"sha512-L+IhMVBvCfGYdyCuSpn2aD7Mvf9aVO3MoxHQcYh1qRot+SEP2vlXHXscj0L21+IfHiYXshNoGmyrXOvr8FW6Pw==","signatures":[{"sig":"MEQCIF+z+HeIkx/0WoTjnMoBP6yoDNhiGW6QwWrNKGoYi8lcAiBP8XqogbjtX5k6fR5yE54RObUTsobdPDXbXJHFcUaRqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYQc9CRA9TVsSAnZWagAAN0QP+weT/1sUuszVeBto6zto\nlvwNdgNMTEqNGnGiT5eeyhTog9rJfEBoI6T0Vnk9itZBp2gnnwf0UlrodHuv\ng+0Q9V1b/u2uC34iMoXOwuxeg4V1cFrmzBOiSDXVHATNrl8WhXvTo61vB7yg\n5aC4w0f5MIbXqLoyF2KBKohCLwgg0lfkoxowFJ1uxZC2w5PzEwn7C75Q9jt/\ntvyd+Q7/pn5psw6jaTXhBg1SeSua/TcclVozpSH+s3Vz0ht2pVDEq+Al01Jv\nmJ5WyXxqtLYnODqi2HT+fYX/c746TS3jR33C7HVwXYssSsBf2rTtH0vJFOEw\n7V4bbzHpJTUxPKPdfhJqkcvCt6QW4k8EvDHEzC77SvzJ/zxptC3JzGoXQyTT\nenRlYcP2BtTrnMCWVWCcEMlBKAEyEHRXkjYvWvLyp5pBSgAJLkXnUjyWGvUs\ndM8kiLuGNsA4yW29hRb0Iyk3xv13NP6E/B2VG+rb7ZYwlaRhmm3u6u86xhcT\niIf3n9sITd+/+EaSwmaoFzcbmkqktqet7T0gTwU3oM2EcHHlSQ8IzsNcIem9\npzdzJjUDvLdeOOGl/ObYSjd3Sq3dbGwhiDTxmHVeBBj9Z8F24AGKR6vCMtI8\nJuwlCN921ttA1VS9w3d7P4cMY/My6xkgwAZ4O/XSf1nmkySthGXdHOwvGRaH\nCUcO\r\n=XX7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"acda4a690117d0867b077db6a001545a9c9c1e42","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.72_1600194364723_0.3811644191950534","host":"s3://npm-registry-packages"}},"2.1.3-unstable.77":{"name":"aws-amplify-vue","version":"2.1.3-unstable.77","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.77","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"8b7c3c719bb8179644a9345d5f7212e2d8abcb74","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.77.tgz","fileCount":47,"integrity":"sha512-IHwwYAvfeXByA/kGjw0twCQ7GXGbzsksgrCwmZf4twan2qHY6i17m5dt8YVkucRxWId08K4JVJ+aKlSRmJbdYQ==","signatures":[{"sig":"MEUCICYxG/Vd8txKhjEMd9meJysIsb7fiGa1wbV6MDfwEjZ9AiEA+VzKjRFPAf7BvYENxj7czClM9di1BZGGiU+/+6vrv14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYm2/CRA9TVsSAnZWagAALEYP/RmB6rSamCsbZ4o+VALL\nsDXvSckOCzxFkH3jTPIOjbmrey7AFTYrTeGeybMN1YIpSSzGJxUKiCxVM8+V\n/2aZgsRiGMizFHvkFUFQ6a/Z/7RTr5aNKWMizYp04BgG7vij5HWzjoMcB+fG\nOWOCqiErwZK7MYUKMEoFUB90XKHlBL6ZrzzVe4ZdeP/zTjdQKadw3DUECs3j\nkOvIyUC5Qr35pOOCGrIPPe850VUyKM7HOWxF4gHWxkO3ZiEAlLo0OVkf8g4p\n3zKwB11PwA4nPXko7d6O0pCZ6efi+oN8RFHS001xnV2yy+LvE2YyXoJxAGwl\nMja4wuBaRbHQ+2qt1Dgwoj/PT3QxllA1yloEB6fvCC16GUZa5VksKbwlO0mt\nkVgC/mtQXW9LzQ9Yz755OyBtaxygfDcglohxBc3bT221himflLfQO8psXLAm\nOz5sGJ2m5cndAJtVhDyYHnD0AiO8cK1N/Dmqyyl2wH7ki3FsiyJsvvFltJlQ\nk28alp7vc4ObHvn9XZjE+X1yaCZj78Lg5wJJtPtWjp6rSVjgg2GGEmPA0VHf\nV1prd05Fz92NhihBPpH0U6VoCmbfSGKaLWtFbGaZEMV9E24ILSa0UxIZhrZi\nLcY8ZCPPxA73hTf8A6moeXqoCOLNkgMc1z+BXjNp1w6AUlSj344jiLtaXbsu\ngDTc\r\n=6Vq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ff7cf7bedb2db8a71d26d3dc75379c6b58c133b6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.77_1600286143399_0.4666728744492423","host":"s3://npm-registry-packages"}},"2.1.3-unstable.76":{"name":"aws-amplify-vue","version":"2.1.3-unstable.76","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.76","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"e07619de2a3332df34205ae67b61e35ab10ceb20","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.76.tgz","fileCount":47,"integrity":"sha512-8P2px1Buue5dx56EmSBOpqx8iCDESEVKHqoN+W3Lo5kLASDbL8cpZ8Ez+cnzDBFSu0W3GNkwqK2J1VPy2TryoA==","signatures":[{"sig":"MEUCIQCeXDZwNDwu3Z+ENtqnzX3f1NhzqT5XTL2BtMq3ssjbgAIgDf8efeQ8jBj0pjR23UTj0gb3j70kxDbCRbo/nm1vOWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYm6UCRA9TVsSAnZWagAA+YEP/iCJJpU6l6LzGVybYRkt\nd+8nJRj5dpog9YaQ01REeytohZXF0EN38OowErmixCtSrTKQ0Gugg6EjtSxS\nxOl914dbw9prD/GR/g5FuD1vDGq3yJrGA9Q8rRjt3GUNKBc7cPD896ZqrCo9\nHKMrjFM2qnZU0GGfy7Akprk7KJ9OzL9QyWh72ZLzRTdM9D9qfk9cJo8b4+NM\nDMCL1WxsuxxoRQqMoEw3K45v2QVvP3GxXzUYN1fCpK75WjumkqjknmseM03v\nkFEnIvHIrLrE854QypfC0tYJNUSZDP/iMo6PQe2FhJBEucmt9s9DIzQE7e8v\nELsJuefNaBOYwWt21yV2ESsXUGrZtP3YhheqlY+h+fFYXXvBnjaMeT0pY2kA\nCsKFBJxwIOC6D2EVMpi/EdvBPPxdhU8bTHybeDfNUXUvcvDnOxo7cPLGhdcU\nR3gPlJKTQaXbFwwoRu97umhI+Elaep+a+5Kc9M3Y9UPAzJ2JN3Fa2DhMSzmf\nVswfejvZkexAayQrY8w6fMCgWABAmk5ROimqq8WbGSbR4U7M35F6t35u4a5P\n3O00gh7fC3jsmAWtZTz92kVzKrm2j96ZnKfVYYNCmtRSe+05X5omf9IC5Bw8\nlpxJ+n3ksZkSSEKW7glCKsn7ZktOFpGg9ASqLToHVi0l1dIT0vZjDphvXpWL\nF7t1\r\n=aShW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"912cf105785584e9ba55f78c86dffed50b0bd6df","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.76_1600286356453_0.6306548118049213","host":"s3://npm-registry-packages"}},"2.1.3-unstable.78":{"name":"aws-amplify-vue","version":"2.1.3-unstable.78","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.78","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"aba0ccdf980d4185bc7c569f9e467d726263e3e9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.78.tgz","fileCount":47,"integrity":"sha512-hlRNlBz+zh4FLL9IiljYZokb7o1f4KxtjtsomBNwB7NmhtFqc/kAp51E2ZHpDDRIdapXzOrVvLOGAfc1ddCPkA==","signatures":[{"sig":"MEUCIFqp+uYw9pvHKKYn7XyyaHCOz7JtXsBxnh9Nz8OPBw9JAiEA6SLkcg5U0dP+khBFIM1iGwHPD+yLDL9Bvnb85Jh0Bkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYolUCRA9TVsSAnZWagAApqkP/Rgl+EZASj+CtV/ZWzeU\nOVaRKIjoHsQqCOJH+RfyH7pg+6/hhz6BWeGDnJ2/Y+ISWofLqd5A5KKSr6ws\nWTQH6hfcEvdeiB6xIBPvWkwKxzqZQRLoiculxrIH9VuL/J9cwnnBG+J5TsoW\nhsh7+Kbwy2is6MAX5OBvaFOVXR8+Qofn44rm7MUOZc6gp2e0SjYxZZl1hYcW\n4Or0USTbuGtt9jixLXrK8MGnGRyg91UlCsXwazmflLJi3DWY24l9zffki7uc\nWyWvo36jXckTt5KfINE/LLP/clAcXCH5ouodTR9ceeqNxkaOK1cZ2hyux/DJ\nQXkAo/jqlR77yqq4AnqBaAmbjgN76wMiEmvxFYb/HMJtcd3YtNUTA6+VEE8F\noJaOWEcfHHyUbi0w2OCpOFb3cRuJt515dYUQsTxElxx0utb1h425gL9joCQe\nIdWgXfwEn5bk5ufIHtBbMSBAfDtVAbJQexA2aqgFnxFBgT9x00te3E/mzNrc\nNGHmcKDH9+ptJs9uubr6AalgGnS69nOemJeC2rxZkk4TnZhijriTd1U+VNfg\nsr4dTuZg586FCG4qQihLRHEg94Oxd99o12n1VERZxmcfE7Wsu1qKHM3aW4sL\nDlG+mCWFK49xgfaqucFxUUw6X6BgZ5WRqlmKGrbt8QBo4hHycoz7sY+S747F\nzbSU\r\n=Esea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cfa00d32ce942faba72a8064173ba5fc9cba17bd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.78_1600293204363_0.5412654772774645","host":"s3://npm-registry-packages"}},"2.1.3-unstable.82":{"name":"aws-amplify-vue","version":"2.1.3-unstable.82","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.82","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"ce04686d3580dd36c7b791618b42cbd86fe99bb4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.82.tgz","fileCount":47,"integrity":"sha512-yyGGy5S53puSaJ4ttRCygISnZUz90t7VmQv8kIXk0kZiQFayoRNVqGIU1mFyiBjvwj1ZdKYX4jJbyrKOHtmn6g==","signatures":[{"sig":"MEQCIB5MZm2KhCk+dHha70X17F6Mj5GE4rpbmWYA98tGWdUDAiAcZS1xQ4FF7iJOapWsANQrmLlOFNIYuMigpCoxBLEYcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY44VCRA9TVsSAnZWagAA8cMP/iQ45ZdgQBxEQ6ic18xu\n/hUYSKcdy5vKGDYbk3PhJ4n7k8ru/TWRcChoKBJK7jYOmq6varjhgJypIIkB\n5r4g4b3O35U1fD0Qe12JbuVOhNlAgRXk/KTqxS9G/FerBqMFa+CB1swKL25L\nnbmzlKdMoKvlfNPoGI9Fr2XgkAGl2qUHf9ETQQuuU3P3OkTHQl5NO07lcf/6\n10SZJtXltfGOW+Ocy28mozHmjfkhqCETgx31gfoz4Vy5MzM4CVJQZPUbTUUj\nUL6OHFhv8R6mQmqn1VKL2EQSAlz49c3SqZtL5uisSobDtK4tJDSogJR6Krne\nOUqKepm6lzXdOplsQFmBrLJY5L9I7xXJsWMZ0f0Ka0Z/d7p8kzA7uAGi4A1K\nRYIKAYhIHC/zqv+tDgNNjB90uP7sSPKi32lq16aAdqVNA4pr9rsIbsVFjOWp\nHJAZuxml7e0M5PdLHSbRS913xAe//lHH9XNamNkPK3film9UiFfPM+CXvtMX\nrDjVNusJDqo68CRoUZFFHYi52wG7zbIqHGk+nLFdncIGUKrvLLkGfXtilTr2\nNsTZLgF1o/JtabAfM1RAaStV1Vg6+d4XC+a/tbOAXDejLeE3IqgVmY49AnBr\nZEHUe6nNX0fwXVSVnLrDPutk2wUdlS9OfeiOqL+hX3jFYPIjQuEBH9pa0rlG\nLlWg\r\n=icG2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"79e089a5872b76b69057f519b85b3c20a42b58d4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.82_1600359956522_0.7228293828531076","host":"s3://npm-registry-packages"}},"2.1.3-unstable.84":{"name":"aws-amplify-vue","version":"2.1.3-unstable.84","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.84","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"3f258a04e464f2f6953eb280b6bfe7163fbddbc2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.84.tgz","fileCount":47,"integrity":"sha512-tTEycEFEo012OgZLwwkCNMcrTkZfsfT3PBtrNi4nrDNfan1Nohr1+68LxV+NHJlvJVJZ/fC/UkG0PiILbFAiPA==","signatures":[{"sig":"MEQCIDnjTtXdj5dKMzLFhosUzSAyTAftIeQTgz2rlJGQgz2SAiASpFUF92qp4bUdQvh2o5GuMDOJsl2es/vob7t9G/v/Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY9ndCRA9TVsSAnZWagAA+CMP/iAVk7F2jpPHD00oI0SN\ndrSIv1GX40nwcWkjLSYutXK1Hfl2LIM/HKM1yP8Q/KtuJYc4+12JdzDeeW1P\n05gScb4v8yNmJ6MINOBFZ4uCtsBnd6MI+t2pXbBWihNZOVfA570W6BSCidlz\nC/DOaJ6LsJ5sJpk5SNfYXUIX/i/fdDpaDPN1ixWnnUOzuwGaLd5a9rgGFuQG\nlCrqns8bJSGBQQbMxBPAD1rQZBkYGjHaZ44whSpNClFRlmGxVxODy3o9e/MW\nDDB5u220SYl/dgFPbwfxH0aTac/dMhOhJ0L217N586+iwxUTrQxyqIn7v3in\n78FzpdpUnKqRWwFtOMXQbskzFywbX7XzWcX8u4i01JX9e2IkR3GKxp3YE6+2\nLRt+NdiyU2CBk+leVE26y4PKa/hy3waxq8b4C2IEWoQkON4NO3dHLgrlscIY\n3ZIOCoB62LDr4t6sjwaDnsroFgM5CSEYnIfB97qe8m2zufShEhyKKWjpVbaB\nvmNtLUY09zLQxJ80/034ZrKoEjo/Atq/pn4o9ogHMAfbSde94oXUzwPVlTPv\ny/bF8MYtuiR2rnssUneQ2Fdl2FeAV8G6MJSo8uvvyTbD6Q+DsXyS4pALkU9b\nMa7SJ+XyF9aBUhjUEwamTw9w90m0xcR/YJP40wmp9TzTc/FPC/maReCsxQ5D\njK/+\r\n=EX0O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5651365e75f2989238110660f5c4dfc7adcfd45d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.84_1600379356542_0.6229646670807572","host":"s3://npm-registry-packages"}},"2.1.3-unstable.85":{"name":"aws-amplify-vue","version":"2.1.3-unstable.85","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.85","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"dd1ccf8fffb4580f4e44f6cdc45c24289feaa080","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.85.tgz","fileCount":47,"integrity":"sha512-Za2Iht3zT4PoECmkY5etaXUXAQDiI6Z94cd3GHi9lOnnss5NpdDBj5hYoFHSPcRacAE2aqDdX7td4s7BccU50A==","signatures":[{"sig":"MEUCIB0RdOG5dgE+MCAeqmT+x5K2yQItux1cTUV/vmsOLYaIAiEAjyjtbrBdrs4ph3ySyT0okugEggEINUQQlhxmkZhJFpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZSZRCRA9TVsSAnZWagAAUIIP/2JOn5FxyyvS+mpUa0jn\nWWfSlDDAvgAOGQmdmS4xSr/lH5t4mnBUup28dWj0oe+zjAAi73mUj4tcWe4O\n3gN+hXM0oLCn7K7cU9+sza18EyfMfbcFOj+jWx/wK2galsBlo9DZ7IFG2pF0\na3wRP9jxEKqm3Y/x/oG9GYA7+ZuTj1VVpB3Nitsrq4ebw78uJdupWPdbp6e4\nj39sTuaZoy/hwyB5iJYES4JeFcCtjRUpgD5HXBo79b5T559Ne14mrw5d7T8L\nbW7lfw+SkEU6sx1yMTPlLP+U3LpJYqvrRNryT8uK+Bp4OAPoVmSFodwCgSq8\nlZAmoj4D31b/wCY/jE43L370VbD+cmx7YCAnCAAMxafUr44wPzs3+79G7nIn\nmh4DOCzFq7h3+HWTpFDZD67rHjOGm5gCwEUavWLg7D9qinl8nQp8b0tY3Xnd\nKiI+DdpaRtpYpucIhWzkWba0WebHkyXH/UFaOr0M+a9+pAI2c64Br6EIgZc7\nT7GEoeCv6BYPqdBieHkm7lQ1hOLdR+PxX/H8WXiHOM7Mi4oD2dPn7JYwgmZJ\nQKYxC7CcPgQbdg+5wbYx6sUnFMNblVW6+V84v4XI/Ja3R21zzWn+xzKfmQut\nPMfH3z5TaYBXhcHi3lt0Qz3OukbzwvFyEJaFFI1d+y9cwjsTGVSXMqkPrsCM\nzNLn\r\n=JZJR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"26ce5dfb0270009fc10f003f5627046ddaf5ae4e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.85_1600464465154_0.4737710350431852","host":"s3://npm-registry-packages"}},"2.1.3-unstable.86":{"name":"aws-amplify-vue","version":"2.1.3-unstable.86","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.86","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"d7cf65df422b79bb4582a2ba5489f38e792dc3de","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.86.tgz","fileCount":47,"integrity":"sha512-S6W6HWnsvWk2zt5H+lKX+AJbYWcTudx/pPNdH1VAr8zt5ZCV5vRgvnjfubGRg+mCB9Vh7pvhTfjFtzUtiuJ1Zw==","signatures":[{"sig":"MEUCIQC5Zsi1VfhFd169uRvx7IU/4vaAk7OwoqQDLfWQV3+rdQIgXy9rqGLq76/wQ/V+1W9UqVdYI5iUeEgW9kz5+lxTP+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalapCRA9TVsSAnZWagAANzYP/R6GvfbBRLTfS8uXB/9t\n4yLB3ndNbfRMJUruXqJnh3R8zZ3LglPWz5/emjD3hJ5uim9MZRlaYdMN6WtI\noUzlJT5sPWjsqu7obR3PXNtqE2sWJQNv7gZV0IQrBzV87/Ql6eT8df+YpK1k\nxkwoJZKLDo3l7pACdkCZ5TZln/UNSQWVzhv8f7QSpVgULB7F/vuHx+o2roxk\nek/eoWQtyGE+XrW96E0Fxbop6ZD+YF9W7GpXO6Z9PdDEhCSMkWf6JIWG1juP\nmlqbZO+LTJecWUMlUYoPr0hZbJsAeMu4RbCK/D+XsJXF/JDtSGLvLUKFqdrC\nlqPZ6FImakK7/+r+/vxY+xS5Y9d6egKMcJSCZOMb0OULu6pamkdPxa6ByHUf\nTwBw52mfrGZHzCJ6Z63kvNR44t8iO52T37onpnM9F/AKQq2Q6hTwuh7VHLNg\nJ0vJnvmAOi4SMqYuQ5ahnwEQ0CLflGWPHOx4XoQlfmv++EFttymWp1k52EZb\nj5wyCE6sBlB5TX0wUvTUwBOubxMy3UBe1+pEPcpHk3iy39mTB8fuSS/hWoeq\nQzLMFk3r3jwCPc19iIGY6V6s58HjehzFlgXG0FNOsOMNxD/Yijhl/QZ3bxcY\n/uBQDhh5mRYg08IMfJK/XDMzSYM9UVMmM8A4tzBj+EkZkuOLCb8C5Kcrny9z\nTGOu\r\n=MDa+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a54a58611869e813d9e9d70f74492d4a0eb3f136","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.86_1600804520797_0.40205185554827083","host":"s3://npm-registry-packages"}},"2.1.3-unstable.87":{"name":"aws-amplify-vue","version":"2.1.3-unstable.87","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.87","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"aadd89febfdb75e7739f5524789221b9c847ad08","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.87.tgz","fileCount":47,"integrity":"sha512-AY+43YnawKtIO5JHQeEG6/QFkNnI3svcFaVctDxnu8Puc3aDCSp8+py/rf4PJ8OguJx+ZwzniKpK5pQ1aGsroQ==","signatures":[{"sig":"MEQCIAdvLzAkkpLgW4+QGVZHVNHnYv2B9i7+/NX6k+4beAUBAiB5uCwZ1bFOb7Om177f9mZmVw4n/xDDUqR02NU8Ms+b8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa3+qCRA9TVsSAnZWagAAKTAP/ArCmfXiMXF66z0miqLD\ne5t3iy/g5tB3hw+KPB4BVheJKYIOOxTHgruCzW4lVqlfrD0LpC45sym4O861\nGWOzHury/7BWhDblmKfXigXYNHkBi+wnB4mbg3hOevVGXu12al6OPFISM5/k\npf7nBJgkQ+uVODx5qHVh+uM2MdUHj0XkQuCvn+J3iE/HaaIPMB33SBNOAvIM\ndtv41HSbFmW+/nSr7n6NWEp9i87w+3La8RK5DHvf8YZFo99rcayvBhBbCMZ0\nvfwKl67v3ZdkXkzCQ6axnWUQJBi+amZKdvhGW/DUlblrdT08y5gBTAy50j7U\nGLeWiee8zvKf+p8gwibCN89cSVB1HLJ58st7RTN20BFO022jAo4uK5VsISYX\ne5wThXXibmM6SXhjapN33Hys35s2bza+nDSZlSbLkdk39CQR5FOMpjos6qVk\n2GAk1Ad58IFttOAlGGtVEuB8EedwXdWwXu/fTQm6y4K8Ed2Ol/8N+pSGUGbL\nYu9Ef5aDpmuJehtbNgFSvHE/ZSJWmPEOeBNFoZ1TddctjXktv2ztf+myswpO\nE5rnyvDJYn9xWTHDxyuCMwc36C3Q4nK7+HXwNwYOkSQxn/eGTqUuS7BUF/za\nruwhfeJ4/pDphocIXBJMoWiERAVf/MAKbZfX43LazOpIN8LDMU/Ncuo8j/uY\nB4e1\r\n=4m4A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"78aee2329f73a9dfd90837a215fcbf5a0e6990a7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.87_1600880554351_0.9465836570817747","host":"s3://npm-registry-packages"}},"2.1.3-unstable.88":{"name":"aws-amplify-vue","version":"2.1.3-unstable.88","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.88","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"9c6486b69348c27ce2f5b4d962ebf9204c36b560","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.88.tgz","fileCount":47,"integrity":"sha512-OFj2cMhwKkGoEwH6Z0Vvhyj0FA3HPvDmGxlSNAURspLeVA8NmAOmlx0GprwoVH2Q0f1N5Ynxl/W9HSUxLzeIhg==","signatures":[{"sig":"MEUCIHca0o13Y1pgIjvkOCN9SKGskoPoxX6PIdS534vC9Jp0AiEAuhG7C22WzsEADCYjZuk/IHgZg+C8oYJOMdwPsXaFIIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa5HfCRA9TVsSAnZWagAAhBgP/RBf9hMmOi4nOHysVrJ6\n0NTWtACWj71AiillazOXcupfUf4R+Fq20oUrksCEJ33kHWPhq2fwVqGAF6Zq\n1BDxuHPFL9DVMuFfM8Cas7A5VIITyVMufDwuMJEn18d3yv/toqhmTp7xgTCj\nBQpSxHvB2S1XW8pN57+4Gbo8uPk4elcgacaXmnb+XRIfg34VnxKx3gvqw71L\ndSQhxTe8ukhYvY3gcY3GUJPVoEp+1voeKLm9oMgea+wvryjUeUP9IgIE3T/Q\nZATurM4ayJARdtjzOPETVeW844WGUlnyS5JYlhCV0GgpgCTm/BfJZSK+/wMd\nQf7yR2lf3WJGsIMqpaHOdW/UmXWda+jcZfAFbaKyLhqybqI+MsjKkmgtQkDG\ngPuRUIuRGwMnm9iLn2SF+WdVme9xvO7E7T6ATkT+XH1NlSvbwye/JdcE32p9\n/zd8O141MTurNnBikY7sQb7IRnxUb60wm7261uZJPtpzP0xvEKVSsd5H/6t8\n0036vuawTiGs7mcw3OZ0p16qL8h4Nr9Bc8OQQ0V/UzFEUiOM4uVzVnJ5ime6\n6mCDNNQY/IUcNEhEfdhvbbPKxC2wVAfccUp7uuSZp1i09EqwOij30t4kczpc\nCHRYp5EXIAdiBZqa8LJrmqjbiXrEcp0RVFXaSV3VMFf+1gusk+fSpMTILq8B\nlD6G\r\n=z/QV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9c35b6ee52eac7baa9e2acff96119f07190b074e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.88_1600885215292_0.6162256226836711","host":"s3://npm-registry-packages"}},"2.1.3-unstable.89":{"name":"aws-amplify-vue","version":"2.1.3-unstable.89","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.89","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"52d280dbea45fac4dbb4b88359defc6aaebda14e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.89.tgz","fileCount":47,"integrity":"sha512-dPyAaXJiBTFu8+ElNEC/An25/4GhUzdtyBQnbOPVhtTaHB2p+M5YbKFhUoVTfdldjQzGxXu9xU7a9335hmW2sw==","signatures":[{"sig":"MEQCIFxXbJmXDQUK9LSU+9iZDVLXzbxkwUw99QhZoZ4zCmYVAiBHDqX9qepjlsyTunC9onvEjk05QG5dGuBLGLK6/1GENw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbMDOCRA9TVsSAnZWagAAMxEP/3X854Vpufd/1fiGPHsd\nv1fXUKDDeS8rZp5Jilt9meumN/v1pcNmkm4ssn906IYE/ODiGrcXrZlgPbK6\nY7j6hIZgzqAlUgFKE7r0wEt4o3My6VorWhcJMjh11a7X/VxSXRDN36H1pe7J\n/c56DV89f+Dlud7nRgDyVlKdkZxIZyCWozsmN/eINvmb/WjjNih+bDMJCp0Z\nWRnSLyYuxX5/50nWmXD/WOTejsGa+2tgfnEEIobJgFn8SLRIlwVlcGWGMPm1\n5PkLcgNRTEGuNwmINsNvph+2+O/XpNkTQV2xeMkcirWg/ETLo+X19MmzCvGC\nphkEUHfh3nqVu5KUJ6pMFgBXyRT7ST/4Q4Z/lr+HEGeV6oINJsKDpivELLhD\nudwjLO0ZaF5azgHXyJlO2QVrdmenoPAv+ZZRMRNPUT0MZXkW1GBTGZoB/P5r\n5/6cuEAuPXBBzyREdWuMIHaqfRbIbCRpE/wvNVaUZpImf6r60dFs7Mud9Nk9\nyuOPIRmcFghq4kAk8jJ2s1P5qkiVIKePDlfa1aZ5k8tQK71MDvorMZ41GPox\nm1cKoy3ASDEcaFjsxbZmQCp1MLP6FgefiQKfxm+RS3opmCfhdPUiYgnxDyHe\nrrhk/bt5h5uEW/4CMGJjhWmPsLwjpKuLj3Ir1KfeCXXxvacEQfjPOAqjJ7Fu\nNxw+\r\n=XPG2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7cbed47cb2bbbc3a94a6fcae87efee80a5542f2e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.89_1600962766450_0.8204363938509665","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.48":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.48","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.48","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1434df54fe2740c23c874024f5abdfdd6f14c29a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.48.tgz","fileCount":47,"integrity":"sha512-RI/gcSXwvnCXyP2hJMHC1QH7YxUhTgP2aFFE7cgI2oI2JKSWK4aLjcTxdQD/Yyn29upWYOE4FC+RVU/A7doFug==","signatures":[{"sig":"MEUCIQDR+eTM3vWch3eIfB7FVyG/7TbOf9KoUlAlJtws/U2AnQIgPOVqvlYV1qWyd274f5ywaiYFuhXIbw2ILS3AoRfw6M0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbP0UCRA9TVsSAnZWagAA1D8P/2SwRU5d9EEImuMbAvKH\nxD3rZtvvYqdOlJH9VsIxbjvY9LgXqjxukMpGs09N+rCUESmwXM9ZdBIKkaww\nlHLhpElZuLFAb5Hto1fBQExbKsBKDxAQImO7dlcqbKBR5M2JTkyiSssJj+z7\nzXwB2XttTICNAq8GWTYOOgPqJBt07jkZALtufGjXjvSw+wr3K83PPTdL3vkV\nzoDt28J4oGTLkzBH0Af/ZRT5jizAdoE0UWkQ7N7jmTrw3qihJhphf8l5qbjI\nvvK4VpRUbkEtcGQ0OulOxoRw5mr8gQkewhmgGbmEXP6MHodHpZ7/jmLaW5C/\nzPqcegmAnZw1uJ5rLE6PsPQyjKfSESGvNx3BsYDLG6EgKg3HC7qrCNpookko\nxcQJJEWi46Mr0y2yEnHQIHMys+ZgJAlBZWhjpqyTI/0XrzqVsMpE2oMx9bsN\nUMGXgi34fgKJlZB8dd1yz7C7DruF06BM8A13JvGHzdUOVwz6m8F3Znrh9xn3\nQIhiRNGTqRL86UNu7hiCVuYU4NYT++OQsTNwWqKRPzP3InanGDauAbRJAn2Y\nO8hdQ+dk+WNSuI+1k4n9ufaubY/LJDjlvLeTfxaI01CkmXFOfzDObFnYwQO+\nbTk6at8P4JzFrZtPWHWpSoxD6C1MxixJS/bynPtg5wn0VSXrvGymLTZx5+E3\nW6nB\r\n=i8Hk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"11c00c01715a6bc143c4c2a20df36472ff5f13f7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.48_1600978196305_0.04334684095747643","host":"s3://npm-registry-packages"}},"2.1.3-unstable.90":{"name":"aws-amplify-vue","version":"2.1.3-unstable.90","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.90","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"cc5c9a20ac4fadd7149f9e17109983b9f3f71844","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.90.tgz","fileCount":47,"integrity":"sha512-HoIwUqGKu2OmsgLx7S/57d4MuiOmMcbIl0dvqeEhn1tkVQpfbFWo8aD+qcHhBwPM7Q+CuaJrR2xk7EXdcbeKsQ==","signatures":[{"sig":"MEUCIHd6afdNm9FTtF460ZfMG0xhy2wHl9wSZ/CJsq1JHQz+AiEAnnkqOGDQfC4Pb4NS+SXat5i1RqR+IAoghjgQQ0B6AB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTBpCRA9TVsSAnZWagAApP4P/3PZezWxFeql9tRc/FCN\nRbaFzSECzjbfBqGdrWJ7Dbm3cHQ8peK6nX6UK0iq7TSOJ26KUER5lKiLJ6oN\nE4MQCM2+4i+MHhINUk+8An5bxrxS+mUnYLgrdR0DgkJSFr9/IFY0OkTDh1Do\n5zZjSvmKk6qi9pyA42Nmm3gdDsvNXsYpgb8dJqg3nMxNXY2ZKI/B5iJQ8t4f\nd46OqYGCYQwbwTF/omUBpjtyuCcOPRumk8IiZIbEnpazkP2oob0YT/hp+NIj\nA95NYMPCtqmyPvdfV+K/0Wpf6bRGu2PD0udTH0Nw/Ve5sImy4cu46EIABWiu\noZ6wywUj9KvSvg0qmkKyziRjsMlqS4tGljLw6miDqGc0syT8Dt1ERuqidWkR\nqkZH8cR7ZJ8NBiFW/PJNEXci4QZFlSWjTxJzmeqHycgLo1/QBAUR26QKloNp\naDpYn7GynMiQaAMcwvzHUbXlzhvgg/TEY9IUP2eMKkf4SLKsu9rYVbNHGlLh\ndWvkMG7rj8f3zcaAuZDHdNr/WIqMP4337Rhy/ujacigtGnMP8XpqPa42k2Al\npsG37G4d7mn7L/1X2eIEIEhPGtc9fjjOVoqVsMBKcd1WQHoA1muqD6kKM1oA\n0AzXn4FjSR9AAGXDJnpk9UB4BtULjh7O9+q0GKCKyZ1wZJ6iXuI5YWgSaw1E\n/pDv\r\n=DEhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"58ddbf8811e44695d97b6ab8be8f7cd2a2242921","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.90_1600991336808_0.2145217465106075","host":"s3://npm-registry-packages"}},"2.1.3-unstable.94":{"name":"aws-amplify-vue","version":"2.1.3-unstable.94","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.94","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1b73d13653fc1a2eec5f44e6e06c2a4cab108bce","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.94.tgz","fileCount":47,"integrity":"sha512-4lx+3pv5CwEm2zR1fputUbawPDOAKzTL4889c0qfGsLhttG48zu0VCFnIS4MUc+vu593NQtGwRUNkCBVkJYDzw==","signatures":[{"sig":"MEYCIQCVH2XbXsBI9yE7XGVfxWpjbGQOIVqDVFPRnZnTCg+4AQIhAJuvqxxKuNL9uRN9f0vvzzsDlE3+oBvfiNMMziGMufbU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbi+7CRA9TVsSAnZWagAAjIwP/icon67QBUu0KhT8micb\nyMeg03+1ksNoK/eZU+Vr+AbpReF+WTf+j+aqlpjAbK+mSPkTm0UmkKwkIMyp\nZuUvqvMbkSNscwfeYgt1dF4IQqCcVCvpChDzn0RDLz+PEoHkWUzEmWeZyc2u\nA/BUWTRnhmRvB3jytmmypjbmCrikJfIXApj0i1yd+DOd8M4myybSIke4gA6B\nx6KxCnM3xAxo6JHMlkllsqb8QfYjyUWTnlQjp66GNHd6IGeyB+Oo06RKpuCe\n3VZZPZt1rKhcmM3oOfGH1npIUIIg5N8VkCnXilQrBsI3x51/tsivRl4kGmPn\nA4NYZ9ENF9I1tenzYgDJf/J/GLA+HXxwkLDTTtCBvG3pUYJCOwr+6PDNL/Sd\nKZNoSrvyqH/knAbF+QGNfS8rwkmkUtYdy/p3AbtzOHasR/iRyVd/bmezXH8b\nkndcwT3PR27nRZcuK0MDxGpMpb3xKsMstPax3qaGACbXBAc3MLunIUHOD6Th\n7UpETtDx5U8x2GwH8idnWmZm7TpmEV4zTFXuKioti8FIgRqxUoX1IufMBXPR\nkbEqVt119gqFsPJuY/KuR6Iqe4FcoQbx8Ap0ESZaZBcgSsNxifQpLhY3jiaf\nG40Q+dfzXejMlhoBmYsIWgRN7fz/dhHxx1LIg5Ihs/gCIakpZiyb6fOwAw+j\nd9m7\r\n=3gAp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8cc55874d0f450be3711467a5af666d1863e9d72","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.94_1601056698912_0.053109486403564166","host":"s3://npm-registry-packages"}},"2.1.3-unstable.95":{"name":"aws-amplify-vue","version":"2.1.3-unstable.95","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.95","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"e0d68e73d3f47cdbfeb3bfb82e1ad6ced642eebe","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.95.tgz","fileCount":47,"integrity":"sha512-e8VxMxrRWDu1on6pRBUHpomEoTTNGPmeOEbBVKJ6iIT7D5iYQ03NmqIRGxceS0Eyg0i4NX1cjzYYZkbexHSZ8w==","signatures":[{"sig":"MEUCIQCe+2y3O4El09E0HJuFu3C1gYyA/UGaCmIc8FqY2cGUgQIgWUaKSF/GQb2haAFAiraEtRPsOINL4+XFu/A9Pyp6nrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbzw/CRA9TVsSAnZWagAAwUkP/RahUy2jqPcfap2Gtvq9\nRdfjAjKB40dT17lrXLja4DbwU1a9U8cBdbdbkBiTqy5S1ZQx3aU2ZIUzc6tN\n/S/d0wjhtsynh//QOZXFm3rW6UkqZSwtU31+XvsDrcKZexKs8RxmKMWZ4BcV\nFbkSstGCri7zzQ8Ms27an5EMI3R94gY/cuwMD2SK+YleyDuW+zk8uQGm9o1L\n1bOXsbl32Daejb8rUvliKEuAI7FVIqnyE+bo+heHJGjV298oUrqbg+/GJMvw\nd+QEMzzmUWmBMZ653yuJQsVATHiKa+F4ajBu694wK+udJxmAo70EZiSjqGrM\nDEz+Y8nj9oea9QvdhbNEd9fwOO2tqrrN2+MgWVZ7zmfqKmifEtRU1cDx0vtc\nxRfokwFkn/cj4stvZVuj5qwjctWkQOEU5glvW7g5i032oaK088L6ZcQsjcng\nVyTjOVzCVp56xAfim2v2YX0YFfs8S+bt2/u2Z9EJIDYjaoa8aVPsYbpbaTSy\neJeJegqfIEgSamv1hQSYKJOeVgJJfE3Gi8bXmEGDDyDqoSasYsTn+We9AJdc\nOhmimXl2fEe+TYcQMTCE7QH4kN5uX/4rJ2nBtFDSysGodbPbDdpzFbOuXyZE\nsNltS4WcOMAJQAbKHO+w1S7Je0Cm0/1rYzWWiepUG0kQyT9mD0Pm0V8LrQvR\nBarT\r\n=KlDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e43e18195ca201fa61bd0dfb1b18c06c3262f825","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.95_1601125438946_0.041666894950056044","host":"s3://npm-registry-packages"}},"2.1.3-unstable.97":{"name":"aws-amplify-vue","version":"2.1.3-unstable.97","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.97","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"66890f86ced2d3f3d4676f7add649110bf571146","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.97.tgz","fileCount":47,"integrity":"sha512-7H7FWjo4hnBoSAov4KAEJ0dFjDglnyDAVwj2SZ5/pPaeHJMeC0EqOIY1zywx29zj/Pe+KTM+NMAepkLFOYPCKw==","signatures":[{"sig":"MEUCIQC/sRNGXGI6Aj83wg734p1PwnTA0m+bCf+LqcS9w6nmzgIgcsYgZykE40iZgRr81MM9vROq1ddoR+g2IrTjiww5Qws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfch9TCRA9TVsSAnZWagAA8dwP/1lwAJYmKW4vKifNPuoO\n0u35DO0vjg2aayQJcHlxM+YGmgXWJb4P+Prd8EzGSx3Q/3EhRgAfwSHDvltj\nrCLRJz0vJf1/lB7sheV0Tq9yocvQLkB/np89kGBh2B71LTMgl3M6JpsiCtJe\nDoRhYJEzIwNSgc3VhrUf61KT6spjVqwBZjfxEzgXBP4lEl0Klx0Y1rVI+knK\nyMDlMYxNK0TbqF1k2FylooKUj0bHvKb9DajLkVWHK4kJNgoo2VG4axZ6ZE9x\nf0zsSL86ib0w1y0c7+c6cimEYSvPmyb3lRY4ThZD+ccdGn4oAX6W7ELaqP1S\nvFTxbm/B2hTo6+/IHY2TbdnXjSsBDVSfHsaW7xF39pWI4Kj+GU9skH7zlSI1\n6d3hL6o8bbzqCT1wqxJDUAnQytvHRpO6hknVzex7dKE++Jcgmv+U0Sp3GNRj\n7Zvy23rIJQzJj1rUcYaM8f/Tk3nN5Z0PzA+Du+kAWcX+24DOUTmaYxaXE+sR\n+YC1JYcidDA+GnREE3bhyPt2MMWbaKG272DvML9XtKuG8w43OPj/NceBSMzB\nAirQk3iZ4DjYiLTpNaEA8yUPBZ5k1UDB6yePTId804BgoMFBazVG2nXxIHrc\nog7Kd9Z0+rScBuHBTI07yHBfF9w4dOrojbSET96YFBhMJrEnWccdngd0VtkT\n5Xz+\r\n=/Lat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a55168b0c6b794b337a5b2258fc22b5721a82e85","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.97_1601314643115_0.9019279288500861","host":"s3://npm-registry-packages"}},"2.1.3-unstable.98":{"name":"aws-amplify-vue","version":"2.1.3-unstable.98","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.98","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"37bfeec42204eb8fe4289e304e1d1e88253532ad","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.98.tgz","fileCount":47,"integrity":"sha512-dtsHj1hEzCkzFUMyhoSdE9Iz3Dt2WXShDSUgiUi/qfHiuHWfJVKkIEAo0gqyvmPn5oVTvOZlyq/wwS20WKYaxQ==","signatures":[{"sig":"MEUCIFfvwecB9kspZBnnUmiy0VSeSu0oABvJaI0y1y/+Vlu0AiEAptXlq4sXOyeAk04k5xqdF8KjLJT6hjxDHxddv4kJV8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfc65lCRA9TVsSAnZWagAA2SEP/3mfkoEZpq8EEcRHVIZT\ndoUCIg+ncTOKg8NOyG5KGKK7ZkP0f5vm4CLicADdkBd605MuHURcWxHDIIXU\nlaIc2gBhEjT6Uep6dGuw+R8ZBX4NXvC/20uVbSeJMutH7Iru0xXGdEx6gzco\n4ZR3Ak/DSswnxQNxPXB4suXkB9HqH9rmq2fV9Rm4kYj8uzwnGH30YAmwXtJZ\ni1AQ27bSU9bgPiQCRWAHTbjRmxlZOM89BiwBGLfnz/AgmQ+AqWBIZPKjKhun\nenCGzgus2jcKx4q5jsYZDXXUYE9byh9Pn8G0ZrhgpIy5oM1oGOuksg3JOrhu\n1q4cCFpAxgpsXFIV0kgtjUIKvWKtOgHSwZPRocwAfxsAGrnxIydPz/jyrz6m\n1JFIS2sPnHwKhbT68PHoPx8sAHjjnlMJccrlYyd/xrrkHuQluJFI0+Eksi5s\n5YXd1qH89/s8eazB4xJBJ7E9oipWeYvagk9cYrKEUvqZk8vAVRQsK3LwOOgP\nODWCLdIz3UnwMoUP9rtW7sBjkOixKuQ5YYQl/MKHLvQHKSd1gJY5Dql7lZGu\nQszP+QkCqc3SYUkx/Ov6r2uELKDaYL0LoP1eAxSPbjo3TebVhmX44GplxfSU\n9JmgMPP5Fkjm4+iq8uyPTRaUzy7OgF14mjrkoAxhqSLxntupe4I7Um7STcX0\nkmbJ\r\n=vdy1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"61f7478609fce7dd2f25c562aeb887d3f3db4a67","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.98_1601416805188_0.8226336664479457","host":"s3://npm-registry-packages"}},"2.1.3-unstable.99":{"name":"aws-amplify-vue","version":"2.1.3-unstable.99","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.99","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"13cd3cb5dcc7492487b34cfd80a33de9e776f2ff","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.99.tgz","fileCount":47,"integrity":"sha512-BeR1WA4rojPgorMoCIgBXez+56tFL8uxyA8dVc3lx/ECyRe2rfTwUucdPq5xq7aCAHXhr8lGGfsegRTmNhcbfA==","signatures":[{"sig":"MEUCIAazs1urz6MM0GI+nieo+GFWxIgM7W3iw4yydG79p9ixAiEA7reop2th3E5LN/IE0/p/8tTvSAO/LdBWwfBVPXKg2v8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfc7XmCRA9TVsSAnZWagAAaE4P+wd4IS/RmbrdrTFg7bwb\nSt7s0EUlno2uueq5VbKCIL2ZIg5I+u07FXXhtGCBJFx3+yiPsiGiEtJ6KLX2\n2p4ym2V4grrlIYhiMEYoQxthMUhsc5J0cdyRsAS4FxqDl0+S0qDF6H/FzQR0\nFNRbXaxX3zPGFifW3kaLVnLHawI38u7/2Y9NpaQwpfxL6iCieQMTgxQ33K0g\nROiQs8pRtMR3FGlMYQSwkMYKLPpxKHpCrieCLal64Rn+cH2GTEW/gmurMQSb\neEkIhkbvLqmlgLYmvQq64sSP5iT7PkOmCKoDbSYVVZUhIjfeJXPpQ5lNBDhc\n6A0ih/tTh7adctyllqC07SYOlF2kDwc/B2bLXXkl+xQGOS4KZbsM8Hib7hoP\nKWng9u8Rkr+JwWcNDzWoNlrVHHFK1YuoxcZIJ5N2xm42bVED7+iqg+OeBowW\nsQS8wTJOMIq3rDDperY5GE7ipc65akDsMTTP9Ch7NaHf8f1PAHdOZmnRwbM4\nMWrK7i/erAR1ZCw/fqp8ExHTzWoEtQXrVpuYG3wdQSzZvkdIgdwscI7uhUi4\npzHp+zzNR0ejiYIuwsCfJD8NH3Db7iAHUzNrTdW7w/mo6RnwmVEctw+bqxCE\n0egM6fyo5MrGQp+stzkB8LWwgdQd9/+NOS0MRRvI8Ra4raXpSEWNDINCv/4C\nqaPB\r\n=7RZx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d2f4bca73efda7375cf5f33bcffef88938f6c803","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.99_1601418725742_0.7882096484034813","host":"s3://npm-registry-packages"}},"2.1.3-unstable.100":{"name":"aws-amplify-vue","version":"2.1.3-unstable.100","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.100","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"970b0f85fa0ec747c92163b6fcbeb662a35f0331","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.100.tgz","fileCount":47,"integrity":"sha512-fWEazDymhhnlh+FXLPNxdAApOmYOCTNIFj/PaPj0NcwSVzs6SVOzMMWTdFZXGjTIIUNb2ZuyhRvHowTsm2xBGA==","signatures":[{"sig":"MEUCIBYWZG+RTrv92A79w4WxqS1cPJCzbhGWQCZR9YfUs5raAiEAys2GEkYlhmSHpeoOq28yNa+J1FJc8EBNoZG/O7CUKLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdNK2CRA9TVsSAnZWagAAT/gP/0Zot8ZzAUmxGuNv1jDu\nZW5ZZDFj54L6uTaTzisTWIIv3M2zqUCwgKGHJsliLKjbMANLeiBEjFyW95ay\n/2HODykilhEOgkpHiwNKXGErT5FEtsiP3Z34DWYNgpiVy1pg3nXapBc0jKF+\nxnHBiSoNkNrBspq1zs1F9vQTR/J4EVUgyWQ5qK53Z6lt/iOyHJ/ATX8PIGXR\n7tNzGAY4YStd7wF70n4kqT+O30oU8yVOqDqVLllpxudslWWzCBIEPrkvFn3W\nWGKqVChFIy2mJfhm0xuESbT4f4amUIndMXSET+BnmQBM1PIe/o2EWuZhbB/P\nY3TyP/wPVNfSvHS+iDwsNUyFIgjLeF8UVfaP/9592Kczjh/RG+ukLsJQYDG+\ngXHTUcW5JfeoEXw5SdJx/cwMjyp2XxkFoe0Ds2xSLNCwefhT2k2t6Ubyjhi2\nJTZtSyvWxUQypK2OxkX1BzLBTTmJYwbt5Zw0gVnJM/bMFE79GFjNsFER/zKH\nbP8xtSBiFJuUxQ5viyGX4LZLwGx8/ACMaJ11g5uSdW5ovlXif/+UXpyu9U+W\nGF6QD40khjnBcmW3Y8I6QGt1FAQdiUNwQqMfFDqZq1SlfSkFkPGgQd7OPMI3\nkkzDo5Yco5F34fOqBfgI1vE4jQThd37qrq/tah7fUXfLVJZwixjCPrn66Pws\n2aak\r\n=y1WW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"880e1da9d85b1caa3992bc7b4b6ace1a32eee525","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v13.13.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"13.13.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.100_1601491638321_0.8255892578765989","host":"s3://npm-registry-packages"}},"2.1.3-unstable.101":{"name":"aws-amplify-vue","version":"2.1.3-unstable.101","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.101","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"d16f6b20262f7927cc99bcbcaf06352ade119b0f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.101.tgz","fileCount":47,"integrity":"sha512-ANzK1MbOaflFzj3V/fkAoCa2gMOzuYOc2k0gP18npLW+1ra14tRFfp+gX4ne2XYq6vK3wWyshE01OAXY/mQqBA==","signatures":[{"sig":"MEQCIEkuFxCuDoDLwFHPOW6gRCCWYgYfzqrprUJKOb9GmbbFAiBHbXX2x0hlrG8LNhFLf5pqMNH4LyQ+d4AN/RJaNU8Olg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdf/wCRA9TVsSAnZWagAAnzcP/id9pDdQEz+n7fl6+9gT\n4QJDoJ2UphIvoGqEJZ2t7sIiCi+tvXVIVo1J6A20lU/2lzt4ASxWaaUur5Tw\nJ/WXACnRRbZexAfBsJRATq9UI7bFhKfpvPIrTVZzuu+1UMluEv9M3lvx5RhL\nt0fQm8/wJYdPtC8cP+nOuplsgHc19kqtEUgSJWR2eczMuoFHUdQBa6pl9Blx\nTIoZ3Ecu/Od6NjeWmD9C317TS0n/u4LkJJ9XoR/kJYV2bwir/Eg+nHDIhGUr\nnbrqYkm6N2NP3oRzQzvqCwFp5Dw8EkRSANkeiRVGPt/7SKzDlKfQf1U3GKEy\nilFvUcScbZ/aset2E0LzVOQkG/9Wr/wx/PBekS00I0Cfnac8THbgAhcUtqdM\nRJRG/WOU2hN569oxy+93NeL5E+yhB9FnXJFx+jqQ7nTATmuxW2sfju0ASglv\nM4c9n7skczHV5or+GIe77XA3s36ETJ1ViRlia8XrpLsbOnvOo95uqEF5X/LI\nPCjDAXKlJ7vB/gHR+BdGkMtjoKD2aR62rvkPw+HaO1lq7maBNMZ8sLAdIrId\nN8nzW1jXN4vx+Z0A5LCFe+w4JbeaIMmhcN44LOdnwsM0ZrCU7SYrjhHEiqGq\nTuIruDy0JiwfIpDqnmv/IX0+DQHn21NYh6i6GG2T2ARU3j0uV5sIIK/JdFzU\nmAVI\r\n=UMFC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"16aaa057dd6221ca1dea47263a740263358d8519","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.101_1601568751512_0.7568048455190082","host":"s3://npm-registry-packages"}},"2.1.3-unstable.103":{"name":"aws-amplify-vue","version":"2.1.3-unstable.103","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.103","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"b859891f660f4257445e01036eeb6a5dd53b2015","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.103.tgz","fileCount":47,"integrity":"sha512-jzGtVPfptqD9NFTG83Za+twI2eBVNkn8FSwpPPbNzqySVJNjhGWYBQujhBcXZydkiJD8yxr06c24Xw21EB+BbQ==","signatures":[{"sig":"MEQCIFJu+oFqvQShKxiRPt708N6UFL3ykfIwRmhwnCpNWKktAiAvMmYefUA3vUvAOO4DCrSVJhEfChD+JAXUHE4kR1qhyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdlk9CRA9TVsSAnZWagAA9f0P/09Gff1ZLzNLyyz3u4Qp\nV2ra5PpgKMC/RcOlEIor9AEgJuGy+UxhI5URF0gBwHB0T5M1IyMAKitiuTg1\ncehV/69c5xR/hnq2Mmf46wVVPyYgF9uccZHzugxHKwkBr9Oy940oCSC9Z94D\nThrNWLpQFW5ovTQpi8pGZnrqshn/F1YhAafVp9ja+d8l3JrG0POxQEv9BySa\nMiJedYbXmX+CFHf8k6ybymJOreu88ceUw0AX3X2AYVp/DURvHh3LJziVxrAp\nXMrq9MUy3m7mx3sZE24F5sDnX+7FCxxQmjNCEcvHOLSZocQP4Kd0wDQ7muL4\n8KICg+pyMOx0rrgrP+pzFtyoI9iUbjtmIMVi2lEq83SWDxMGJgkazas78NXN\nODFRqi8RpSngqNnP6HJMOJz23e/8KOZiUvyLM4fqjBcQRsFlKh9QwuNxzEQ3\ngI2eIqwM/2veNBqCPr/aAbpnD0nl+DLVTBl5RGHN4kdEneG8EJu/UOvqFVUh\nYBwJUtCJKVAqwCPncLwH9hRlgRa445ZesW6fdQ7LlYWRnqdA7rvrPXI0RBzU\njuBE+ii3xEaJTaiytbnHuG6FIgi3d4pV+jg6Ir96QgoMrRlpwXzDNEQ9kTXg\nIUF8ANuNtVUXF2n/ijWYMMecLgbLPHNq1tPxf2MhEQn/6LrxEZ5oBNB7H1Qq\nTVMT\r\n=xa8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6996f099714c08086b13e2bf962bef8b4d593c28","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.103_1601591611434_0.9202621023944235","host":"s3://npm-registry-packages"}},"2.1.3-unstable.107":{"name":"aws-amplify-vue","version":"2.1.3-unstable.107","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.107","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"fef0aabce38f50548c1379cfb35c79662121a6b9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.107.tgz","fileCount":47,"integrity":"sha512-jJTQZSuw+VFsJ/ZDB/YxKc8FneyLzOPNrCYpH2IHZHAD7PXUlViKl/AXH5lFpcBoiVEFeCf+bjWgLx/6KWf6Jw==","signatures":[{"sig":"MEUCIQDRipGWcw5uyGf9BaiDET0kbb6TEYolgLV2fgQwYAdEigIgIZKQsncC9A2Tyti9HmcBMLfaf14zJcRQe80XfFhk3OA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd5+3CRA9TVsSAnZWagAAdYcP/2rnxl1xYBbtnjmItMoI\nQSFqdZzSiEtvQsVfIreKuxIpjaoq5Z3/iP2JbcpfBHkecI+/a/rPc/fi9JXj\nH/h7+65Ewz9tV+BLRkMr2zzRESopnetUf0LCfRBXLad3r5KHDBQWFBP2DDq9\nYSidHW+jexF0mV+vEf5ImrsNo+5503trOL9/w+n2I+Ivbp8AM1Z56Jir5IYA\n4IhJUWgnn9r3OUhzM9PmESYjPkKUZ7/cF8DWNpxEUxtfTCpdmG7rXuiwcF3y\nahI9C+bXxaSC88NTL0HBgSZXW0pJI49nnqXmPIQ5lz2fyFzpZfebAJCxnSpL\nAYG0xkqlLcj2/NNxa/Lq2jew+k4pH5GcYtJuhm5dhe+173v+1/l7uBazltXs\nXi/QD3NeoaNo9dZv/X2G7SiEeLhXJ5BD1dssCvZvGxKM/MNK3JDZ+QveTuFy\nvIwtre8RaVr4H4NfvQ8Kx6dkU7CM3oj+n6VpRBHKeXeAZokB83uNssd8/G2G\nsB+xMyB22b3cYNOdqMUeuyUBLnV7WBiLgF4WwtLGndARSmAmPXGfMcPwZ/2M\nk/fg8o4qHArkDyGW2ZqK7fBUnzFBNTJdpQc6dN27JPyCka/j1Po7HmTZrJnV\nernQDRaVAGDMihQvu+cvXQksu0I6Lmd5SNp+Hnq5qjNK4oPVmW8Ic022h3br\nbUKJ\r\n=ZWHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"53be43d7a0049e04a47e7fece5dcd726c7a414fe","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.107_1601675190706_0.39095468065724637","host":"s3://npm-registry-packages"}},"2.1.3-unstable.108":{"name":"aws-amplify-vue","version":"2.1.3-unstable.108","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.108","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"2722e9d495c2380f664ee10d13d83f0194f94476","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.108.tgz","fileCount":47,"integrity":"sha512-TY1feD7BQbWtqvOTzJX4lFFgG92pVhhXw9nlcu7ue+nCIfPDoffdlP7iXRFtWAJXF7S+G0GpxmhPCHNNYsHtww==","signatures":[{"sig":"MEUCIQCfhsV4RDmkSt3ZLbHwRRAvthdhh/8h1aUI2pOLKalYfgIgDRLGRa+zYwsMbG29O7nBl8y50h4LyZvBMy/3y1QP2J8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5gsCRA9TVsSAnZWagAAHtkQAJT7hQkg8StdDoizlT4M\nZvDCJ0NWQbSbF1jXPjpJ8C/KO6kpGkl6Uip73v+MaE9xksnJVdcrGQDcXgb2\nM1g2Oif/zTbehRvXmg8sbGkAX4qXX0LDoorgZ73e9qaUoqz3zha5uAQsBGtb\nGpwarJXB7g1zRZZLyrrBQ3IcSGWhs+NGuI812ziXw3ZSex2q6fSxjBZvkhlV\n20nBsz4klkoPQiwjsNvvqP3I0paIbDiRW9ANzUr5xW4IaQhG83iDIVQ2DnNN\n2+ZPJCt2JmT2oSEtRih0tbKmAQT9P6d8an3MUPALgXu0H4EScW4s0baBUWkq\nfyt2qXPhaF/XBoe9xqbnC67bmRtiMCF2LQpo0fqR/XG0hmsbwrUAyIW6ktjG\nFTh6jyrartJEz4QqmXwEMdq8/a83qsHapjTeAzJ04giA8nmqTPKlwYUiOBsg\nbz8IFwBpK2F7MVSnnhqQj0/FVwc8AZynw81E9NYMKKGY+KqXY3SHevpO6o/D\nsBzn55OJ9uD62zUJwS4znbWA0P+IykkX5E4Mg2HROHKjShCj8Pmbyu69RBlX\nDMWLxVfKk08i6GSQYlanfxDWHcQmaEg2cePqzYW/YTEzVlbOZM723JSqwbH7\ntjXOa1RPRBOHdcZpwQuNZ8qf2lqprdSxfpFmwF46D1lsNsd5BxZ8xmczRe4Q\noZVj\r\n=9j6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e1d122bec0fb67eab0a696ee6e0ffa976631e4f0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.108_1602197548245_0.28886430695472165","host":"s3://npm-registry-packages"}},"2.1.3-unstable.109":{"name":"aws-amplify-vue","version":"2.1.3-unstable.109","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.109","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"27447d9632c525200f17263d43524ebd25c3468c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.109.tgz","fileCount":47,"integrity":"sha512-bJ3K4bK4ECO3CK3U7wxULrhzvExDOE8FdlqyrVo/RAErTu0R8pzpLeOGXYI7nuuUkfgPWkgpmXi1kx07mYt8Jw==","signatures":[{"sig":"MEQCIDxvzezs3BmuPTI/Q25/AnrXTWmojviIy/PGFlLCiZOYAiAvXRJQ7iN+mpFypkzAORMdtW/Je3Ai+oiqhJtumEmMjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNHDCRA9TVsSAnZWagAAZ1MP/0Pdz9z6KxmtJjh0x5zD\ngeWmsaklui7OLVWxvvpqR+qFNic60SOZRX4fpO/iqeyC3RBl+52tJZY1i3AC\nIGxaFBOMqq8l+DoyFHOhg6gSmLavHnQWZkMRK7utfqVkG4g9zWtNo3WFEqvO\nfaGxC5Xgtlox0XpJNEIJiW6zRWR5tHxhscG8flBfdMJpHi93aKDO7Q4s0fo1\nnxvjA7lr448HN5Dugewsup+f3WnT1w83oXDFAdhUTa2xKEldPNAbHU45uwMS\nkPaiM3/h4EYhcy+VQjkMQo9TM6ge5qJvNseGZFUJh1sDwnpIDQrPa7HaioLQ\nglGk2sgW5YZghCrcEvVH/CarWr0VLEZsfXv0xBaRzSXFnKfV64U9lh1GDYPe\nO2j7DP+Z/n/mzqhVsa7Ng1jtKLZU8UwMHmk1+7IZLC17rTmMovAurfYTH+z/\nQijgaL8VLhACBoTGYxpTDlVajGWV4vtgRvpkfIN1SxG36zC/aGa2TH0vFnnZ\nB2wvnbWhm5CpKYaYCVAYraP85AfaMzo9DKrzS5yq3oBfEtJYW5lBDc+RUmWG\n9Owxm6A98wvzvYCo1VqTi0VjlEe8jcQdYOE4a8+V48jnxU0h4428TS3czy4M\nAIp+s0HB4Jsy3WZK532jW6aP+lD+8jZCfyD8Q3hKrCfabguFUJYC5Kz5816q\ne7Fb\r\n=G+a2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"204421ae72f38e76fce22b60a247c662073eff32","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.109_1602539970920_0.4805501750675887","host":"s3://npm-registry-packages"}},"2.1.3-unstable.110":{"name":"aws-amplify-vue","version":"2.1.3-unstable.110","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.110","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1729153fd8ba3af1654e1d0650e2044b8882518c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.110.tgz","fileCount":47,"integrity":"sha512-iM0HDJjcT8ZyP0WI4AtBujpkXTZMcg9DOsU4v7tdfAsQVgD6vjMLASI5yw9V8Z54WPTKvnF2gVanGYBQsvfGIA==","signatures":[{"sig":"MEUCIQC/lMWdvR5IDlUoWzkTYnymCVkm3K/Sr0yVQRHPFrvfRAIgeVDHQu9aj2U9Kmne3vnaJVbWUyCD9T6fDT332UZsy9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhOudCRA9TVsSAnZWagAAd/YP/ipUiJTJAzSCmiyGpA2K\nbV9t+J1DETKTqfBTa76DWNLlDy3n2ZqVy9oMrpzwIHuCSNfarU0B8aP1Dkyo\n28U6/AX3EX2GM1nDkLiFTqmnI/+zzb+/xfhrQ7MzOMD0GAbvWLgP8rCoPZqL\nYAdHkVzwJvS7hjQUqjCyx/c5LhOecFG79gnedAneQg96C8aIzC63HjIzkOiK\n12mcJnIOLvJnpGmgpDb2Eecz61gCH2eueTSVr9JJlQ7vnFVYhN8DZfDEH837\nvpNo1/p2DrzD/HL6GtLQjdjzAv8RZZsHt+QT7kIeZ9wXbwduDED26OcBG8vn\n5Og20EfacJ2bShTyYrcj2Jii1EA2IEHXk0aJbpzZ2D00JHMl5Au64raGxsKd\nZxSU1Rl4tNVQ6b+54GPlabfMcR8WQXSngAYBMpSWLIF2PpneOPzgfOoE5ivJ\nk1ls+pFAPoRrZk4tYbJJI9A617GyTLWg32uL544DZ63DIM0KwqZMorC3n9yz\ne0MXMJ/ZPGMJTtVcrOvtf/osiXmKyEI1oLAJ+RDJZvz3cat37+FQbY3oI2//\nRwDbBq8GQJqHtWqrpTvB1ubJ9wV8/zxfML7Pu0pkzvs6c6ll9/71QWfF4e+/\nvSiGuU0RMCeT8iTfxGTJ21CwofvB5w3v9pZpGgWOYUghs9qc6VSYzfnVLqkW\nMDkQ\r\n=aSJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fe328ee037fd75196df8df1d18b6977a46dbeb1d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.110_1602546588646_0.35980999976521333","host":"s3://npm-registry-packages"}},"2.1.3-unstable.111":{"name":"aws-amplify-vue","version":"2.1.3-unstable.111","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.111","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"221288b2733b33973d7c465a6bdbbf669b21b021","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.111.tgz","fileCount":47,"integrity":"sha512-ygiM56Fg7UiD2Gu2oTONtTEM046ijhDyC2K+FBVhWFPofg/lruYAULm/cF82fq3W641AWHhvXbF3mhlk33qKdg==","signatures":[{"sig":"MEUCIQCMH2PerWtkcz9HqY8NNJq2PYT/p8AZ4+XeqE1+iEoanAIgGZJxynneP81tYkZ2dki/eJTKeFcHk8vFoXtS1aqlcmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhQjNCRA9TVsSAnZWagAAxX0P/3OdgriCy4uYKYpeQ33z\nBTv3SnlaRDpA2zhDrgl1kpCckaybEzg+vjbpgN06QRzq+ibYWIMRSloc/2h5\nMC3gvGS8vfQUJJlG8FswCgKNzl2Ecrdvi2tb27nHj1daeo6fmqIGfv+U1Nh3\nzcOsjwPeGmLloFj3zyNPVckRquAQHa3eOO2mUh5kepoUHo+03iHlBAYBDHcl\npdmS8hCiOUVriOqg1WeI+i6KQCPTcykPKhXSSWeG2xWfzlW2+pZmNqGRQ4TJ\nV+Ds6LR3SC7FWcu8wfqjHZhLq/j2atbvnuFW5rPC5fXT8wpra74Q3+w4EGvB\nCTc/YXssV5wp2aBbq2JhF0ZLZW2P6C75qhSPS0EZBL0EpWk463IaAB4kZjpj\nDnYVV4w+bD7v+OWW5mTvrXivhFgtnF+cthW1XMk38ss9s2jQEU7/bdLdZzsI\nQm1jZ4osL/pA4fqyakeSAjKzzK5Tp6EjMnVAusgC581tyXqw74u7OZDb8qlR\nFJ4FZlvImw0ivFr0ffkOTfd251+Eq0pskeZX0HNr2oBYR57l/AYYXmXwxAgO\nZUZgBZRE3pRtt4g7M4wm/zAFFnVg98rgypq2ceEagNfcqDG6y7UdO9s2SdgK\n+4E3QtKIEnEkObh8e3OhreMrfiukD8CTpORJC6yYYcuwi7KB1OXubc8GzEVe\nDpeF\r\n=n5L8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ebb20c1c970eea5dc32288f4dfda9c2cc959ac10","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.111_1602554061175_0.9638471121550769","host":"s3://npm-registry-packages"}},"2.1.3-unstable.112":{"name":"aws-amplify-vue","version":"2.1.3-unstable.112","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.112","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"805e6d41e87582926093389194cc8682a3cd39ae","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.112.tgz","fileCount":47,"integrity":"sha512-7gVZYqDyZ94HLwjjWLh0NCkFkG1+Djy+Dz7e5ED0Ljt29YC2cQ9CDkqmpnR2mAvKfjOQRJMIz41akeewDkjQSQ==","signatures":[{"sig":"MEUCIQDjbR04Pcxxa933wg9IF5OOfvWTNI04H0yYYic4RLf+egIgEBWl8KjPbIcXza7nYAVVoZ/3q5NaGJGuM/SsxFvoDOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhRTFCRA9TVsSAnZWagAAlGEP/1fKeQPuktc6543N6Ptn\nMQ5BtcxD0FMefdjKFIFK+oBiChktpKlwn4XtasE32VztYBMU0DR99czi7kBH\na+iFUdYCZCTgRMG6j9FB/2HXDUtez9M0kQe+bWEtYrLXJqb65ojqm9/XkUV4\nzpurc0glpkyRJVGVDpa9P2hIpYmGHn15Hrqopvn8/8+U226zAt0M+h1qKhSI\nq0IS+RvVsnWLF6AdCACJ5xT7RPjwl1/LPIbxKay3DlFIPL/Tfx+E9SiLlcPS\nTa3CfVz7JFj6/2Ur6awe+aEUDm9Mq7AU8mz7dzQvZTtwbPxq+xSotk9mLbTC\ncQ7sFbfbMaiF7pbSO3Qx+5hHK1pQMYyN7MkTYEVVSJ0fzjyMW7KwwtB1Gs4B\nDfd7kMfQz+5tiUblD+u8RgE3AudUpl4vylT/ghfaP6wZsfJ8G2L8IGa0L/X9\nQlSEzB5zjNNFXAI2lkWR8smlXEhyi8BJZ/GwuuJECaGTlSHouWSLE6LN7YB8\nYeyceVjU9dDoSV7ZSxS8nIoLk8Ya3B2n6P6s1SIPIgtj5Mb5851chMwCb+/C\ndqfDCz7fVqJiERULtOXTW0Or2Hdr20WVY8G0FZdaw+PxGw8CLVqva79+5w/U\njR7bX+2reLnrfjJ7M3JglZzeibY3k/TNERIrmS0JcV27Qod+Jtc3kdLyWsPi\ns+y0\r\n=BpOH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"73b34c98e35a7b812cbb3c79336b73e3b5c585b8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.112_1602557124489_0.07621941548102762","host":"s3://npm-registry-packages"}},"2.1.3-unstable.114":{"name":"aws-amplify-vue","version":"2.1.3-unstable.114","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.114","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"7037ed86954fb0874cf55f0eb5ec847840a2df20","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.114.tgz","fileCount":47,"integrity":"sha512-3LKXExA9Z0fzo6qeu9PF007wpyWkJUl9HdsP+1Q+odKriHx46xHcuTkPOuP2rdIm1awtMY2claOTIMW1fmpQ4w==","signatures":[{"sig":"MEUCICkeMVJOyVngpxDiFoWHQtnGnNEAjTMSyc4zLtglqSOPAiEAu+zsd21nozx7OnDYIFmJ+R4dKZeCZgvRrMM/fAnZt/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2966196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhkpiCRA9TVsSAnZWagAAjJ4QAIPJQ/q59pRhDgGsMWIc\nUPO67QPKPloLDKdMCff6EDMG5PGfO1UgwM+AQ0z6cfDT4diZAUHddxZXTlRM\nNANvDDOuIK3Tm6Vt0J+xZMisX7+om+Sxdr3EbpYCzaIgtnvpojbR4SgGyt7j\npAWG6p9K8OcVl1edZNOCCVtTKRdy2PCZbReEW7AVC6nn97M027IYS74bVDY3\nX9m0NHcuS1ckJ/WlT22zjkyirqClJz3mWmfB+RqHqFCG8BiGF6Hzau6DtuW5\nC1rbYaDA4YpWgnFfJL+UbeQ9EJBUyGxh6/MWOmf6Zrfu2nNeYp4WMA7zghsG\nb8tmaSvEgQPCHn7ASKS9bFQyb+RqIajevj4u1S977Fglz5JsVYs5Z0SqR9fj\n7PaU3zUp9jOKprmem+ZMQ8vqq94EHl2GtZPY4TtXxV4DO/vWasuyIcjLwnUS\n2M526QP4vlpm7bRf7d9IhbdG+IEqLbMN3EKM9nr2nsT3mgi4j2ByGbT9/AN8\nHAbFVfkjiFez2ZWOp8XuACYJhjxMfUazFSNSbj1B6TTLl3JhQqasRO9YucUr\n5dSaw4ca4FgSZj8i4B+GCqJ+d34cGYPcfRduvBSA3l136Ca1eg/x8cK2FKus\nhGegCYE6Tu9IRmSoqXgp4TnENNBFQF59/IebGIcw085Srvj7rqTqu9csdKBK\nMHdK\r\n=haRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2f74c6b74d38af570017139f2ba8269dc1009135","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.114_1602636385952_0.059967897600396336","host":"s3://npm-registry-packages"}},"2.1.3-unstable.116":{"name":"aws-amplify-vue","version":"2.1.3-unstable.116","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.116","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"8e33c88decc80a571cc068cb2f05be8d3d8f8070","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.116.tgz","fileCount":47,"integrity":"sha512-EYa9ND4tKPTvHKLtchqK0PMdPymch4h3+/DFhSiEEA7bNK4i61qFcTw5UfqeYBSWGiHc8hcb+qyuJ+vPfl5zFA==","signatures":[{"sig":"MEQCIE1OLqwAJPh/bVIdvqewv4ogpVP9T7wkkOchqIzbn4jpAiA221I2S/Jk5M6WZdrMrgx5nfrkQdUBSCqoAT6Se3puZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiLSoCRA9TVsSAnZWagAA4VsQAIE702V0bbcp51taBJUd\nZkcfHOk4HB6BksJbDqH78TQdIjfWra15Ogq5kIIZMtdTQYprq/hD7/tvBaeW\nFHEvu9tA3v/5A3JDBnXdsVf1iUqVIgWIyFVQ2xhlTRp5e2Z3oLb1tZ3tPDos\nFXIMFGF3RyuG+lonX+C4MmXfcSTd9+W+Tkrr9j6gajN+vmlYNh0egaPftfEy\ngTAn+QcLlxUNdyVT/OUABmdGsI4XscYEbPvaraNavecmh1ZVN5eVjQeOHNgS\nibhMWUoh212yqxPk1JxdsBhOFPb9kvPYzMeOU+FVL6FjPOP/5npKvSlD7T8A\nj94oj2+uBIY4llKcuEDDZZ3eCKH+NyM8WXfND3FdLfJIPQiYDC/AMyxn65bh\nrylS5IzCppIz2HQUJxt6ApwNIBgfoKkFlRTMe8sZJU3Jj2rwHigG7+ec9bbu\nS+Tfv/oLJnOL3XfSBP1qWcuChGcXZpDZ98nXWIuEbLH4Zh/PpBDaqgllNw8N\nv++f6iU7fKCUm1TusMIYuBJ8E3eHCxlh6qoU/y/a/oqTjaIZYUWWgcWzQA4d\n1Fo8axpdgYG8D2bJ/EoQbrMhHbcH9PN/3Ah+7O9uAwy2wiPDTKwtuv/PFihK\nAgS3WZphDhe5zc84oNgpwO1GQegAUuj8bgZWkwi8Eo54Cu11RzqWPLMsg2DX\nxC74\r\n=o9SE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"25ed28ef12ba65616537e751f16b466d523c4166","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.116_1602794663505_0.35339859419563213","host":"s3://npm-registry-packages"}},"2.1.3-unstable.115":{"name":"aws-amplify-vue","version":"2.1.3-unstable.115","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.115","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"7238a6e61989e12709d5ff6566cb79e350fe2cb0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.115.tgz","fileCount":47,"integrity":"sha512-Ounib7YERzROIx8pW1d9y2wd3HaurKkbbiuv2AbKcFWISImKsHiLQDnxsOHfUfeFAy51bA/C4p61Ks2oi9X9vg==","signatures":[{"sig":"MEYCIQDuD/27zdJn82DdoNPuBAeb5GDJZsicArKKMMRsywMMQwIhAJrM/oJRFZsTPMph+yxV/d68jdh7UvZZPxpQ4L5UpVvh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiLS/CRA9TVsSAnZWagAA/RIP/3ppFbDQPZTSgUf2E3+R\n6U1oo8O5+3E7f58D033bIQKxGRz2E+0AXZF4mVuQ/uw9B4yl8geLRLik0Xid\nNVsbd1Mdwu/5bhwkgN+A+7Rmcp+wQeiH2wKrzGY5CDOZjmVgTFfEEktXZK5v\nFn0sI3Hp1TZAU0mHUqjzBYcW8whV7rWLLVgkUEBwa3ZMrDX2fu2kaP4TEquo\nNvg6j3ylgUowDKk94LZ93aAJMTNVpm5AdVXlM234RejopzaDkMzYctky37vx\nLuxex9+voC5944NjDLWHRV3fcNasPteaAEqJO5nHrvvc6LpC1Etu7GyTvqq/\nJNcxFE9xzCuG5Kugtjmb3nRrzwmR6vqEdLOCoRS/iZkFqVKSxl/kXJsKxLOg\nK1yv7xVyCMocCPe5kYaLad0OEhigqJlrkWykXy5K5gQbXj7qMfIH+KnV6Hmw\nHLrBzXSuVLG8MiY7nT34LWlmntZ7802IMII34USo+wsSXu4u6reTalvtN+5H\nO1v+c1b0sHXOkxcrHmnkrVcWvuDlpNtx4ncNNmBPsupZQ1kZIqLW8RP0PZ4/\nw9LP20DXpxMyCPmt7vC9xS2zNZPEjwi4nwfiXK4MM6a0rLH+zIaicvDq/ZPi\nd/xoPnhNTnDDH2ausl2C/QDfnpht//ijcPjGpAae8W/c84SLU5myY8XQwolp\nxagd\r\n=FIg1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"14478e07559289e9d677b185503161e84686422e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.115_1602794686720_0.4678176160934644","host":"s3://npm-registry-packages"}},"2.1.3-unstable.117":{"name":"aws-amplify-vue","version":"2.1.3-unstable.117","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.117","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"6da2577a5112c4d1f84641c8a8c694bd6a0d14be","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.117.tgz","fileCount":47,"integrity":"sha512-wbmw5DEBwZHbDtM6bNPXbS7RXfhNaqO+y0aspK0p+KruYryFT3ddChAIkfW8cY2fnAVf4lurHsGWL78v8VpXqw==","signatures":[{"sig":"MEUCIHsMsCAE9SN0e7Nae+RT+Y20xWMP4S++HR+WgfSluB/YAiEAptEvhHSAv/mKrWi5iTVjhdHPXj1PPHZLzbs5G3KO2vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiMukCRA9TVsSAnZWagAAoP8P/0eleMRv5CklNwJvTwBV\nag5Z/sbJkXNzfw+1pnXK3KOrzwElDLa+5oeoul6eFw0eBwuaSssZVMKuhxGZ\nanC34fkvjJSrzFqt+IzMuHIIiZc4wzkWZiuPr6dizfLtu/4iawYZi1r7MelF\nlVOBfuV7RcBfwAZraZWJkWmM3bC1Aat3sIJL92KM5NrLQHz/fBMQCmZBOHHq\nccxTUTjPi9ipLSDtnSi1kJKLFVNGV0XZFc3Op0p97iVRw+jVA0o8A/+xVuEF\nWwFDoSWy/1FjwgGZ4Z43h1mYYHIUsE/d7EjsWv8kW0CrYQl5bO6GHWlIvnE6\nCLi0vFGx1gcw8wgkGLc5k1WznVaign+4BNMhn5X0upchKXJUslMgqSXMq5P3\nS3wEG1305W6b0FYS1FNQyw5lQj/IZ0ZBh33npOafEw/7amLqquVYX5k1PgK9\ntfSknN7ogC9m53wZM6C6lp2GzhVAcDKi+YnHQFaqwWVY+/OD3d13N6Sq+iSh\n456ETl4Vgj4KNYfBsLy9JNHWLR1s6YYWBdZPlFjv71IjX4gOUYNo10YN5g0p\n0Ctl/p5vj1g3d8JfrPwgYZz033c8NKTf0l/FWhFckSl0PQpweO16TKi02bY5\ndlRubFNkeNmaDxqdutJ3f16RwzCwRWCqK7qD0z57wgqgNfRCKYmM42jF/XgO\nmX6+\r\n=vLHF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"620cc0ca47a3dcb840bdfb3d62f2667a749e3a02","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.117_1602800547877_0.1889974308110498","host":"s3://npm-registry-packages"}},"2.1.3-unstable.102":{"name":"aws-amplify-vue","version":"2.1.3-unstable.102","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.102","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"725f5dc35adcccf5b563162b28b3ba5cfcd34ea9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.102.tgz","fileCount":47,"integrity":"sha512-KWLavlE7qdqg42+mGhXCK57IKoqZfOGaDucNAOayDU5lD1In3fzoRotOme+4wlBf6VwXJeKg2oKySd9DOqhqHw==","signatures":[{"sig":"MEUCIHj/Bqh33TyMvnxgZBPX0rkg5q0l1UA/z3Y3+DXVMVE5AiEA+66u/rulPaF/aAApXDEsAUBktSrSH8x1s4mfk7LAaOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiQhgCRA9TVsSAnZWagAAKOYP/0KLnzebN36dQwgBvkqv\nwcygiL6eU4ETHfGh+Wa/6m6GEZgFu1RO1z/TCDpTxzRY/htQiJMH+J+0FYAS\nUWLsZqeegOCs6Vk6k8CMJiYrRkz/NCaNmZgxNwf0mSTH0hDKNPVBPw3ydGHa\njMgt6DcATY7QAlyeXagKbK6pZT06Cw5D4uKgEXE1+X3F2p3ojHXdwwy8GoeI\nT/ZyFvYX5MI3kDnUB5I2PTsODrhax2L+uwliEoWu/EumE8IfI7mmd6JGJgH0\nPcmJDnNDyCvPwgQi2uS/nD+kpx0emb2k+at+fiSJVo3Nl2BuhhIdJ6NtvdW+\n5DNkiFfbOFhUIb38WvPu4LqDxaQaTEmKRoaPCcvudvu+EBVAJmKs7NYcEOlH\nQDP8LxW1U+3Rhol6/OnF5CIPjTbwaIVokbbGcYElKOcGTAohMu3I9nJl4Fnu\nJqNHKPdplztqPuzwZv+GWj7G28TPhKFCKj/Ml/uiU7cYQtI5sIgiuOpOBkdH\n4211EaNnYaMVcAyYT7VFXSssq7vXDXqnLMao0PhUFBX6QM5+7W7KoH+epwWv\nqGoUUQmypvfe0RMQ38okelzCUlF1ApVDk3vKSVTAwvNzcsEXmFK4Zq4swxu1\nSe6QuMq6Ubs1w6EMDC5NWUtsz5SpRwJ331zKhpw5HgzDqQhpkB7QU2xk7+6V\niSxj\r\n=+C4h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"401da2572a96febc7983168989221baba99ea448","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.102_1602816095555_0.9933594039025546","host":"s3://npm-registry-packages"}},"2.1.3-unstable.124":{"name":"aws-amplify-vue","version":"2.1.3-unstable.124","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.124","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"730dba2d8cf533304cf5f88407ba0765ecc55d3d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.124.tgz","fileCount":47,"integrity":"sha512-iWR6f5tcuBYwKYCCM366Ks6kw+8SjBg6SkABClIc4yJBjRQ6hxgaHlLfFhpEyEH6h6CXJSXWg9vHP8GhnUnr8Q==","signatures":[{"sig":"MEQCIFbVIMy/Oan1Mw8jhfKiCAN+uJK9RQ0Jxk0hQU1Qn0MrAiBg0K85MZkglcJkPfnz+wkME74BcTXcaIuI9M3onnHFvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjjV6CRA9TVsSAnZWagAAUdYP/i0GTO+f4V4J/B5T8pv6\nM0aKb+dHEJFxr7bmFThZtkgubYiEyu8xR7O3YO6SGhZVBcVpsQenjl4oVXD3\nxFMP9E3tG1sqw5ZhLHTt6RrF86iz7ibkw/Sv0pY/hNBqs32TFOV3j3zYZVnk\nPh6fBes1FnJZwR8kAGjbH7Nl/QxjfsdcIxZjCsLjM6tgCe4yBIrJMrZnHEpG\ndCiBZb3v7zBLOI16wT5Va7YBmUX+cFWuFQADtsZyuBe0vdYGFd9cSrcuN5z6\nT41eOQ2uhppSW1k7oWKm77anW5WjVM+6OZWdoBO2G8CLNUS9RJz227ZBpQ0m\nxLJ0jajFQiAKHYXoBp6k8EQEe8BMV0yPnehhhRbiLwZfNf7awyjPwjQc7XTt\n31JdIfhK6u7Q2cPc+I57xprWA6UxLm237COtZsHa3KJtxl0ijsN1rTfnFS2K\nN8ODEcTDiVa5+jekGXphMf3BSvto9ZDbdGSenzvk2jXPaBop+/yVhZjXgbQE\nvmj81UDDDB8seaB7h+FYI8vtWD4oeFvLutBVA6AGT3aFNV/ihpssdQWxhpPi\nK1vV6uTWCXzzLvaov+2yfQidi2XB4+hhCuucc6kcPLAQcZCEhZjQ5ANpWV8t\neiMpXxQfhQ9RjH5tKOKplorgSq7gnxmYqvWQ9ehn2UFi2lYkCnXBjQl7WaKl\nonjW\r\n=JJwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"59fdb08ad6b8a4b6d6781246dfd2fa53cbf51672","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.124_1603155322220_0.4763004425717938","host":"s3://npm-registry-packages"}},"2.1.3-unstable.125":{"name":"aws-amplify-vue","version":"2.1.3-unstable.125","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.125","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"6a48b1aecdc1488bf7d339213ff17ab12e1b36dc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.125.tgz","fileCount":47,"integrity":"sha512-6Y2GEfmeWtFDRsbXEQmJwPvCEhpfW8Ck+x8nOFIrcM5/z7L99JurQ7a/qw+3w8LZCRbOV+4kxT3w1IJit0IaVw==","signatures":[{"sig":"MEUCIGLXo8btnbCYWJw6pheWhDemM2Xo8jc16eI5vYPBbW+KAiEAvY+ZCzH9FSymL60r56by/UwYEbH58W1LtP9Giv4wyP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjy+ZCRA9TVsSAnZWagAACBEP/iFP4Beo99OuORxw2IZ6\nNzzSr61zUrdTH389GsIIwA1gIQ3Yf6InKAx+TmYpDjYKx2wTMj7eVkLqtAw0\niFpwxsCze/jrXh8QzNiK7vkB/AN3LyTpBqNjGwnwoo/c2lCiKCzyNXPiYPzj\nsqnFXH3jE7XfQN0+VKAkpS6giAL8kot37myzG9/jCyW2dliQ/cm68uxi881P\nBrL2UQaOeECiB4u2FTDps+e5SZWfHVaDI/E6C/swe3cuTdgGSlA5NxB8to8f\n7r+EfAlFUPA6Z4MIt7xmhT3yVdqmy2C1EnnFDl6HptS8dK1zY4usEanfb1ki\nNXoemtsitmTmQ/epOb8t+mnjexQPaJgTmIQUmnKcb4lXD4OqbWVYstr8+IOv\nstoHxkxms3t691GcDRfE3k3PXbHYuIPc8jhBTdAWJxRQFZPdnptM+hOtfpRd\nJT3K4GtaHyO38s5le3AYgSKHKgRDGM02517wq4V5ImCR1Z4VotpfAAX36LHu\nM+Bw4/jrk/G8jxxP9SQk3KVG5tqtADBxrIgWKWQ+Av+DgneMoEEbjRQDeqKA\nf6f9SsH4HeElz//VVpMX6ocFUcdQdcr7OlY43jVspscdDkiglvGuBgisxoWp\nyhqL3TilX4YbCuZ0sqNa2Z1vCtN5teN3J0407mAdjxMRwY4o4Y3SDcxetnG2\nbZNA\r\n=MTrV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"34de0f252ddea559a6bc959610522cc19fe340f6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.125_1603219353302_0.7383239107320263","host":"s3://npm-registry-packages"}},"2.1.3-unstable.126":{"name":"aws-amplify-vue","version":"2.1.3-unstable.126","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.126","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"c9b62f1a71eeb6eaba683c1982eb4c654887a032","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.126.tgz","fileCount":47,"integrity":"sha512-6CjDT8H2+g1zZKuGm5DTp2rRlnSyx7los6DHYhN1zHt7NlZ4Qh+kbcvtDAqtAZkaYSopSF5INgl5jWfGEdPFPw==","signatures":[{"sig":"MEUCIGWitqSoTmv156SaD8KtB49H91HXmUoZ4Bm0Isf2ZFncAiEA/JfJn5vzK0a7OsJdLdz0Tci1Zugr45RhrjCv1XygL/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj0u/CRA9TVsSAnZWagAAc08P/jPgZIS8oVm1KyEqYeff\nt+E1VBqrrKxz3wI8dH/MjluyU5XX7PtnTrWQY7sYK2xUBE/wL+kZROhCuVwc\nWHRxXrJraSmsVwtqwXQsUoStVnBpIfuOCTTOjwij6xw87lixfmHJ62xTxNwn\nGCJ9COB6IQzg9/ZJK6C5mqgLLQ6+F1SYqTGAuigDAuitzqzLdHqHG6balVGv\nxewOnwODROcdRlNcyzXuwzEOqGkOQqMCYufMirDLss1kkF+BFTq3Z1a4e/YQ\nZleAqgX2cFwWrUfpX/R3ZE0AVeQxBvXsqTN3cCibI1ZGZdDLI97fHKU1ryEF\nTIYUm2xAV9QuM8n8Q/RvDNGRDmrXpB4tmEAZqnz6+k+YFkhX5yHPR8TSM3ri\n11YoJaf3B6wLo2lpejcsqUoGQ5IF2nz/5mZ56wQLY4zSUX+uGveTR14FPe6Y\nHzgGvD1a1iZ2eF5PoO6ozILuFrzFDb4mLHmXFqnkW0nrVwJh7RyX5x2jNUNW\n3i/46yvr/UBoOx6aGdE7IOs4o/8mH36CjJTG6ISTA0rACfmgtwsbpmHiMzGr\nf111SMMNQRCxtgJxQNdIYoPE24DkG8ZV2+Hss88GxcZ8dihM2RetbqNLoD7U\nsDI60sPt3UcsKIDtvDFba3OR2Zn9ImEDdaWiU/q0gL278eD7j3UeO8578AUu\nGYtL\r\n=Tii2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a85c7244b514faaaf82dc1b8f454226294747f6a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.126_1603226559147_0.5468272877202938","host":"s3://npm-registry-packages"}},"2.1.3-unstable.127":{"name":"aws-amplify-vue","version":"2.1.3-unstable.127","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.127","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"2288994e611a2fbd9aa6b17c1603d56b92db6094","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.127.tgz","fileCount":47,"integrity":"sha512-A9g2nXGxwWVDr+p9NqMCXLlg+d3ufLW1m0CcpzemAMvO8xM+XUHUXw4UYCKN/BL+YCOR+Y5nNsfCqRg3pR/MLw==","signatures":[{"sig":"MEQCIEEeHpAvXUqLZ7BmIxaQ3j0Lcn/cCVN46jbIU8QNYvanAiAyPnUkEuBZ7v8UpESEMgDJwFOAV+BCTS6mZa7SGyCoHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj6HqCRA9TVsSAnZWagAA0ZsP/3wSa+2ryOQTirrechgl\nzIO5wAMiWqXGonZOb5u2vgQa9M2jWkrGauQXiNmMC0FPDVj8YTp2GFGoApzE\n5nuqsp+Re7UgcjLhUqmVwDAHkzwnUs6HYgsclqwNwSm55rA71o47nAL2GBfl\nKRXqarl0IA6hBbz5AfG8K5AKDAonHYGwAd4yquLxd19Dif8moYvFv8hz5+jU\nO9TLCixvK87aWdoXmY8hRbk0shXEtpUIC14eK2ctk+zgnh0xy97PXXjluUnn\n2tPSLMMi917k/mr7GENpdfr8lbeilJgntDCc1Xu/Y3vRADBcclsv5bIjVtAQ\na1QWiYeq7LKssEyTnwMUXWo+EVHGfQB5CU8aLP7f08oN1crZpI12+UyRQdFT\ndaT+AkoqkNR4x4+fItYHmchmsLjjCl4pGkcAnaIBON+cZbeqfOM5BobhrND9\nLDZPoJ26KpV4Vss8nXsvt3uv19iu+0uCainG4GezDTzWBYCVbqlJtuxd9v6k\nkF+FR4nkHij4cVO1z8dCH1XPgPi7kWIZBjtrjrnh5E0OZNT/VGGwCNFf7gfN\nWL2rpISipB+g8WreByWeOUGtejUynxxxYvqpBLkRfcW48CQOKHsN/9of25fZ\nk7Wzp3od/IRHZL9jHarKvF5kT6cUjMqUWdTKv8HYYsW8nhMk1chVJTIeeqlJ\n/IW/\r\n=tTI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"96fda2ae7ef480c1c19030fb576f2c0559eb1aca","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.127_1603248618402_0.7116528146871175","host":"s3://npm-registry-packages"}},"2.1.3-unstable.128":{"name":"aws-amplify-vue","version":"2.1.3-unstable.128","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.128","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1b2451f0b992f2c63c8e0dc890107934d74c6cd5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.128.tgz","fileCount":47,"integrity":"sha512-m+jVn/1+orzXsT0CkAIyUGY7le55Dtvxrts22fv52iRWvv3vCVysjlVInxqyNpjxf3tIS33vzEQpqJtXOzeAvA==","signatures":[{"sig":"MEUCIQC9z99mykvTt4xq2vsgGA88k+Z5bRbQm6nnfSlUH0omqAIgeEnatwpYofRTrXCwoREeo7lubQeiqA321K/XxKzRqUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkcb/CRA9TVsSAnZWagAAM2wP/AhQwQ2vjU2xGfWrH2bN\njam72xLJOBH4jNoVlfOlxslHj0KnQ6WnHOm/77PElynk9h/MT4PRADnI3PsL\nYSLo7QBxtg7Ak5WRQrIUWoAYBgJtCq5AicnYQc7bkcI5RmrB1afzsUgLd9bT\nWptIR9yihu94b2QlJr8pjfi6NpcZgO/vIN9HxGFhH43eW55c9vfD6xx62MdG\nmbsYqPpnd3XOFtzZxL3HlA0N90OhYh9sRVK0fnyWUc+TzTLUVZzTeMftDur8\nQZnvvE1t+CKjPBywkN4YdX5jk8adXgBf+qx77sEv7CoJKRjaLCa6MIai4dU5\nuIaEG2nG5kXP2vJXqFhFtisY6PAwHfC5hUsdiwb5HyH6qEM9Ng+6/Rb+c0Cc\n0gIL5Pwv36CAM+BlhdxBT9N8H0c/C4rjC9WvRBSx5ln74ZUaYM6QVS81RqGm\nJXMIf3aJhd/SgDZfI4ASkZ2RkIwYc1vPp0xG/HTr6I3lA0jAGIqtBmZ1rqFt\nEHvm0ZvwNwqdWsvBoCy3gFKyPzvq+xAuaf/5ZT+crol4wSn45mVQurlh7EWZ\nqQU6iDsfFE3hMuTQhOcufmYqO8EgMJG8YOFcjvc9MjJlsxhMm3IMSIAXiVZZ\nN+H5JQB0YdteRys9YShsPCHHNuCww5pDdLRlBf/rNn0QxBgtSzJEGrfk3uhI\nJn71\r\n=9hXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fd989e405a7bc024f780cc7df552ebd489e0be60","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.128_1603389182628_0.7735183658921065","host":"s3://npm-registry-packages"}},"2.1.3-unstable.129":{"name":"aws-amplify-vue","version":"2.1.3-unstable.129","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.129","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"2494ae9e782b59396806fbb6168be43b84fc6b03","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.129.tgz","fileCount":47,"integrity":"sha512-5iwL40DoOP6izNCCWfN0kO2IhQYi4aUgybdzYLD03yfsMZznx2qrg4iIoOjFxafxr4hZKLWz+u71h0fFwffEog==","signatures":[{"sig":"MEYCIQDehMz6X92g3KILZnUimTwPKIvDrNAJHkUBdWTLOmzP9QIhANm9QxiLGBZztKQzh+S5zLFXk+TfnZ04UntP+3v5KWAO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkdBhCRA9TVsSAnZWagAAocoP/RmRf5c0IpDQdX/6gtNK\nOGmtsBVz1VcdHBkrCfvnhP03olhYFFj62cpZxcdIT65KDIInYun9gPRBIYZ9\nzNWglLktdE0+CXDHC8DWSX6ZSCtoINqnMNUAR7KyMvfiaiG8dE8zZNzrnQiA\nzFGv+ZM3VYH954kdlwFtdDGVRNZJwlBfXHFJFyXANj5uwZlHGrbWb11k49ft\nLomK0GZJPwTjmB4HclRO7WzKk1eTxfl4WfZ/Ztoojovu6VOKTvXGpMbxjuPZ\nsR5XtlKMZBK4mxg4sOu/ahaSCxKxhl+cJ9IsIl4iM4Is9m/fExatggerjgq9\nqk4wCZ8ygmpVGyn6lYT28I4jjp4xeuI/54nDv9cjPoegrXTRW5OrzCBg0UBs\npA5RLVam9JSBLCmkr5sv+oUwn+ZsGguiU6EdQOGokRCN/gkqMwVaW77sn1hD\nE5S9JcNqRbylzkvoxr/Vv20ZHZ2rhb2UgN1A1Hj0TYns3yVr0S8Sw6CEpBJe\nvH+Ef/rzpYwhtfkdTIOL5S68Lkfh0jcDQrjdrL+65QFFZwlC4yWMeRhzjZK4\nZ2H9LNNtxQrcLF8CyAe735FU+0NZ+bo66ajQClEJ4VnuPTMv75RxwH9mhuT4\nr2hxPDzdQzKKQMmpKe9YHEyp3GhkUxeJdDZyy035yz9i+2bygL2sdO3H+sIL\nnbC3\r\n=xE5z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"abb5e3605e21685c98959af67115fa6a37bf22f2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.129_1603391584492_0.004263181209459788","host":"s3://npm-registry-packages"}},"2.1.3-unstable.130":{"name":"aws-amplify-vue","version":"2.1.3-unstable.130","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.130","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"8854fc70b18a7b08ffff878c567f8aa1425ba792","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.130.tgz","fileCount":47,"integrity":"sha512-41ZPaNriM7xTBiSAjUEvO90jrzKYW0/5gN3nhAludtvCp4fapuCGRSvHRCb5UOcXTT1CFCXar+VYcKFahEeHdw==","signatures":[{"sig":"MEUCICS/6M36aI+jVuMU9np2Upy4MeXzFaOj1huSYV167h6TAiEA0ACKT6fw0BMh34H7fqXBoV7AQaEzTFpbPpK1AR3L798=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2967652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkvK8CRA9TVsSAnZWagAAuGsQAIMfrTYsuHgE06uCods9\nsYv3XRQiMyyqKFWK08vdhTKqg47lEjM7SOS3QH8y5vof/u/KKeCTIJy3Anzp\nEGRWFHrY+pMVnlVLL0jK7lTERmzFrKNlankeXlusQGqySbl2zbN22HT+kbF6\n9dh+jjd+/ZYWrcfd8GFU9efO9+nEQ5WWt5xQvJFalAmjkFhJDAnY1lNEO3nD\noscWHl6ZKQcVSn7vS2rwL9byH63+3rgzQZ4E1nZu0O08yOqka6Gyfdd2Nr1K\niuLR9Fem/GcMUWVxu6bCtXGEAkgDmtNR29MiT0BQ53VyQ1Owke/ccOev+g+d\n89J1RZhaZhi/qTdY92iEngksDjH6B5+p/fKdDtWOWPVMhMDnCdkUgOrxieqG\npHuMMxg+6oN0KJJgTGmpJsEUXhyI43xqrCsHN0QqLNbxjZTSYZ7tbFtX51t3\np8/ImUMrnysn5xGIKxA1dfF1XZ2Shu8yFJVpbmZcwr46zhlQTPkt6sAO1NAU\nZovd0/Wls5J6+KMVbfQDrzVlKs7amq3QcdLvwee/PbOoAnbMA2aG6qZfeUSl\nDnVk9sOG10Pq3g+BbLnnJ/yKXuzrbjhfBbvuawyaBswxqRVX7GvoxvIBMWX7\nO6FRi3XlIGYrvwkBNrKCFK0EFxASr/RSVX6h7nF7oZG5+qMY1IHf2I5wFnRy\npS/Z\r\n=kfuF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"958f61ef2918728cc46b9b210d60e868edd87f39","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.130_1603465915508_0.6527994946228095","host":"s3://npm-registry-packages"}},"2.1.3-unstable.133":{"name":"aws-amplify-vue","version":"2.1.3-unstable.133","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.133","maintainers":[{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"3fda1a6e2bf20f8db5c379a9d8f78cc273b28616","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.133.tgz","fileCount":47,"integrity":"sha512-PaSSoFQBjorkXkCW5xKKMe418ym0gOth2eb572agK7ybM/67SNc7zHwE3xBYuNjRbrnMX3O0Y6mNVEswYGSqxw==","signatures":[{"sig":"MEYCIQDSCGMdf4WnwDx2f6YYqnO9ZrFQZN/Rg3qJ55uxrApzpAIhAKi8m2v//ez+sX//HVq3y7C2m9nnRNjwgPidpJxb+92v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2953799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmg8tCRA9TVsSAnZWagAAWUMP/3QDRjl7CLhjdNKWL4GO\nvcxGi2BmX6rgHukIGuQ0VckMfpC8eJOCgFPvX5lpYiA34QQIztE/3nESjK6d\nOOzHeQXmcXs/HVrxqYyIAFXZP5+OC8cHckvyTUdf0c/0IavlMFDWpds3z6Vx\nqOqBBq7vBljq9UBOoAN+udGI/TZL3C8SvcP/kZ0a0/mc74P7bnfWYUklyrZ/\ncIeaZWXVYmylyeGGL7u9aVUd6CKFxOGVOUUBY6wV2FwkWMZTQuvHrqrN6pHI\nbE6KXs/dBJKv5X27KI2fjohYnhCj9ahPGYLBjmMKZO4ZGWhcVgn46f7P4FH1\nvdKU3O9BxWQKungUBBj+ra123Sx+2Q4CJr78JjopcYKlnQylTOehBQckjCES\nOfJM+0QtZeW/zT1/q4UZ4VJbFgO5t3MXvUer1LnL68KDhOxJZwKsr8KQhjqx\n46KT/ZMNuPn+kg0d8H+1qrgPzxYQmsrjfZozC3jnebxCl+NCHEDQGFDmJL72\nF1/bNTO3CuZ8JOMw4Y3/WS4cZyHJIwcbYfHBmYRRCY1Hv/9exjvM8grSHou3\nZu6vb2Kv/L02d0E+8tXlKUM5PUg3LW/zccs+h1fbIb2fc+z3J2rqf2Ogh5IR\n0OwP+f0vHvNYvtgUf9ViX1lK9c6zhFHDFeWUWGjcSuW5xofT3u0AWVRPWQU8\n8kRj\r\n=UXa8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cf511b8d3deaa58edcce8d1ec015548a801c212b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.133_1603931949285_0.3055514048041006","host":"s3://npm-registry-packages"}},"2.1.3-unstable.134":{"name":"aws-amplify-vue","version":"2.1.3-unstable.134","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-unstable.134","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"7b77283c0e0d06e68345d901f511c218be6062a1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-unstable.134.tgz","fileCount":47,"integrity":"sha512-Ro30SeP3GqRyyejTb8MQEghAeFxHstkgLAUlldH0oC4vApP7Dw3B5oIL8/+QBXv90bUITU+hYyDR1a+I/rwDjA==","signatures":[{"sig":"MEUCIQDCjGykNr8BZQxKzRSwDc51xD0vXnHiaKnChK1dpXEffgIgZbcu2wm8JcDjWu6Dcy7hJTfN4YisAi7hf3mcPEcHCUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2953799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmxEZCRA9TVsSAnZWagAAYLUP/2fw4mU6X0rh8smknNa5\nKm9EsC36KbPFZTFPn2kAHHOrvDxcuZFLL0BgLw3g/UT/6sHQEv72pPkAep5N\nGlqnqm7YzPZvaRI4WahhYKvkulwXfA45daGwZr2WVMN3ilFgp4+QctBiNE+i\n6MBzhiRBamA3iMf+P/6CBklGwkFZgC84j5bSGSTK+xZkaTmib49qVJNWquS5\noRYf5UB5bEeW3ddvtVeCSVuYFyr1xqIE+kElFMgQ3pOivfuLZ7mr5YHsNNWg\nzTFA9+It6IAffh7Bw2DiR4RTETpuoRGdjpoFsCznUZO8sJDBlRczn4GeVBd6\nHxJhpvaTCGGMX+5py8POD9Ib2l0ZnNKsN7Rfi6VfT3M9oyxYgu2LROaMI+rt\nRtqUv184g31nJnHcEcLQyJLlI0+fllx6WGcxLPdpIVb++olFlylruqbBymGY\n/I7OQ/w0zNQPi8+75KzBa2G9UmlIpU1d/+z4PpXifsBtMfa6XcOispNOrXIz\nwtKlYKx4OmSPlC5MqC00Rgpyq+8IYTI1LM0QipehO2ryrvjp8XTiFfCPbzjt\nn8MvRZl0/L2HzklUW264VUgeme2B0wFTaWVWnrkBOeJ+GSie0aRjq2QebZm2\nv1B4WAlsyNO5vZD67375/UJuChdNNB9nxUaMG/T8pfXAv4pluLjBHE4vPlLY\nLo3q\r\n=+1RN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2a4d3fde1b23e5be84f66721d3ef5854663081d1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-unstable.134_1603997976987_0.6889001133462989","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"aws-amplify-vue","version":"2.1.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"5671815cd518e889906ddbbe636a60f0d373a416","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3.tgz","fileCount":47,"integrity":"sha512-hPOD1ywW+NzDtn0rGnk4hvegBqFj1joQVB088lr279w2xMSKF/mx5iM9kQ+DzYP1l7nUksIaZi16kCqVN2yeQQ==","signatures":[{"sig":"MEUCIFqQrMSMxzr5MgS+eye4SiJjDAb4001j0wGveqFLxGmpAiEAjFyIMSFpoG5FFXDbi4FtTjaQV9xcpqDAsWaYQ/470Cc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzCtCRA9TVsSAnZWagAAbG4P/0wg26EOAlkvyYLeZ4Ea\n9YtlH3See4/3AUS7pEEAIm7z2usAOihmoLecpfdutnDfh035cuakJ0qh9N2J\nn4YuReG6GxR198jfvZYJim4e0z/oD4MsY63iWxB/vkAc07Tkx0iUtACaRKk9\nVteSwJ2xBp3dCOfczOX8xJGOmKsyUtX5Elj9sI9/A81QNbrAIoGwnI9pJVT0\nSuOMFwp5QcpB8wmlkOlh7h4f/oVZNiMRA2hXv6y5JZP8R4NYRgnjYzI9B0ly\noX5DRElYiP29wYmv1IlxAamp8uESO8q/+Ju6IH1VnoXxGZZTubJCBQlsVnoo\ny0edz3jTmY05YwpsSE/PEOLgsZZxbCfpz6UD83lr2DdeJb2akhtZxgUHeK5L\ny4UjYdhA8pe20OSz3uE7QlGbLyN741JjWu++WPcik+l2OQqZ0TpwEOjPpDfk\nbqXi7fLTa6QQhRH6kv/N132TuShwYlGaPm9vL+gJ0atIU8V105T56pfK5aht\n9eiyetDnMZeBkfjouMoKwqktxTb12XNhKaT+nRr+NKxQQk69CxIh+fTUcEOM\nbTDBrPT/oY8gjEhgaVQjkisRoCqTp9G6JBv5SEyEg7fO49ur3eisrpp+vAW+\nFUi83G1aJq0qk28ypjOrBpbsS+GEZ7qzYrGeUGtS7kyOcEbtf4OugKLL9/k4\nPWS1\r\n=3dOE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"3d23301745d526e67794f80999afaee6120f64f7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3_1604006060615_0.22515567625459676","host":"s3://npm-registry-packages"}},"2.1.4-unstable.1":{"name":"aws-amplify-vue","version":"2.1.4-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.1","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"4e2cb154d73b1c11075f9df5f0424cac9889f99c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.1.tgz","fileCount":47,"integrity":"sha512-x5urJx5k60bynq61g1feRJDOqE+Eeb9P5ytx/eLNhIfF1lEJVyQKnISt7gqsiz4v0DuZ5lLoSb6AWp1CTRSGew==","signatures":[{"sig":"MEUCICG1q84bGQrIcFCfx+4uA5J0ayQV0RZQ36YqKRkY3uN2AiEAlhsXHCoKXIOVudcoNp2aOukSwBfIVv58cTDGpOm2tis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnGrBCRA9TVsSAnZWagAAyjYP/17ppWBi60AaKarw7uE0\n69ODVYlecX9Sg58/PgilIqkJf0OHElG0utubhrX7eWfRtatj+vg5z4aeppjP\nDAlpr7kXs+u72ldHIvrSicIu/m8DTciPSgUGE90ki0GpebIfvD2WQYnwWuBq\n78npyC3N1cnnjiZLTS2LQE/vD4fuyUHy6tuPMsQsSuSxqDsDgTnpGZaZNid5\nvNBqRibbr+jL2wgs52r805nSdPCIh8Tu7Dc6Muv1aZn3NqiHGYm0TFAOZFxJ\n/hBPJifu+JSJYS6HCVIlb7yIL1wSC8HsNaNoyPCJ5MKqWiej7WgJc9oFwjmL\nUNJ75I6xa5rZY/6twPgnLQOrVvgy3uR1wrWPgndsccWhtEj/pMjexgeEj3D8\nqyV4lc4X10riL0du9TnU8o7y0FNBQasnxa/TY7vcNb6pEOd1xfSxUCQ1YNQw\n8ZVIvGwMQ5G7O9/IzOfi4rqK1AMNw6h5kBqJnJtkWMyWYPAtB7Si0lH4NEvO\ns7PnW/oTZbHQ/k6LkmoIu3iHCEtmGeuacp2yO27ezgzht2h44sFFkcW01sj4\n1pkZx39k94VcUpJXZSwcUDdwkIXaM0IOMR0gJ0yyolUaGsuJa4QUbKKK9jDt\nxnjYFpD24dKWJu2k1cPgaeMgH1QwqdCbIrxhDzHL4VPQ+aHw3Y/uDFXH6Oke\n9f6N\r\n=ytvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f9f7c2d0fd363c1a26dbb580f36e73bb6bb166fe","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.1_1604086464818_0.1821954523188951","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.52":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.52","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.52","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"e095d744933791290e262098f6243e9bb7c5ef38","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.52.tgz","fileCount":47,"integrity":"sha512-mNlBW51CU2C8FKMh8ImTh+X9CyFitEfCfO/JYy46uykDMLEa/5SocoYQGeM9e7d5Y1gJBLmbiQkdNGqf5/d3wQ==","signatures":[{"sig":"MEYCIQC8Cn2K7TH71FZjBu6TKRLQ6UJtAVTEwLOcDPzisZ6mvAIhAJExQ51NMTWBUtna7AXlpiZ9TCTCgS585j/phRMGN5Ji","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2953800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKB+CRA9TVsSAnZWagAAoEkP/RO5tWKFBo0K2aeAhHFX\nt6Ey/f1W9hIh1QNdbVTQcJeNbKSKntnJRPmw4ApfUJLJTS1Ly6mFEtfUqxyo\nzpaSFeb/WXR97Zf4mzAJxcV44z+4wsIH2dfxBI1A5B+ATI3AB8/+7upSG10j\n8pg0c1qzeyFFvY4UWjHQLo2Wt5AD1vaXC6/1I/qnHgovJsVwrIpaR4lxGHUV\nJBCztizNgNASh0vLIrizVGdz6v6MNeQB318OUHfO2iiNVZZv3H+0d0NfNNZt\nj7Ri1tPt0hYk4wwTyLYz4Q5OBkBAuGouyTJQNTUJmI6gU5coV3NgazhVKiNB\n2CD1xpAz79odl9KDaw9DOMYOPsoObfS9esf7o3A/k8tksLMw4Ax5k/rhcDOB\n9a08ffN09u2RQf0+3U7l23517zuad0F1JF7+Hd7+O+H2rXPVkDpUOdjIBn65\n4ZnQFCPdIAWxdORtLmMoloO0rMkFYWl94cdtbhb+iLT1Qo/DOORjoloDyh0V\nF2+Q705B55hPXyMVskc9Vznlo9GDDgk4L1zmTvjBrAs9lyfZZoFjapM7Hvan\nhtvGDXLELZ9mcNrKj3jXPUM6y7mTyrxGPmHcNIxveN4Evs0QDwqT+WmJzh1u\ngIZiLnNAa1M+uDmd4X1i58nHBiyO+hjTchGzgk2Vmgbe8AZ44kXv1MZvOmrL\nv0T0\r\n=739H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"05415999e0ac8de492f9d2b58b73ef3d781ed9ab","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.52_1604100222319_0.8983029281238406","host":"s3://npm-registry-packages"}},"2.1.4-unstable.2":{"name":"aws-amplify-vue","version":"2.1.4-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.2","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"64ba5621315abe62838d1a4bcedca57615bf112a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.2.tgz","fileCount":47,"integrity":"sha512-mVk2GfDPmQYVXnt3Sh8FSMRCMwdFro4Norl1YEzCYGY6n9kOxh7UrIwn0vz3yWBHd5dvx6W72wG5dWtj7XRZkA==","signatures":[{"sig":"MEUCIQDM97oarrybJMg0xqL1d2SIjvkUwnqN5RQQqtkfy3FNJwIgUZKy+0GI//fXwPZkapCTygoRVIqZZNQEdmOPiWd1pck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnLpDCRA9TVsSAnZWagAA+7sP/0ieTD7nc5EEM5IDcofp\nLj2yKKdnOmu536svX/bkQx02+WlvLw2W30p9c2oel/zrsof+l+kEB8bwiRj6\nYP2EN1M9D0Zu45PYLzVnmISeme3LkKPOCdcuSR5HWICN0X/zGAgWzkV+M1KV\n7A8GA2BR+6UYeIdus6Q3SP7RVnkzWDlsCXwzs3644RJmY1WnmCtD2P/yZwNS\nheD97BhbJkgphOshc5WdxIBy9BlZ/OoKMwC1ilheSwjlUz+Qg2k7zqQCHtnA\n9+mBFVxtFB2xj8PWQjM4dhvks7YhDfgiX/Akp4CDCSL45p5BwTt8IMst7wSi\nvIfRiKjaiaQof6Sr7b+p/VsBv96Eo+kfF1r0sM1faN1uIQduDQ3euPSRHS0T\nPdAu+ha+t0hbyBr5Cpfjgxhv/jNJVGV7Cz4PuBOP07K2PIL9k/l8TluJ95XU\n1Q1LTA6Yee1trypp/KHDsGRLJvIFtUdPwl1Jz6CKxyNxxwNdY9ifef++lJ90\nvTeWXXnLHFXruyREv9rs3hUNM445ogsK6ljgDJYwLNd8dC74zd3hrRp0fvt0\n8miJGsgrIM2Q+bAyyFguRXizdHrobJxH/VGbF4ux9AN+LyyffuA/yZtEqyh7\nc9WfqDAt3JuuBMZydTtkXzzDLZR04h8On6kNVBBAIEm4ReyfSX8I0oiTO2Yy\nruVX\r\n=ujm+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"70484532da8a9953384b00b223b2b3ba0c0e845e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.2_1604106818833_0.3092837430858568","host":"s3://npm-registry-packages"}},"2.1.4-unstable.6":{"name":"aws-amplify-vue","version":"2.1.4-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.6","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"6ad9010050ac06dd49bed1be63fddf607da05f18","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.6.tgz","fileCount":47,"integrity":"sha512-glwKfxepyVPEQD6vjlHliydQwPdKW+MeNsBa7DFnIApXdu4Sy/R38gWSBiA+HCvnpQo9lCdA4Tf80ZxtgVHHbg==","signatures":[{"sig":"MEUCIQDJcExd9pw7tZgOAaFrMZoYMa8nzhNbZbFy0A/1+pCaDQIgSwBTIOIHa67MEfeoNH81vJJuOHbLhE4XLLQfYU9pSgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnXNECRA9TVsSAnZWagAAWkAP/j3MWoWMW+r7a6T1oo/u\nykykFgpPlpt27GbT5CIpkFFLeRjgQ7mvFN4wKKVQ2DStwNVwufyJnJvx2IXt\nagkSeLuECATeJZgs9Dev9Qk0mHDcq21OuWFmCLc83/Zu6tHN/bfbvJJepf7c\nVhRduEezORG2K+FEnhzN7HfXyvb69DJa+VtHFvE4bK9JwrP9yCeir9EwkXki\nheTpCT8lHf/vso6pU02XBHg1WTgvYuqgVyzA5yYtL4XWDGP29RthcCk5Kd5Q\nCaNBapdH8wIzgbnLKQt2jSOS88dkgMzVYNjQNkfBpSJBBeHFQfqfpQXYqWke\n8uFU1GZTtO/yDs6rJ/M+X7ET+rlPvAR+dPSQ5Bp3gc3NAYshSj2/O/TMEAxV\ncEhlDPIwblPotLlxK07XBCoaNEq6b6SQHP3P7eMW00OC+pb1KYn0vNo1ixYJ\nu8Ubbn4x1JbxKXos6CbbvcpwKYiVX7PR82VsIDeRxe5/NYF2HVPVUDxgkses\nOsceI9cR8orXIPBKjWBRZ6OdUL1Dc/siRc9wlJ5frAqZRB76NoyJoW/a9mju\nJmNNtYOxmCnf/fwyGTji/4inJzng4THQOvxb1WEw+rAO2bKHbo1z8Rtono6B\nZVjxG2FWFhzux6Xvf93fNED4Fxce9Yypim0HWzt410yOtwXRvmOVRdNPxp9B\nfYKV\r\n=1V16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"57f8d5fa85186b5dd1805965b9e820bb40f57fcb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.6_1604154179838_0.17174177204367425","host":"s3://npm-registry-packages"}},"2.1.4-unstable.7":{"name":"aws-amplify-vue","version":"2.1.4-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.7","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"575bf00e54e8bbaf31f8d106163cf304a1841a6e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.7.tgz","fileCount":47,"integrity":"sha512-YyWzeFapdpkp5WJfsd6jnmi59OWdExJtTeEMNoK7HK1nqxIIwsC3gEW0K593wYHjRrM3/98gof8FjeYZoiYeUA==","signatures":[{"sig":"MEYCIQD83A3eOagQECSckWbEVUSQt5SCWtzTiOcWdATd1B7KZwIhAOw1BMxN5mdlnNCWbcGuXUTjIx1ZAU/Dfh8ztyBai88A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoJ2fCRA9TVsSAnZWagAA4jkP/RB5ECUG6k5fF0KWSGRj\naGkITeW5fafkzjCfTDBFPcSvebWxrw/1rWWncKMIZppyRvGtK1vPb9ob+WJL\nx7c7RbVL6LIwP+eJ0pVG9dlW7YukTUephJ/zh0ZEpNW/0uLFbIMCxBkl0WPS\n+hGnclsksrO9a1EP3mYJb9ZYaw0kfdKf35QyRXwreIsSKtf8owQdJbA0/Uzx\n8Q0hN4QDmnq3bgrQ3Xx+Ac0EjEVpvQiV1xE/65/Pulfg8FuCbKnhVG6sBqZR\nP6FpDZwb2fxuxegeg6y8ixvvVHC7C4AF+jJUbL+hjDNm2IM+ofd/OO3VVVUz\n9SsEB38t0K0E2uMnB2Ue6tmtSdFO2MfgUJE9C6n/ivOO7SX5bpjkO4EPjGUf\n3U1TMx5/Iqk4uwQapstbtbG8v1+Ezs5YtbaiCMtlWk1rwqZ/JwIlebyitAWB\n0q5pFABJsj70QfNw2LE42w8RxSFHpWSYheawmWtE/8aQPEg70Fealwrdz6bP\nOAO/oKeKV5ZiP0rGi+EQiEj04F5lAX3eJYRUEvdxdNVW7712sCYArcA0z4/J\n4c8mLlBrQu3ErHe4qGFbI7VLmwCBJON7FkfuzCtJr0/4OPpvvFGgqTUKWe0Q\nEKzjUIFw2rZMKQyOBdPZX7TfBMdYqqMkMQFQ/oV29DI3HKxfkyA/dWWCEQPA\nhe7n\r\n=0Cae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"947197d39e4136af1d114ef716fe77725712f51f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.7_1604361630809_0.4140504263294751","host":"s3://npm-registry-packages"}},"2.1.4-unstable.11":{"name":"aws-amplify-vue","version":"2.1.4-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.11","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"f97436a764ffa16a187e865006b2e25776d50f61","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.11.tgz","fileCount":47,"integrity":"sha512-NNFbpH77fo6bNsXHHwoxdoMkq8t/aBENxIjXJHLze09EhiGpgqKCtK3ted0LRqFyqTK5IY19oY60jurHzhd6lg==","signatures":[{"sig":"MEYCIQDnUlFUiNH1kYNPGuC9r/fd8bqkfTmjrS44ifUs12Z1ggIhAMKcouRcK5GmdX5Eh0pdAAZDKgjIZoMVcFDscyfXkGc/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoalBCRA9TVsSAnZWagAAA+IP/ilx/53TmV9OFK0Rdq1j\n4uqY72JqdlUDue+Ug7IVB3lEqSIukdOXxmgEfSbbss3HiilwHXm4RcumM3Q6\nPXETbAoh4gnh8JRBOBNOG9H5SSY5L+qnbE98KAboZNDr1rUB/Ipv6ICFrNaD\nNvqyMVKLOe3Eq3OOBIvWOQT88cYMiUaoIbdGhv6hNzv50nMWuH6ya6NUD3ES\n0HjinXNUXc2f+tTPnXTufXkxMZsedAsiqytFo97zn28bvVNftw7HW6LXg4Xp\nXCX3a4o+ot5PEthKoqe2R6w13iEGE1XWivFXJjtOu0tQ/Rz8lXBhMEwWHxgz\nWD25pk2lvNA+rzlEgvHaPwtKCYu3w9CAXTxpCwtdNo4sAw7jzKQJx8CtWQGK\nEuEFc8Pn3ED6KASxApInUgs1iL/7/LCmN5qsFGPVwGL6d1ArZVkOB0TE/d0B\nVZJ/06egdp/FR2rNZHkPZ13vgnLsXVRzEdD63mxtqJFeByY0bPYlvKLy/qDL\neyF29v80YS2TWX+W/KY+3dG6n8rNdOhkucbdC5QD1W176MPDZwum+K5jbdbF\n7UmuLapDAD+ytIpf5ZPBma3GJUvR+iTlAzHN3ujmdbg1+OGD6FvRAn+zkRdY\n78goskTPr9niQQEI55Rza00p3zQaGk9CLpaG2FE+fsjGeJkGYV97n1GhMlwv\nMPJn\r\n=OiQX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8b3183f4d2ec7289044e2b6700e3ff4df3f98ce4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.11_1604430144438_0.4035329280399096","host":"s3://npm-registry-packages"}},"2.1.4-pr-6530.16":{"name":"aws-amplify-vue","version":"2.1.4-pr-6530.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-pr-6530.16","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"70ef8c2c03269503bcb61e28ff67febdedc4c882","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-pr-6530.16.tgz","fileCount":47,"integrity":"sha512-rzVlO6Ta9RJB6WgffeWrkEVf+yBy/9Hy9y6s/vtZonOa3uXqItIHEKb9iqyok9tjXBa6TmX/9GrjajLdNmktkw==","signatures":[{"sig":"MEQCIDHS/w8tWbs+GJIuzLsbriVrveud8nYuT4bbFGk8K75wAiBvPlUJLctGX0q4Z/koAzqh/MTWzf/b78RPTM4GyjBo1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo7vUCRA9TVsSAnZWagAA+48QAJXTlkh+J/WHcyjydZQo\nQE1HwhpNK62k0DO8nLY2N+uDB4v15dwy0AN4P+QQWJqjluSiuAxHOFOOFg/R\nZG54QYlNqKO1V6/GF0dByAXhRRSSnQO+2wGWWixxsGlForE/OuUAG0JZMuws\nEKnb7cp8mnIdwNsUR6TtVbQw1RMg+REj2POqTFtXODM8UyrtRNE1YNCt3KHy\ngeconp9obOYtnl+dLihEJs1u7rRGKpkPZJ3WG0ZjzHJcg6MuCmuIR2CvDgMp\nS2hVIsnzAAaOahC/qr0Lkxip6wfGvrPhb7LdVnZAb+N+u32xoQAVf/V8ocrn\n1GA78QNBHtxv5FD8otcBHOrCDDaVo3kIyuNuYeCOLx32aRMbhNEIHEl4g6xh\nbzv4nAzpC7fuFcXXf1bXmhh1tFA5PHhfloHkIdknifJajOHtRMEUCe30NbEH\n6r2lO9iwWAozWxlhFNyn4H6ky7ik9aXPVRL5O2Om9683cZnVwHBEkQ0B/vJc\n0v9NCGxmID/ueAHuvVRmiEMnnd2x4GRTE6KpIBmRg2PeVdQSgWzgj1Gd3Uh8\nu5aktkWR1G5L3Y4l6P3kDWP0jDj+g6rGvV+ncXtqaigvm11RQlvuyP3hu5WK\nyZXblBDRbhZasqcI++Wgkzk+411Az9YlKxW2+pucQa1xFj/JeiURiIqYZK3t\nxgFe\r\n=Im/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"868383bef2250f4cfa43e0c46b06cb0792260120","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-pr-6530.16_1604565972041_0.7927192341336691","host":"s3://npm-registry-packages"}},"2.1.4-pr-6530.17":{"name":"aws-amplify-vue","version":"2.1.4-pr-6530.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-pr-6530.17","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"9bf7c2d92b5cb26400abec0ad62cc0e5131997ea","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-pr-6530.17.tgz","fileCount":47,"integrity":"sha512-LSR1TQvEzxJp02XtyROoIGTE6g45dwURobOGoaJtMOStFWxT4TXm6ASEftwRhCVABQJZGW9BEjKBor4NNtOjCw==","signatures":[{"sig":"MEYCIQCVH//kpT8FBklMXKVj3L6x2Uw01mznPp2h2aKHdB+sPAIhAOd/uWXpwTneqbZWv8kO6KHqVvGfh5ZU64pMz4yz73p+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo8ecCRA9TVsSAnZWagAA5VEP/A+z/uBsPP3uIkxpm7YW\nZq/EJ7rmuEJJEvABu2VQF1Bw/qm0qRQ+hRBeGgmBHJV8iK2cpqW8Ya3r+vGc\n+olGHHnjSd7As5WZmGM3hFWEeG9s8h+btvKKGHZjNgtGdnnWcyvtgu8wVe4h\nTB9KtpaMxD/pvfpAkRKueo5cRn8ahyAoNhBQIj8MANhGCJb5nPh6xeb/8YQC\nQP08RFUcCE/FK0GkpOZ8uF8ZyjTprzk/Wf6qnSc9m5PjxMtnrhKq6Ejpbzyg\nTgMFNTAVVn+u92HADEmhqi12yJu6TLOqEQr8cKyhQ8qIUqongrKDXZyhtWR4\nMiPi41aU1DwLZeFxzZBZrhNOCdopA4604Hn/lplbRtP7//Z47lLV4TNh/iAK\nU9r6eM3AztZMK4rDRLXhmGZv0KzsoLIXrUBymcri0k91cEkpHoNGvKmprPAd\nfr5uAgm89oF1HmRkK/2reBNZq+TCWI0kVazt3EfOGDLmw4aZknlr4o/cB4rT\nxtuTjICfDXbY4BT4RSEDb8mbK9tZ1Yt4fvR+wL2kXFrtxtZtEzasvlSoHlwO\nCWdx2J3973Q40JcLyLVEo7Qw7BDxYaCCft1Ab5gZzUUiVhFiPy0/NkfB6+xU\nOZW/b55miRoI7pdhixjFxs5jYIIqKVf5zwx+D8L0wY5VFb9N6Bw9iidVkPHx\nuTEk\r\n=kk3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ed2f72ba9c38d939335b1b70295c41ff65c32581","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-pr-6530.17_1604568988095_0.004799456532224022","host":"s3://npm-registry-packages"}},"2.1.3-pr-7040.136":{"name":"aws-amplify-vue","version":"2.1.3-pr-7040.136","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-pr-7040.136","maintainers":[{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"ab0d045206633e263260d3c9c6069ac44b53d9c6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-pr-7040.136.tgz","fileCount":47,"integrity":"sha512-rwG1Nj7AfngQKeiG5qw4f95J2slCEEf1nEXki31pLDxFolTWRdw5PHWHvW6iiEg2QxlHNZ/RM72LsB2grytOow==","signatures":[{"sig":"MEQCIHesIeWp+yHLrwdR9GQrXyKCFL0uZpuKnEkzwrJkXjgbAiBphcStstDBLH3Dz5zQISoCDKLv0qHlhkOb35yU8tmogA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpcL2CRA9TVsSAnZWagAAtZoP+wa/9rtwfFPx47d25VFt\nPO/8wFW2M7Lg6acp/Ikstk1bqoAr9MGIgebGbcdfBRTBq4Dt0ocxz6ZM7Ju+\nLh+/R65mb3o2l3fxvwwHLldXk9/gOPFcO8ta9b8JeSil6yoZ6JLTUOKss345\nwRMsDKvt9Msi83b1g3zuGtoevkUCctQIjJZSbAFBKJ1JOzGuLIvokdmHemTK\nbMA7wGp6UB+elYLJyS8s7m6IWKUmvtgLVxXhtvKTvtpXfabQqcLONe+P1zdK\nV4Zkl5r2tEGw55wC72QD3opYkZFO9WWgzaYAilLCe9RzpvDR/QZhHRJC1obk\ntG57FknT7nvdSWjlFmy4QBvAczbMqLieDjZ/rxlVXBrJ7b5k8RimNAbwlHNL\nw3yKOE8inmrSTg8KW+MMpCOelVNZpbvqBDRpDHHP8H2QNRqvpf+I+ssAj/bR\nZSQQKGaTo6QHSz56AuWqXBjHM4cz23FYOBQgV0uHdwGUd64xWELo6TOG/EsI\nkJmp5v+4V4fK4t3UKY+AeFere5hYib4dqrdoSBiyLk2iIQwy987Wbd6BLLMq\n+QtnZgRzGzGOxNADxFViODRYuWk5xh5+4hzmr4Ds+0RABa4irli7oBqpfw9z\nQH+3cORb76ILTS5Dlxf9oRgY8R7OlnM8u1yEeJxUk9ftcau84NqGq4LyAxYb\n2sUM\r\n=wDff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8be236862ffebf17f4e51fdfc872d7741f14984f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-pr-7040.136_1604698869852_0.2397026467872616","host":"s3://npm-registry-packages"}},"2.1.4-unstable.12":{"name":"aws-amplify-vue","version":"2.1.4-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.12","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"561761bc0ee6a12ec1657b8fba5f72a246a27815","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.12.tgz","fileCount":47,"integrity":"sha512-An4PgwzAu6Xit48x+98qEhUXLKMKlzUFwqx0VGjejijZpl5Rsmc77C4McfBep6HyUtyGQ7fupssBoL2V1DeFSA==","signatures":[{"sig":"MEUCIGn1aJveRNXSYWnuplA6TD8r6qv+VGhNV+efhKFr3Q//AiEAxk8/gd33DMkOAPuMGftJgMiNxewBU/ka1B2ndNbvLKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpeFmCRA9TVsSAnZWagAAE1kP/Alyck56TuJUmtL3slWb\njTJJk//rWoWI9Q3E+2dpT0nv1a3uH3dX2q05lPA7rzwlKb0aA90EKXhFDKXb\nH2et16xtlk3pw42NBG3zR2sW1ZJj/9cyuPA7BQ5t/ntNoJdV9WkssSC6D4xW\nKe2TjdI0sTSwUpZ2t9A9/ZnQCoiOLrCotW3Yy8L0KdAVGQFwV8CemTxo+BJg\n2r+rnC4jbwU/WuO1XgixrTIZuEdI90DKopLy5CR49uYAOELjXsJcrG40f99z\nmR9jug5RfZeufgziDjZBmUQ5CChu9f4o3Jv7bvBA8weJvb1MWXA++bxb2lLE\nZkv6Mjw8hH9FA41b5gl/FVNCpIrUrF7BkegQiKXIyi+ETC5j7nknZ30s3fHZ\nWrahEIu5s683HuJGg1reR5EpdpLC/U4Etf6t+zBxaOH2jiVyd51MqeCf3AuO\nUOZC6BlDRTcKcu+paYmsxgUDnAXDP6nKJI6OQwxRsefl0m4pRKfKH4H2NT6m\nZj/aJzw2UxR1u47o1Us3Ua33w9D3eafBARBXQ9Fg6KbbpHz2d+6nbuNRG0Z4\nQZe7tJ93zqjYlLW5RenWYxsQYJ7+vqxUfk+awLI7vqkmF/HJXS+HP73RySVx\ne/kuc/LSKzRe/eJpoZ6EDhYL13HQAxYALasRiwhc6IJGCpbIOgTNririvl74\nfkwO\r\n=9Zy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5173a9911096627ce1b45067808af249668b260b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.12_1604706662434_0.9067952310012062","host":"s3://npm-registry-packages"}},"2.1.3-pr-7040.137":{"name":"aws-amplify-vue","version":"2.1.3-pr-7040.137","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-pr-7040.137","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"a5350447c9c32e03c2e16f9d16b660bb373eee1a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-pr-7040.137.tgz","fileCount":47,"integrity":"sha512-nJ7/7g/vUn55uNUXpG9mp/WSUObkOccHf5usDLHOHNwGFIMos5/nLkruzpTDDFRtNKSVPRIP60Fx/ae4eug39Q==","signatures":[{"sig":"MEQCIGrTEdj2BHU1iwJ2nGzRUBOIdI7lWazpLMWfFwq+QR9rAiAKcGhkHKa5dQqHokz8QuA83naojYBBiKtl9UJ9W71fOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqcouCRA9TVsSAnZWagAAAgoP/i7O8QLNBnjsbKjoQ01q\nrIm224nuLLsq0dVvGeIE9qRHC8tP028Bi2KcK5Ey0xaMNJDNerJw3lIdC/FI\nSkz0UXn6lI9ffovvflPHhGS1ZaMWDHcofG7oEAz2qIEOIyxuS23PbYuk7xd+\ngSjDtiFrAAMStycDAa/wKzld55bd/ezDRDbyQJqKC9HfYoEsvLi2n2FNiw4x\nymKmjq60dKSHCSvJ95B63RJpz6V1WzDxZ6DYYY2QNoJs7jbUTXGG6lCz45jj\n3VHpJweLGDwgb8UT3kgdNn2ktQbcCNUxkZWOB6VEARe1cbgGfq1KEeC39Y8w\nCyRIxElmqtMHDlLNOoC698grtyUJnplf/VLQ60X52lXB4zsiXDmPE6fagR16\nGJVEpIA0C4te2FN4ZNFwiBJQCSwzdnPfbOS/rNYFHxGTn8vr/xmPKlLRKRG4\n/Mn5+AfVHrOCjtYqCiqwdcvEDD97a4+omASqCAS4SvrScrc2F1bBg8pZogDs\n8TxeTmLe/Ua0TUOSZ81Ah/mFU6j3PyFvmotF7mKXVN/l5yaPsC4Vmd1DoLu2\nnAJO5yzTHwIE5yClgxGJKkAZSW+u+HdK22cA7TIbLf3n+3KMpgk+TCZ3/254\nWy9h9hlYZrPOe0zoLhbi8J81jaNhtdsTEKttIBGCsOA/9ypteEoosel7MDBj\nvs8m\r\n=NFrW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6d376559487805042aac37ebef9354040c8484f7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-pr-7040.137_1604962861901_0.4467734787845994","host":"s3://npm-registry-packages"}},"2.1.4-unstable.13":{"name":"aws-amplify-vue","version":"2.1.4-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.13","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"bd1e905592612be2eead4e27691f31da9e964796","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.13.tgz","fileCount":47,"integrity":"sha512-yGlZOH+nkMB9p3EfJRBJv0xSZJcrwhp4SCxXaGMH9TTngOWSJ7W8bKKdrd2kgUG2EsGdHuuuoXRf6WKWOUFu/g==","signatures":[{"sig":"MEUCIGQMmhM9q/tVvWal+7Kz9Yvvpbc2vw0mplwcaTuldLjUAiEAmabsLUS4fMySPYM+huWsId/gKJO2fwY3Wt5C5JPFSYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqczpCRA9TVsSAnZWagAA7j8P/RX5wbMlF9ntGKGb1ijD\n6J5g4c07dMkqNZE3/bDX5Y+3Au/nIJjWxzWpCtjNalA22jkOKj1ItlDkxEvX\nEqJxSDlrnW7ocErwB1lZjxPbQmN1TIw97q66RQ5lPMLHU/plWk3YMTF2AyP1\na4kFYcT/WdY5eemWZxeB13npXul17oBToyXLiLH4GhXsv27knZvcARwJODP2\nP5u3fWlxVeSCkeFlRj4PZo3Y5TtVZUISHGldZ0Tp04Q9pUZMBSYYm63/yqAf\nWwoCUDI23hD9XdPLyb5oycR/f4/KIbpNVyOq6+Z7ULinWbDDBffh7NQ+1XXc\nmqMxAsY1DR52U8LFHbSOTO2BbDjWOYW+mKwuZIEpAY0XeUVfT6ct9Xqm3z6+\nCJ1nxbNisu2KgPNcrCtaUbynQVouRl7Y5agm0WTUmKZsrThO26gm4pXQJMMg\n3L0N5fA2li8Jzfe37KXeLrrhtKS/5RCD9cIcW/p1KZsIHzqk+JcypL48eQEa\ndSWMcXvSXFq8+3p0KovDfCHeOCDTc9GjvDWjfsOkq5dkAkaFuAS9EK6/rmGI\nbJeyncWiwQeLtRMEtLGmbctLOlXzXTMtMYLE6OA9hDGMnWFReNz7k44MjF7K\ngnMV/sxN5EQpydvhBZUYD7q+CRUUoJRSbBYlC8yA5UJex0HgT20fWDjH8yN+\nW03W\r\n=8tCt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"40edba636fff0ce074960c92ab45c044cb9324e5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.13_1604963561337_0.5904681207021081","host":"s3://npm-registry-packages"}},"2.1.4-unstable.15":{"name":"aws-amplify-vue","version":"2.1.4-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.15","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"60ee67cc2f620b7f1519f463bf1827ce1ea2a13e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.15.tgz","fileCount":47,"integrity":"sha512-nD25ehlgmi8/QaqWH0MEPkdM8dPobtxD2thCG/TL44BbNw/Inyhoz72Hnid9F/J9ukYrKQUuzE9JkMd9Y/KSTA==","signatures":[{"sig":"MEQCIFW3hQCLH42dTtnMhbQuL6Z8F9GgCCWPtmdAnBuBcSUUAiAWdKz72SJDjM7mc07hVfHFVNavHwJF9VhaiHTbEXLwUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrISVCRA9TVsSAnZWagAAd+QP/0srvUIdI6ymfbi728yB\n+yaVQ3N/naZJDGToFYpizP1exuJQ27qbovI5LoxORLhK5cYap5SeZa87Rdqv\nZ4XZnBYQdfkzjzk4lGkyu5TFslCaSP1IBJsvFM0dXYZAeNcEtxEveQM0+5EC\n8P8VjkQvgg3DB93rsdoIk4wboM8HPdkhimvVr/QzuQ8wJOghlvIJiVXsrukZ\nc+f2BrDpuoIfvrsppKPlk+k2bkdh9jeu4rbs9zYnYy1papLB0G6GQ6Qcft2c\nlBWVjX/Zc5A9qVCwKLLh9TCTzrGqLAB2dcIg47coFRuUvXGlLZIPe01NATUK\ngmhN0oGhQPnz/Pi3gfc2ofDtJQdCW7wd0RBi25QKJjKaEm9TVNcPqWRH0L0x\n+FBXFuKEcMakV7OEvSDO+i8kXZ1glnvMzz34UmS7piLVq7fqo7TQnwqzGEpM\nXtM0SvxAil/tZed8NseKQ5mCLVUJyd0q8TLZummP30SvjUz9nB3SbI/bFnDJ\n2A9k7KcGxWXDBDLYNMtKhqhne9emIzFkZxe01r2paRmlJUwFalKYBZbH5GZy\nZEmEMvURuUI1Qh91E6/4+EPbb5sECsaF5YlFdp6VSJ+JeMI7+hucb9AwsRnB\ndc+CAfYf/13mbhJfUm3NaKGi4aKjMTThL8w98tsPKqBkIZ6g81l++WcRHrRc\nMiOn\r\n=Yimk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"73dd494568d5abf0b87021fbcf3e5740030ec21e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.15_1605141651580_0.7928716196985672","host":"s3://npm-registry-packages"}},"2.1.4-unstable.16":{"name":"aws-amplify-vue","version":"2.1.4-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.16","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1cb4eec943080d4ca015e698da7d1b1e0896b9ea","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.16.tgz","fileCount":47,"integrity":"sha512-B3V7q1HY7kSmO+IKVcEYn4zt3mLcQIFl1OU3rM2aeQBDoleb8YzyDZfY/VBdT/eR1c/U0XN5NQFq1rxmSbJ6Jw==","signatures":[{"sig":"MEQCIGcMj2J1jgdceZT2uoTB35HxBuHNWKeK+dzbXXBC7dJfAiB3lsSmBz5LcofYkoe5TPsah+ff4UO3FIB+QtamQ5D71Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrKaxCRA9TVsSAnZWagAA/KEQAIYIFXgdm+pwbFH/qFSc\n5QPjBmnMDeFu0eTF0HKEeZ3gVGZZRENRZrjm8RVYcodCJJ5PHwRSccjk2Oxp\n7nm9RMJDBVdQbr2SW4hXOEtm8dTGyjM+7DPzT72g4zrwJgVd3OrdZW97V+Ma\nzvGk5eMIWcgF8OPafk7MNME8/6p9oGtaI5YJv2Jz9CVGVMUKsgIVCK3UuTtN\nQlcPQRVzYiMx+HezDqvb4STGPDXwAs7q5IDEErKuf0XUSePCMj9sSuIfyRSH\nUdDw8SKcr5HZjRPMcIs8pSyHvllS9JMW53PcwGa2uiMGdJ3U7URaPIzu9Glq\nmxWK2SPMGD92r6u007aO4jBSeTrBbs83zcTxuXmuf1lBfMX9KHRDhily8aqA\nQEfXiMC6SVjtn891Z7ruiBYWHt+XnGFas0EoDkHRofz+HCk65U4XjGrjO1yc\n+Tbx0xr8+9NCIwXaaDJ520q+yKa2FsRkOQW08EVgL8OScMt8WmVv2NOjady/\nTkk/XaPKAxRhLSZjMd8o2Rl31G2rnUJs0I6D/xFEKTVSwrMuKA6WsCc7PC2y\ns4vzurbSL/3MD2F2nZrnfSgGZ4ideMInoHxCIFMI126J5GUDuAtjaSpcR60J\nsdjkfEmArdMBqTMz+3gDUgk1LvMWoeaMr6bzE8KkS95jvPnxaijodqkGWyQa\nZ/B6\r\n=Ja+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"60b0f9cdc80a80f69fe4cfddf48f07166bc0f7de","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.16_1605150385214_0.7881923736769267","host":"s3://npm-registry-packages"}},"2.1.4-unstable.17":{"name":"aws-amplify-vue","version":"2.1.4-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.17","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"a20b0b1ec4194b071f376cbf831876e6aceb666c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.17.tgz","fileCount":47,"integrity":"sha512-FlnavZdAzTM1KMiwc6yxEyifHKJ3HBm4vY4UJj7O+msC3UUETZGvzdnPEKrFRxYfzyVKkl4JZqWIzzYLK6pifw==","signatures":[{"sig":"MEYCIQDD5CynT55dN4tVZNrNg56eLxUu9bbekDhfGPIQmA3BegIhAJCEszynNgLlmu9VOa9DcOxgP5m8JUamjvJ0Y58Z/Lw0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrWlHCRA9TVsSAnZWagAA55gP/1/EcFr/LdtgY0Sv09Z5\nBDkDfKGZlxx81pO5G2JyO7mJDqU9OdAAGOBbO5OfOFUesHshy2f8hDyiPI+r\n/g/DYVkVHRBKtl5N21rgxpg/QZV38enKK5/b+jq19581KZFmjOQ+kocJlfLb\nCVnIKq0whNh3Vikpgws5BCDjZZSgu+sd3a0oba8o+43VTi5MuLcjZrH3uCwQ\nMJ+HYT/IotURjej2d+GYmznWwvDptIwGyVMHoNuwNxsVRXxNOWVDKBeTdgAH\n6VomQyqETKbPYT+Xjsyd0IXKaz+RgfYbVWaNCe1xzOletvrd91Otl95O/1Wl\n5/qHD0WAnRf4TiKDikkhMEQ2h7yxcfbuzkcIHOZPUO+9XfYlzDlT2X3HE2j0\n6PhXUCCFip40JNK837mKVUv4d/N1KWNQNdzUjahRVqIF8X58CgZXK/awHAcY\n4rC08mYJeFvH6PJ2lvuOd07ke/QldaNqrV37Yzwr82b+jg5w4bRA3cGy9l9E\nAh3nO/k73dNlLaCjq7/J+gRbpKDEPhmR3xJDuNbGlglxYV94EoGVpmIWMrvA\nlLl37t7fl16oYJC/Erf+P4TzYUhNc4D7CePsa/mqIrW04S7GKgEdsihquRe/\nue8eBGJ/1bhNSgyaxhIiIzDrdPkNhdwiZcmNiofZBISPUA7Xb8w44oHg1uPj\noZ+K\r\n=SkcG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9fc4cbcbf806b8759c714386695bc42e43ccd44e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.17_1605200199140_0.3491620538825986","host":"s3://npm-registry-packages"}},"2.1.4-native.18":{"name":"aws-amplify-vue","version":"2.1.4-native.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-native.18","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"4ab4895aa2dbe8c7520bd10fda843f340235dbfa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-native.18.tgz","fileCount":47,"integrity":"sha512-8biLxH3SzwCr0a7KjuyP7CrDTkp5MQKvaf68hdxdWZYJk0Woy1VObdD2JbcdNi6hrqcpuoDmbcsfv7W6VfwSRg==","signatures":[{"sig":"MEUCIQDs4G3x30bsdqhJaTMZk8tQ40kX/rzPd58vpbd0wx3MDAIgV++yNombjvzJC8PP9pQs5InAAepCHSpmkw4KZrtSA2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrX8dCRA9TVsSAnZWagAARXUP/RwmyKpUmjrhUjmvF6U9\nVHbapJmYKvA+NEqB/YQYFpXik26qWPQCWzlkjqhY7IZhbW50IydebbgSmW6+\nRlqQMz+G9wWEAhnefJH9pnFDP4+XfgSO6zuuTuf1pI2pVnRzaFzmsBobUHq1\nSQcd0i8esMG4K5QbngDJ3NX5jjHNLgUV0pfuJngSPNu2up9UYgFlRLRsqqf9\nrTtqpIEK7eqzTIUJCElqRRkzGdtJaKZVCaNKoTKWYv4Jmv85Jr3p8HFGczvC\npqi47pg7WZJag/8H2Cr4FSsMaYg+u0INkuMkl8VuJPkECdd1pQ7Q5bN0ZE+X\ncrLmnuqkgtOOI9HOhITTyBX6Y2p3SFDfgCCiLJ73zEOk3OEVNdS4ThrUrKNz\nUD0/5HIQylSM0Iki7ZjxQr7ge+vDwokJKYrb+Mv1fHBGKQ5rm4LqQzcshGMH\ns3JEgqVPTtdR4/UP7nqzUOefSFcva3kdzWZ24FQ+e3Qnru4JY9v/jpkj8DDh\nZ6gyJLD24loxWc3kmjY/B/8wvZgd+6ovCOVGzQdv9KCDjAtfM61cSU/KUPPE\nfow97qe/16quww+pZWpkHaa0zIdQgbBRfY90d+1HLyRKMdUIFoY0cI+PZt6K\nICoRplm/09dzZfs6dTFJQ3rC/RLb2kFf63XFz7sPViK3Sc5wqPg8IJfXnyP1\n+t9t\r\n=n6jm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4102102e117c69ccd3bb7d006d4471ecaf220e71","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-native.18_1605205788849_0.32407369033295574","host":"s3://npm-registry-packages"}},"2.1.4-unstable.18":{"name":"aws-amplify-vue","version":"2.1.4-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.18","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"8a994fc2544d9e74ef2618249e5b66dbd069745b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.18.tgz","fileCount":47,"integrity":"sha512-QKLs6bk3mggtVpWQoNY/vOi05c7zxtICy6178Rw8T7FJsAi+iSyMGjY0r035vMv74J43CjpFqUmminXXyevQbw==","signatures":[{"sig":"MEUCIQCfXi/BZTrn60pT+snZuEWZjc0ZbBHzXAW9oBuOk0GUpQIgGdmWma5kX+sf7XauitBfl4rw0YXYUNSWeK0bEtjL//w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfratKCRA9TVsSAnZWagAAeKQQAIRS75Oz3T8ciczT/nSU\n6Ry56y1u5R9qnLrPcTSKSpEen9ERoxCYly+aB6So6g4payVKj/FVOQe34C0j\n+JYEOvhm0Hd1LuolY4IxVmvuUpf1S+AYht+hrpmApfIb+JyDIALFLdiXdnpM\n2yfjGJij25VUllOBwmwjSANgCz3XfJLGZ2Ty96IyrMqIxXie9k6WJeYTGMlf\ng4DmOgjDYB5pSGQSdOzsA8/jCeMM/YJSHfuSTsUtiON2Bq8DRLFN0uEZxU2I\nrQqn8JEfUxXu7FzSwCxl7FZNveVpa1MDM9l2oSnxl9eK+oh14H93voYA1wol\nwAhfDn1PZdc0NK+FtKtbFoIcYQIpJdB+0C/raBEGC360zZuKdby6nqK5LhwV\n/LXe/5kIfRs87H48pZ6HND2s4W4gnpLJ8rGfHklvzvS4R/SK0k6UYSyyJVhE\nCuQsmIAoThX0laPgQY1x+1cKUeJrCfJncm4bkyY7+76LoRODtfgIcNDRZhrn\nXgWBoZSDUhp46/yLLAYFc4sZSJVC9Q75/ipAz2X2UTUlXdwEHwtLeYqa+XT4\nz2x3swfS+L6C0TOBObllPggkZfUpy8xDkt47viXq1AKVNT+IdFeUdj/C2caF\nS94/sb5MTt/XG+pScibQv0N3NzeJLvwu8YtJ0aGOWX7d00D7/qzznNX4Fxxa\nMfL3\r\n=fKeP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1fb92988d19bfba7116ecf523db95a66220798e6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.18_1605217097891_0.5487122124571262","host":"s3://npm-registry-packages"}},"2.1.4-unstable.19":{"name":"aws-amplify-vue","version":"2.1.4-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.19","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1126a03672b0fdf75badceaa376276932aa5f782","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.19.tgz","fileCount":47,"integrity":"sha512-lTkG/ktQWc1qDsRnubh0M/dUwfi8Pot5N0ECSzdA/SJSv5NTa8dW4oBvuGZzL7CRtz922Re50Z5mzitHvOhjDg==","signatures":[{"sig":"MEUCIGPaEj1pSHksShDqh86oenVYlY3LnutmXvO41y8FH3QLAiEAuniO/Vbh2m3LKLJTlpWw6mcFdfERDpj+O/2hnrC+J8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrb36CRA9TVsSAnZWagAAjrcP/ixOHQVbol1XNUGs1/pn\nxXhk3JQH4t86R9Nn2FhCL9Or4Y3eu2X9Gd0tAO2+SuVWVVLbr6a0RnNkR4RR\n7ZjtSb9tjWDjxGHAzd3QV5qRitwHicGbfwhUMyW9mrWiJDvUk5ei5tzJyR40\ncd+0wCdwQKNcXTpGVajNRnNhSZxNwwutLwVqS4HeKY7k3JoBDeYgEZuKIBea\nWo5HP4nnvzvm8Uoz8u5N8Dz8qaxm/igJqaxPo+gja4OUG8/XNAA2lEQyhOHw\nkM+AUqJV2Senj77XmasfMmH/SicvfaYEZgP9GizaSP9bmF8c/geRexaPGwlV\nNpqppXyedvGEub1q/8RBcI25FtwzzNPVTuh5meJO7kxKryc/kX5kCIvQ0xji\nVf4Ob62QoC27b1cg3paSOr5W9ZHy5FbNz2tNLZ9CgAZciTodNIXrrJfHgf3o\nqVYxlPlZ/Um4KpjSq1PqnbSKZZVoDYA0MNbT8gA3FQNs803hdh3YAJfziJjR\nGlSaOAk73d2eE2isJ5vfAkUH/YBqRMS8ELOnSVaUY0+Wp/ue+nBfNc1asXsX\nDUglZmA4cfkfkjK1mhsFk0tdqmcmBbEhqXcMnZpSmpTch/v/SXRxUOr+Z7Fr\nYsmpDmXR0nLgIntbHteKH50PVxtNun9BaE6MFxxwcVxzTt9n3uLmIWnlh9ax\nnazu\r\n=/Of4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"16e07b87f5d7ff85c78b6ea780870d35fcd60941","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.19_1605221881890_0.11068514674699914","host":"s3://npm-registry-packages"}},"2.1.4-unstable.23":{"name":"aws-amplify-vue","version":"2.1.4-unstable.23","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.23","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"e05e980f6cddb26ddf02805391214baffccd3df7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.23.tgz","fileCount":47,"integrity":"sha512-lQeTA+pX313a+jbK1F6n/CGu9ruSpW+pzoSdTE598+nmdguOApqPPBrdskwGLLWhhufVNAHk+9eRKpyRM7N+/A==","signatures":[{"sig":"MEUCIQD8RLfxcCwJi7xiEnPby6wzC1etZCiJihQ54HTK1nQyDgIgUyZvObNOgLq1e/d59f0BdJ3klCCfEoqhnlPfbo2iWrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrwK+CRA9TVsSAnZWagAAW2cP/3lWa+mOi+4LrHKuSc3D\nkFhijCjG5SkrIR9cnaR9ZnGU8JmxIa3t7aRqYRyhoH4iez+XcBoDeKw8Ig7P\nm/U11vve1WaKJAUCR7eKorwcZbXgUPCnsNlCyD8qzDSsIxXUYR7WQsdW2AUy\na9apnCboSRX9l6cDu0f+dJodKEUvi9JLaiOdUqZxbCJKjKSBoyw3OveAh4yx\neHIUHFeGk3ggBiiavOXJnQSFgGcroDoQY7FLqYzH+SpQfGblCtLU6pD1Asi2\nOKK1b/9/DdJJliBe3XYNaiXlBwegK7Li4xubJs55UTaa22xqnXfB4Oin4nq1\nazqovEAoz7D0DMg8gfIj13HoJXWjoMLTw789vDXQQyJdJiCaHlFWtQGdg8Q5\nTdFFQpn24FBLfYuY9nTykASAfTN5ScXK0/AfRRlyPMkOiQMyoxvaZnXkcLXV\nYWUDsNBdvSo51tsS+MogCaIC/Vfw2QKUkue8cPanhJcXitUSCgNB5WmsuydZ\npEx2rtmk5GZxFX1bt9JoN+Ab7D/y11HisvBn9HrnXLMpPfdK1ks6LlSC+Tem\nIfH4iQmlueSL6xxbZPc2WcBbxzYUY5JNpDjwSQjd3mGKs8YpcARXFFnni8SJ\ngyYfQcenWkgz5WutwU17FsnaDllP5//5bmyBislW5otMzN6oVfylwcfZfTDD\nOkoR\r\n=rzBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ea9dcde5c278ccb75e7f67c7cfabaf3c9ffba8a1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.23_1605305022033_0.9929539010295194","host":"s3://npm-registry-packages"}},"2.1.4-unstable.24":{"name":"aws-amplify-vue","version":"2.1.4-unstable.24","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.24","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"5c6bd4b6e99dde946597dc9ecd38e841775e0a75","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.24.tgz","fileCount":47,"integrity":"sha512-NURdlQtCsLxlwVsq9r9KH5ntW/vU88jM/Ci1a+QUKlUBcxjaHKOhQoOn9zshWGRElWxxEFWb1zt2eUldC+ERFw==","signatures":[{"sig":"MEYCIQCc7/75a4rvZdNmAft5+u54lKd3hGHvgal5v8Wc3Tu20AIhAJdM9dgjRrG7QdM3EGiTli6MvRHLwvUSn7Z52Tdbb0M5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsqZACRA9TVsSAnZWagAAUGcP/2rz6ndjyg74HVMtzQ4T\nVsUNLoRWMw/uxY+OlDX6C04EVMuz76vTURctrJrbuwQG2eC5a3HwN5IC+C46\nMJvpYh4Z5zwY1d76ZaQtRAYAi/Qhjz/prYigXQIuP88hJyoyw3IJSL/bJ53r\no+zAj5ey8T3N/S1vRojqibD3LXvXpfNT4kyId5xr9gMFEtOpRUhaq34MsCn3\n/uo3X9yaeJWn3JnVNsKByFbyLo6hIvHMoQyqab6D7RXQqfryd+bu+6ldEEYC\n4lb1j1YjxKpedVpmkHSxchN4UoNO6GM9OuEL4sQ3wB/ySeUCH3FjG8KWgNwy\nqZF+1VbGccumKBU/BndKwqxkqwHms08djBrurKYguvHu2LFROJJET/FtUX3L\nPy9CseevRRY/iwOF9fGu9lx5lNJawTRpzvCv0FiaPjSBc8azPt95SNBrabuu\nD0VxU7Y2wcGauWaYjgPrnYYwZRO2P13XhUZmHES+D0p4M3kolPlfufKfK3gT\n8C55i+lcm79Qi5knkPMHFQrnTiS/hKx68axcb99mHRp60KLfpo7SIMW4a/oN\nfRiJahfIeTrCbXXigzdTfG6+Di950lbftZfN/Gdyp/BrqoqBEPGPRWrObCjc\n5B+0KBYFb4X2R3rq/sgVcx10ECE2GROvu1WFifgEj/A1Dnen8tkPStWyyRWG\ncupX\r\n=z33l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dbd46299af9c558251b8c652c3e50208982655c8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.24_1605543487904_0.6209591294877694","host":"s3://npm-registry-packages"}},"2.1.4-unstable.25":{"name":"aws-amplify-vue","version":"2.1.4-unstable.25","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.25","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"76169bb39a0d5892094f2ccff7fee83d66c93c84","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.25.tgz","fileCount":47,"integrity":"sha512-C8Bg7kZnhpZdFQ9QTKKP4hYcvzdIwpjTP9h7A1JrCeUQejKOKeFbpsKvS+6WLLtj+I/0DU+iQFaetJHbsFae5w==","signatures":[{"sig":"MEQCIDwXq9mMvgzNKO/luAZ/1qtXMQ9mXSuJhz3zPbWWKY1dAiBJ+f2BH19AlfI/WQml3J7qPQ8045IeldBE/M+H0k6myA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCAuCRA9TVsSAnZWagAAwnAP/R30H4UyyRMjy5zp4zWq\n1B+//bibZva96olv/GFHqWdIqYvKS8tlLIgzIEGVtXfZ56EYVXygIZUJq/dC\nsyZ6hxHuM4OQpZfsRPXWzMUJAsI5uupT+g9rUeSOMCAddy65VeQ/uOoUEEjV\nRGeGBK411f8jpkRKc654b00tRiq2FwUfo2RUIhT1PEOITfjKoD7Dh2CPtvhk\n4wLHToQyhUXmhpRwUqm0Z9MSZ07C+fEWEAt+RLSzhAFomuPuvye0FrECwXaX\nP/DEgrH9RKi8+L+LntXuTgwhQplQyPo2+cV/DNuohTZfpqbjT2ohvO+HoDsx\nc6IkUMYgsATUmZKtGGM1UIlXRwfNPLdU7FhpBQvFOO9tL0DQYm80WPpHJ4wV\nwJg8yuLwnJGMUFKkLykcTzkceN+uKMOZwvjdfSdnbT+1JvYHZ+UuTvycQWW3\nm5eS/WvKXRzGzdPy7zIkwTEkRRnAGQmberW+hiYCPZUySkFjfibhqiqs46qk\nAaDv83X3kW96YErNC6KJPVZgfuLAkCVTcl3gc98p9McAsiyCmKZITWxZ0a5d\nVpQ8dbvezNi6eHfEvuls+Wg1rfFqL/8Epn+mejhzijazUG97SSVrDksuHblt\nETb1UhvOrMp8Rhsofvn0Kd+rISkREZATXn5iMY8pBwtbOIzabV+40Bq/bxaG\nHJ+E\r\n=ePl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"17b62dd216f7fdf5b21ae9ba2a2c170fb86a4d73","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.25_1605640237458_0.5078996218413137","host":"s3://npm-registry-packages"}},"2.1.4-unstable.26":{"name":"aws-amplify-vue","version":"2.1.4-unstable.26","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.26","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"ec1b53135789e80eac3aac12dea7e188692ba121","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.26.tgz","fileCount":47,"integrity":"sha512-dV1wNXjWjLXICiKf9KxMmsJ7EzwXsd9OArhCXu/xcS5rY6OxDJRQUCWBr/OLc1lZomrQxd2ooIqkg2xdw+z5ow==","signatures":[{"sig":"MEUCIBVj5nle2NCelGtHOqjbyCE8oBI0j/X1MeVe/wnwg+ehAiEA5rvPCJh4P04ZnkZ/sRjN7T+Mkxh9QApKcxJGHMAZ2/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCoBCRA9TVsSAnZWagAApWYP/0fQVJohddoUbykIcqLK\nF3DDynH4RbW9JjijOaGJmp/Gkf6ji20IQhbr2gNXQwOvhnzT+ZemI7a1HHj0\nHOJZnLUyXeTctev829P2lbIgi3068Ij/LK/4Uva8Cm8LbEtD5vYFU/s3g4QU\n2L1XDvwZvd9hHPn1uA7R2mrtpZG4DSqIuyoQM9Epnjp16PhlUaOJt6fCSeyy\n7mJjMKHc+SN1nry4ITX26MSWPeFGCbl15P43q6NjRkbdtHR408s/fT2NbPFU\nwKmbRuUelgP+jsj9IXksQylnPaIOsRVZs242f5tH8nWKtzMOlpe4Wxzf5EhF\nHS5o8MrUUS32rEirJo3VT0itX+cLuu7AFHuZOR1LadtD8NF9Rak5DxKDpw8h\nHvQEVygJ/zlmPOIsUCNYNfqkJNEVPPxYGKKuvReDYMJsv5Rgp62UtPTltk4+\nszD4exfpZksPTIV8Z5QvNTQ7Uro05NOlRCX0EIG0YwfKxVDqZ384sw8PbkV7\n2xmHX3+5Uhi5ZequExzBY5/WM7EcSG8ifYkkn4HnKHm0rVcWvtFUtxoPXMBm\nP8mNIcR4BuhwXwUJ8Qrxy98uONJAJb2VSpB6e0p+CKJvLUS7qvpp1ZR00IzW\ntuAKYV7nN1r6Y0WuQqyFkMgjs0ybOcJakrp1jsJJWAUmj34rhnMJogq2Ayl3\ng4ki\r\n=/4RZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"610cfa98c5d308f021cbc91f1ec20529b8198a33","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.26_1605642753100_0.7932775409586925","host":"s3://npm-registry-packages"}},"2.1.4-unstable.28":{"name":"aws-amplify-vue","version":"2.1.4-unstable.28","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.28","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"d0c92861bab1a7d7e338652c0e6f5b08e32fb190","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.28.tgz","fileCount":47,"integrity":"sha512-HgPEUd5EAzY9Xr6ogIaJ1rH+Ws4cblDqlBTD4LI1+BBXl6wFVMkhzSdU6WCMWzXIYeJ3sdzH6oYRtyEUTHmcyw==","signatures":[{"sig":"MEYCIQDNuZVeu+dsmpkjVaRSPOOpFRjQoscT+b6fi1zoObI9ewIhAND6u56Lfv0J9/PWxPXwIYTW41JJ1DYbbxQlCC30jBMy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEuBCRA9TVsSAnZWagAAq/cQAIT3DXdZnmw0qAGuoRhY\nzeDb24NTMQ/02OzpNP+Em59EQru0yHbsM6PwnbjGo0v8q45wimKl4T3EJ+jQ\nUxEzptVljynb08r3M5fGkcWDpGJu4qyxhbRuJOK23TGibCz12wIqoaC0rkwN\n66SLYr/ICRDGBjfmv+B5T9qlmmsAy4XkJKsrci2+ztmMG0VNEpNOKzACeAxK\njgv9D2RvfARG9rBnf3DD+9xQ7QKyAg64LK4mseI0F4tVK3LnTAnu6N4kAHKe\nA+hEDpHCm1OOyj/mYkTxJThlWh+hSKLLHwDOTzOC21TX0P09nuAf257X7EqH\nTdglDvJ18UAULjRbIUrrugTUa4tQDJpvXheR++wv6RgScxW9dNaYVi9REMg8\nkcy1/M5EfF1uSPvk4tF09eW4GM0AQ9IHndrZu18zP5MZ0yypF62r/92ND5qT\nXt3I557cVB9UOxx5l4LaZJoGQBNxO0aci5RKfFmqMN80AWcdG6buXza7nzLG\nu+ESbd4NtZZqABl/Kqvb9mOIxqGXV+hkrdmhybV7VL+t+/ZUWu98a2fKooQT\n395LxYlaIu6OzHoasw5Q18UfatBCwg6Y408af2oNEj9QJ0OVftIbX8uXHXUP\nfIORSYawEKDqXmG/+6BZIwXTr589tkgsuOkZZg2FJO+8w8enqiklC36beT+G\nNbpk\r\n=fqmN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"be1a746fe7c0e8a41e4c773c03689a6d6d76b380","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.28_1605651328454_0.5627271015437958","host":"s3://npm-registry-packages"}},"2.1.4-unstable.29":{"name":"aws-amplify-vue","version":"2.1.4-unstable.29","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.29","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"2b50e89b30d57a55874f3db61530a952f368a527","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.29.tgz","fileCount":47,"integrity":"sha512-Utm+zVCeWIAnAYgdaLkMxJaBrFe0XdIKBfZJONgIha3o3iIHWayNmIYgymRjRU/Q2RX4hFeaXt5mRh5sGcLYcw==","signatures":[{"sig":"MEUCICxFLSDmX324lD9P+2LWiwQ/KIjguCx7uBlMjTqb8jiLAiEApCCJI+99/0kNBsRJHGuFkg3tJ8+HUnMnkZCHmCucCak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFflCRA9TVsSAnZWagAAvzYP/Ah9F61XrzLMXkk6qubd\n8HgsrxG82SyWqSW3zMa33pXPzSktfeZ982ck+C6N2g73+ai+u1YPsI4Q2nqp\naQh3tGVswma7AmFG6UymhUyjSAkhVkQxF1i5u1GIiZ+0pzxYikec/qusTkh+\nwN7svxUjkBJeeATdBbzGiqxCp++pC2m1iEGfz3k/NgU/ab+VbyY+4+LfGWm6\nJ8onbTZrecj7ODfgIR8nA91wcfMmQt73c1J/M7oF8eZVAKk7Xbk8j/yFWZrT\n2qRavNe5ZieRcSKr16VnQ6IVoF70UHkKYOlfBgsR+LQD5E/fxlAK8jCesESz\nQue6dbl7KL3XqFkofy3HX7Lv2rChDl+iBKJI7T4cZ4F1yfl2vuk/cntPxflz\na8yrfyf6StQ514RZoW8CGswR89veKXrUJw2fMnutdP821fgMDuaCkTa9IyIQ\noJX2jQIs8KJCO2paj7iLQ6QIvlyG2NnZ5gB/qVr8teQlkbjOk7dv2e5AVO33\nDNMOE1OnC8ehXxS1TQdw6fL/+UJOnuwa6HXZmcdbjrJwNlwTX3iVT1QeSYlH\n6suQR3soW+ax4jE2lcteHBHZrLUVGYrwNl8Q20uFPothykwh3xCL4SHi+xoH\nv9jeJhskp1vr2YbNwmoc7xFVzznNrCJLyBuC6XXoqEyUQqyGASNybpaBY1iY\ni0cf\r\n=Gd0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"863daba34d30b16b2c381a8e4ba9a8379f7d290f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.29_1605654500923_0.7693273520085606","host":"s3://npm-registry-packages"}},"2.1.4-unstable.30":{"name":"aws-amplify-vue","version":"2.1.4-unstable.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.30","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"7ec3b7179d47246aab30f010eb78677882867190","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.30.tgz","fileCount":47,"integrity":"sha512-lkc80aCt8I6HL4764qKlHVQ4CCDeyAu7UfVX/og2DfJK1Q2a+lHoflKXAOCfzA2h7wi3B231XNYBMWdtZya3Tw==","signatures":[{"sig":"MEQCIFp4k5shs/HYttYmeKxdKdMHwvdcD4Z+Q4s5PPTfn1cWAiBreNDrxXPd1Lyv9wQcdO2kqxZlmGP9tPlhRWkh018wFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftawTCRA9TVsSAnZWagAA500QAKF9wbee8Omej3UYsHLu\nQvoEJZ1hP5wvkGz2zoixBl7YQnn4Lkh3CYMgg1Z+GdLJmWTFos+FNHymv/3u\nvFijyZesujsMYMW0+maHEKey13PlU15DxnEYXckHxWM1N36let3Yhs60tVPi\neqLjAbPevZgsAetyp2WaiQq5itvMR41U9gHBtXc8ToF9+WumRCVBzclMU+Eq\nE0RL/1dxjYkjlD+yCiIltrIvlGKbZuVLGBYGU8LPwS8axd8HlPh/+W3qPo6I\n6fFAUWjgILZjCX8ZTzxcnfGvANDtSla7NES4dnestjnc3vk+ajKdxQ7texuV\ncPAxsUeeANVr5gk7qpH10ZC+ykTRMuGolIo7sxyA1IlUZFJYvxUsMVtTBj2N\ne7Af3GTu7CZpfT3zUSLpEx9zKP8FHAHiol/n2895/LeGgPUNAqxngDEwFdrE\ncjksLCF2hBDAttuCDEPH1oL8hTflCza73o6Tty7MXjJ0lvDJayOjH0gMiCNc\ntAwywyvaIHjAdCzif5NwcSnojTXLl6JFLgtl6WZJwO0buyrZWmbob+T1Bz6S\n96If/t3hcpAsymsEu78On+7uVZ9uw10aZ2yJWO81/vor1l2BM5WrFC0wz73m\nK1mhuZUM2RoipZBwZ+xtvVAHxtESFF9GBN/c2HPwYoBuw+ekWOPM9EhmzZCZ\nl0r0\r\n=WqLM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"413ac8dda969c29b8181b2888e2f100acbb3c83d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.30_1605741587131_0.4584138134719207","host":"s3://npm-registry-packages"}},"2.1.4-sdk-bump.32":{"name":"aws-amplify-vue","version":"2.1.4-sdk-bump.32","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-sdk-bump.32","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"d727e19576d173971c79bb86f038bed8d94b7579","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-sdk-bump.32.tgz","fileCount":47,"integrity":"sha512-3bBKNbxeBXIJD+zR1ROiA4VWJQyRm7DoexvQqtTA4zTKSpLZ4yUXB4BXSqiULUCZo4zR+phpPHsb3LvW6o4gBw==","signatures":[{"sig":"MEQCIFSh3Zlw8IE+NxEIxjapLDAJ/X5G8JdLKrPJNP2I/aByAiBx+/iJG7dn3X8frbt7m8emgbnXtZKe2MHzBZVPL8eCDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftbt9CRA9TVsSAnZWagAASBkP/0b2Y6BS4Cm6r/8OlY2N\nkHSXCt68IoVZHFX4sfjmJbfC4kH0vxEXgEfYWgSKBjCflCUZARG58vTou7tr\njgX99MGCPz6wmEOTKq7FCvGRkOj5i8cd3qw2eD/xlSoGy9ZP9bfQE7JVWzwi\ngj52mmPTKgW04DOMuQ7sW6WLDe5R2d7tGLLwhxA3c21JboJLKrsH+sK9x6kj\nTIkco90+4Ue+pP1sLaernAsxzMY1lUGxfahUTrtfN3n7hDJ+ZF+E/eZ0LT6t\ne3K2pkkP+5Gclq2b8pjnFbn8rGolb06MEepRn1OT0eTkLIt450tzb0p/z/Xu\nLl9LbbGWI2lXh/2gRXkkYEbxnazoNnF1Z6nIl6LhszM1u2qlLZPsuNeWX4UP\nAI15tP++1NPmjibFUS4F0pmfdsMab+DAzPydoqi3shGOuMgVgJmgRbcaz/Uj\nC9pc8sf7o9OfLhtNeHXegI8NCBazTtPxS/Pc1waPIeloBkmYqQkFRTjgeFJF\nYC3LXW4pOt9yYzJo6lyfKqIX7ZQtztg9X2MS6NaZK7UnbBEqonkkaVZzezql\nGefGQ6TLtmLu6t56zxRdwCGgGLgvCon7Q9GDU+K8w+wyBcU7a/99SfnYTcOm\nS7gU27CK4DowQZFYYTECMOwyKasclUKf5gLnSWbDi/IbewypSl1FEke4mdzA\nmg1f\r\n=95zM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5debaca54315b2bf134fe1962beb00a73121e5ee","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-sdk-bump.32_1605745532521_0.4709930922668828","host":"s3://npm-registry-packages"}},"2.1.4-unstable.32":{"name":"aws-amplify-vue","version":"2.1.4-unstable.32","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.32","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"bd21f87d839cd239f0c08d48450a4044e3a7797d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.32.tgz","fileCount":47,"integrity":"sha512-uLnk1ThQ8L80jW7sJR7Gki8IXvbf3iI6ZxaFJd2l2mcGrMD0BAIHfkwdQvZuxxcV37wK6HCGchI3OxgDriwVLw==","signatures":[{"sig":"MEUCIHa+t/kG3cGilpYwP/8YZBTdJF5rsWao245X10ynh8P+AiEAiuJVgRmd/873kDT33Nmx43RcrGo7O0S55/PL3iVv54w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftrx3CRA9TVsSAnZWagAALjsP/06QOkKmnHk0VsIZ4rSP\nkZTM8PNx3qWYz5nPQZx6pu0aJ6NcEAEATjJG7h9Tc1YwRF02BOoGz8/vdzoo\nDtiZHrPSC+QkUg/fxezrNpWeIKszCAhO/EXBz/+6UfW05P0u6CV+L0tCbP7e\nT5oPR1FBJfj9hZwliqWA+jcK0My9X54KGW8gXCO3KhvzMKEPLjFirglsc25h\n2iMGkS77iVX9TGVM7xsBpxMGABzomuBue+AvQ28E1mNbO0lFfC+t9kwtnsiR\nnY6Npqj4/RBzZ4/Td6bTk+c/WaQcxuRGOwCF5bfGxedzhmKoYCYSbcmo9GHE\nx9Voke9Jn1oiIKLsGKz77ZPfzRcN9dIBETRASLrCk0Et/0migLeRgGt4T1zM\nObkRZYnomdnWRvJe9mx9xw+BMNEeVjRj90LP09WEtpKyGRgO1wu+ANxTrS3V\nqrLNjUX7DwT5nZ/CFanuIzxaWQc8osvJd7NWXOln+SmQ/EeCvgZr47s2exEG\nyK3Yrc8B196+Um7jcpx8K6+Yi1fyKZx/+mm6Aa0TV9txzay9WN8yyHPGf6AT\nC2OmUoHQ87RQtqm9MhoduauJvN8Coi6WZVg+JlJZ1meERQ8bxT5YBGrx2rcS\nwZy81eOw6RjNcY8WUoxYHByRjEjBiektt87hHFQFj88b7q/4Na4v5sOLLZhr\ncBWT\r\n=oQDF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7477d272587212c2a3cf0e86806f8ff4a03881e0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.32_1605811319032_0.43414665234675365","host":"s3://npm-registry-packages"}},"2.1.4-unstable.33":{"name":"aws-amplify-vue","version":"2.1.4-unstable.33","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.33","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"fbb234aa6c467217d84191111809b1cbf5573289","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.33.tgz","fileCount":47,"integrity":"sha512-dVlXHG/Hc9BaarnQUnJMObIEOgVxj7k8zRpN3PbLtvjqaStcbiOnReVCMlJNStqrUkJF0/oG4r6KsuOPOXC3XQ==","signatures":[{"sig":"MEYCIQDzREQN2O6d76zXjh5XqBmz3gzUXxlQiru1QcaiuPAcaQIhANDi2z0LtcYXM3lOSB6KnegjrZPIqYCnrUjrwTnxkGEX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJft+IrCRA9TVsSAnZWagAAzz4P/RGoJnzM7ZlAqvfO0En9\nWYohgkdmH4UjGt8a9Wcvkr9mrfmXiJ2jtCK2yyMn3H27yTyaNZXIABOC16Eb\nSNinbReJq93HBiKmkyk5Ett0+DIjjQVjUsr2/DOF1YPAzqmgF1FFAsfL6xI7\noCwCZC80FlDBMLNu9SFsWJLsyykQJ5ZTlxgC8lridl7OVCZJ1VqGIg3XmjHO\npgMq6UAkxQX3jQyPrTPSbr1LB/98jDpDsNvQRgNmXjK2X/wE9pbxCFk6reaY\nUHOp4RHRyz/MZ2stOf7dvk758F/7DHFebL98S9hCCDFvpBhfil9YU2rsQwp0\nBPF2FeIkdJobnC+RTMPEqhD2ZzuEqmaldY7v+vqJkEjL+CQMqVUXu1FyRZxN\nZ4wwWKd3o+lrZ1eR/+8TaPBPWgYJdz1pbwp0OAjg3UY7HxRdoAP1zsMSvD94\nM58CNIR45++nkRMA+crYjpkbvBCtFoyFpICDmaNjSKqctFEuYPJgb8A6kgT3\nyUHfWKy4L0jfc6xYjBGKWkaeIxhIo+y6KWuGAbjCUWm+rv8ds8qbWaLL8uSr\nop7xXDrkbBFZFHqTrfIDLcvz+Cdsoh/WsM6gD18QUapZz4Ke8IAN/q0aohl/\nv03gzE+v85qQ8NLrkymiJe66foZIWbgklBo/aLewz1mTtLSgLzu0XYcjGHkk\n1zUc\r\n=ZjD/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"31c7199c1c0abe77f59ac24739667503f266b4d1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.33_1605886506675_0.44649039145432856","host":"s3://npm-registry-packages"}},"2.1.4-unstable.34":{"name":"aws-amplify-vue","version":"2.1.4-unstable.34","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.34","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"88a8e85f520fd11fd43196df8833cba7c7196c73","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.34.tgz","fileCount":47,"integrity":"sha512-TVH8vPWECbIxT1Txbbr29ioZ3nS+2m7h6nES1FsTnURl8xjjD5UiYJV1xKHhs03ljHs3WU6bgnuHrq+H2/lpvw==","signatures":[{"sig":"MEUCICo3Ix7XucfG/ya5F4ruarpFUiGRpvvmdetH/3zeei+0AiEA9OGM8Gj13N9ujD5oizsbTfrUSvGLSG2PgZqw00Lplp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuBB8CRA9TVsSAnZWagAAykYQAJjVjVDJI8p73hnUeaxD\np57nMzch4ScKcWAI49O4mI1QbuJhV5MxFaeKaaTLGPgYxXviNc51OGQJnKmS\nVW9mJPqtXORo/xP7Yct2v0ZgLN1y3xCZVa/+GhRaXXeWpAHEy6UvSyHRlYEn\np0vUgfHuo3+mfZftg03S9lE9GBHA87MrohG5En1ZMN13q+5vC3R84/WBA1XA\nfuWWULKv+QNeT+QBgx7sW/EYArrF1vqiYgLtWd6Pw8V9WGtbn2NaUIK8t0Vi\nTaevxuqnMJEMvHNppTcgiepX8huLoR+cu9I1ul9drc7asTIgp4RxoyEa4gY0\nr5H1X9Z6MBcVebhRAkMjh8cdkkvGftX80RV1ZblmWPcAnzCXOeYTwoZvY3Vu\n3Gp+V7B4KsZ5NHzRgehIU65fz3NcLumF3hdQFbQZpm+2y4ZSwkfh7bwy4Zll\nbBHWadD/XxwXtz90zdXtehr+4Kr8crrtz/+diBiUjDvrq1awCdo5UmdWastz\nfpRzlHzHu5LfYRaEL2h2EcI8Ll7PxN0quvW71YfgoSTi93Zhsqw2u/mlhyTZ\nXQ2Ijoq/bFQk161V8B8yhR9mwjW9tAI01JGh+6B7qLtc1oyfr99zT5q7UvkI\n411yjyaJNkKliv2KoWz4N+sBC7Pe2IzOgnijkMnIq85VNPUfUYJF7gAApub3\n1oKB\r\n=FtNu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d11009a8f6c7fc7245eeb397eba39f468935ac16","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.34_1605898364202_0.3005080455152749","host":"s3://npm-registry-packages"}},"2.1.4-beta-ds.38":{"name":"aws-amplify-vue","version":"2.1.4-beta-ds.38","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-beta-ds.38","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"c69e66d3115d125ae216b7d98a3d5104ab20daa1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-beta-ds.38.tgz","fileCount":47,"integrity":"sha512-w1lyvAUbG/Q6aWsOiu7k2w5iQwmiSnp3NPSBcziIjsSZ0bnWlPWiQTFuwzGqM2ZjcnZNpOO3Szas32jRcLO4WQ==","signatures":[{"sig":"MEYCIQCH31G6TB6VB2SMPSoJBhnCsFsXxoOUAGSxEIlBQ2n67QIhAOS17YpPuu9EXIdRfitE8GgEOF7fQRiS4K2fgszIzzsC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuDQYCRA9TVsSAnZWagAAbh4P/iAM3TOG1uThRBpQ2ivg\nGi27AAE2Mq4SnI8ZTx3DE1ZraQ+27wTtNQTietNqcwR6JmJavvoMGmNhfT3x\nnsjShwd36jP5DtBhqIdM/eNdrB5Kxlui886N7MXV+zcX105eFCrGBkwcb7oL\ndIY/S3oY2wnxmWktE2KI+Q833DD40kV68cm78zGLMUrCRaGOBCVW14vR+JIx\nsCOpx0hQi3t9TQmDPNc+IXjIVC94Isr70DVy6B9R8FuBmRvOGuo4VmWLqkSN\nvVE637Q+Ofj5krJeIpk7S6/PGzectf0vyONSJ4LNlnztJpt61mKDWRoI0dKW\nekTzB5P78ZxCHR2GlwUBKMuq9q3jUBbzAI/DzLRhPxh8cuQYOfgLesgg26KD\nTViQfXNkJGkJ2nv6vAGbXssdJTlH2VZA8Jfz12p+dKyOE8arvwXwVyuU2Nq9\nlXGOGQYqfB6gfSwq2LORg+GUA+vWg7YbEWCYp8dw4+4eAdi/9So+n2hqTul7\nz9KvfZ6APcP67dO1EqF0XmD8rKsQtLHmSJrk3l9jmIveZIRqsmtk8FaxCsNW\n9b5AIzihlr2yIg2zRSYtJwEsi4MSvzRCEWNqSRQu0xIYDpkNhM9GpJjuFEv1\niCUuX2s5ngohq5PdBinOW02XsG+3gDenOXfW2FAxvHMTWxjIjl3PYlRP6PrT\nozW0\r\n=Xlkl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b303320ed0051e5342bb2590d6ba2184b701a079","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-beta-ds.38_1605907479882_0.12205241068112338","host":"s3://npm-registry-packages"}},"2.1.4-unstable.38":{"name":"aws-amplify-vue","version":"2.1.4-unstable.38","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.38","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"0f47ee11d2c159f0760058e7cf372f1350214399","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.38.tgz","fileCount":47,"integrity":"sha512-RZ58JfMgNy2hdSswbj9jebZxdU4IbFajE6qJHoe/nWR/yFLOLU71cU9WGvQwiuvqdrR7a044+SRrOeDFu4qfHg==","signatures":[{"sig":"MEQCIE5Cwva3HW3SjOXP1aELpN8RILq1h3nwYdkPKVYXQRxhAiADU2uZdneX11ZO+42aj8JbIcUT74Xi57plzr1QQShy5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuNU/CRA9TVsSAnZWagAACpcP/A+gjSyZ8rt/fJ3KpmId\nKFZK7RrsQrCTo/6WvU40DZEcb+rcU7JalL9ifEs4SIKz7ir1sZUwhnj2KVhp\nyMYJJt6//jiaCT0xbAAYlwKndVHSZ7hVPoNhgY9lcX3usVVEGQwVC6h1PXJs\nLtUoi4wm2LB1nGT++kU2keUK3jfb4FX5FkKXRmcJP27fmwM9YO2J+2mNbtRe\n4CcVqoKHI2gq7y7AXtb1r9miOkpUrvTu7+8XOhKuc6TAXeoJF/jOjoCg0HH3\n4nMDOdimISU5xDLRCfCXiE7i4NM2ZtjZlFgCkoYw4mmlWFNy/3/179QrfFEs\n29+p5oZNKcHc63KUDv5BT9UC/Q0DLgJib/Lm8E/sBKmw7PIfs6WJB79iEWvL\nTGm9UdkcW/laEMyvs4X4R9tl3g6FA8jX+rY4IWCt9OuMb5Ftx7gLKwpGPCD1\nItqp1MbKErGJhhpijxOMbACbjdM3PKKDI9CGd+S3fXj+dN8ehaVXA0zBtv6c\nFhtjRPlUYayWwAA2hWSxWV59m3vVokbNeL0/9sW6oqf8LuQEytgRin1ttmVh\nS/6w8bStW3VHPGFFyD5LBux0t/ofJlf3bPbmUhGjAN0IMT0KNCvP+OcCXLha\nSuIKQTp1G4+cmbvUagVH+YuE2toUsHiojw8agUtBHLm5Sy8GMY9WxLfSgr/v\nzG01\r\n=+wUO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b7eef9dc2a03e7fa4d9a6bb7420a44b0731ecc35","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.38_1605948734793_0.9224652790635606","host":"s3://npm-registry-packages"}},"2.1.4-unstable.39":{"name":"aws-amplify-vue","version":"2.1.4-unstable.39","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.39","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"db1f159df7fc1d5e778f0cead1effefd77ad10d2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.39.tgz","fileCount":47,"integrity":"sha512-IBmMfPYw/KU5CJRM92pbQQYFs4t4IJIPnUiqBQSX8f5PhfzTu4nSha9ohylXaxzSvld+V/G1vwvhTPIgWMsxLQ==","signatures":[{"sig":"MEYCIQC4E2V7DmBDspvYYJ/tjaBMQxPmrtopaKstJ70fk/QorAIhAKwTPiHqZuvywEvHnQnk/6bAsUS4sBCzDmS0YY02Jy7/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu/bHCRA9TVsSAnZWagAAr6AP/2GByl9LM+McK03z+2yR\nMr+oz8DMEL8E7Tqc7L1cVTpg+VC+UyFknuQTQIywPpy24ltIo+XCkKJ05FqL\nKO7vPkG3BQnYdyTxGkxLtqfj1S0fbSJmeooFooYtLDtcPiGmGUUhc8cTTgP0\n7qg7P5sDGj/92RMMWtLRSlmAUrge8bLfmCBDhKx5UIocfAmQLyrm5DzLd5Yf\nvZUc2fI7lzirWKgDFfzkVaPD5ss0BWbxL5pP76GGxhMthzyK22sSBHOSlIKF\n9xR4khp1b/Jp3JlTT8lvcSVWw9HIKcWyBu0pdaqDGfV7jGIFieJhSYew8hQA\nL6or5HQaqU5wp4+faXkSoSi1XO1miL2REnfLVKObC9JBqhLe0JAL15YV2cod\nmhAC3gqtgC2K4NqwL5j6o8fWkpuHMXg61juWTPbLiG618pUyHGm/0G3Y70IF\n2HWDnkcTAL+AyjJr548k7QihcBm/q5uyoSENw+7KIEUdusxJeC+kv0jkGLVx\nGvVwSJI/vg/o1YUyDDfzsg6Yaj5uwEnOLbCsTtKTLIko3GBHi7FG4M3Y6xp1\n3AIBVWDxADHVW5Qb6Y/sO29++iiZXJECFdmTPut/W6MxohdcP6axMmj6EkzD\nqtlqQ8yALyIPLdX/7vxFh59bvsEebj4OA4dkj/3eSQsVz9ccCG7wn4WBMoXv\nhCUw\r\n=oMs4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f9e6774f5fa7a8100a7dc99b53c563221b4773e7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.39_1606153927192_0.9589368751236338","host":"s3://npm-registry-packages"}},"2.1.4-unstable.40":{"name":"aws-amplify-vue","version":"2.1.4-unstable.40","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.40","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"27c5196ac7d63d8d4d37ada40f96e91ac6eb2033","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.40.tgz","fileCount":47,"integrity":"sha512-fT7DEpLo5o1ZSrmQ62mVuQzv0mdKpRStkloHFw5V4wxgpIb9CUE86X2avhCP3mUSufCUvx7hAqGEFu9o7JpE1Q==","signatures":[{"sig":"MEUCIQDfTM1o/q9ef9OpQA2f6H2Nof8PDnb2pSXQscqgQa2C3gIgCkdzOyiwDhNNjZX2vfqSqMnBm5wFA6brxth0KHfToSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu/+QCRA9TVsSAnZWagAAcRoP/0WFBZRowxslrZunsf5S\nAbRFwP/07HbaLJVoOoFV19C/MmXNkYBW/qgnbKEOrY7BdO3rJBjpn+lJvq8+\nLM6pXssY1PL/HEbGczXGqY6kYQDEuTE3Tcn/Ffcj+gi1SXhgDGosNHgXgEl7\nOJjaJuhxZdQ3mi+SouQdAWy9JZHdMyKKf4+hd/ZTQc3QBfACcflw/6IXomPf\nqmFtfLBGZUpiflcAX767mYpdoTDTOoHLL/uuO20PwEXvOYvX33nY3Rm/gqGr\n9wFUpNdC/ysfoDWQPPICcrf6mRNtQWZlLXYVxylLVu8363tfLcfVEWJIYd5Q\n7Cnn1ZSC8L/KH5BMyRCYavOw7dtrrM50QpzjPdWeHxfBoMHc8VnZFV6Ywny8\n5kNc4HWeCaZzw9bE7AfBHCvG/ZK9p224EOKql9RvTBO67wdvxWkjq1ljC1Jz\n1X7Fm7+2VFmUWje33O5JjIBydcenFwTaxv7YRoPo4rCaojCaL0mwJko3AYTT\nZm9+9VUEQsxe1p0E6C/91SUoPdN8Dn8i53rDjM7jgaE+P10AT2byadoQUKDE\nKSGPjtwFtTU5GM9rXSLamNjjnbSIMLm8TKSc0/3O1xMYJMep39AfdapiUZuK\nu8uTGXrq4U6YXN3v1/UuA5eXa55v79VtnIIr7jQV7DCw1VVew6CxUrDhcnH5\n9D3P\r\n=hg6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c7b82f2a8914cad917f448eca2d7dc3360a3f50c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.40_1606156175943_0.9417729440750873","host":"s3://npm-registry-packages"}},"2.1.4-unstable.41":{"name":"aws-amplify-vue","version":"2.1.4-unstable.41","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.41","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"8394621a8500716cde5bd138ea11ab066f77618f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.41.tgz","fileCount":47,"integrity":"sha512-ziSxKTCdItAptoTJKGC3fTXDRzKyI8BSnuRd0hQskSN5bWB0snJXiGJvwIv2v+8fz+mrpsD/AEuocTxfo5jrAQ==","signatures":[{"sig":"MEUCIDIfttjbpdoUF9XY0M4VTbugwnD0A8R5LLE4kAFhBGiEAiEAmJ9MM1qL3l0WB+Oh/Nzj7WhueMO/dgE+Rl3qh2u8kvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvCsqCRA9TVsSAnZWagAAe2UQAIz4TnfjoySSmTH8EOBs\nXPLmCl02XweJjVlr/CJribpyHsqR6kdz4ctmRoOBzLhRW6dZBh49N08d2H2j\nuIkJjq8L0uidotx/qpONUgpoF6ZsDdYqt2nfS45KFewmUkQX8PveI6BsGwSi\n7vIduHSLFYNd69uOousIwv2MCVNYSppDgQA74lky8uA6n0JrhOVMQz2/8yyZ\n/PX/5eoe2NbfiYhbnENVmyiFLySNm80D1aMe96sMPuhzrEYYCHt6nP69oL6t\nSBuA0qschtJDsaYi9sSVGVmayZ7MC5pyJzBI2xhXaXJnQhdNYC8tmljwq/2u\nyqruXtCEoH19j4dFiS2cG/gVKYrl/oGzwkVzE2cXo1LuZJgJsXwVovu0paA3\nwJ6anjj46wZXFLy/ACqrH2cHiiOo3Azw/g1NDVxefiuGyimObqXpJ0l/+nVv\nlHWR/OlReTa0qFYC1jRMYbeYWbqH013E+CC9hoLIvox4XaOFMeGc5xqU7/gM\nHZtii8MSzNrZc/6ff6xYzSRknIUKh3iXgmTZpO/JLGJSp66CR2zIlR01ey35\n9u/uWrLUbY3LtY2+rujG019kU81Y8mELjqIBjOKizdlKmSBw/v71nosqQz9q\nErocw4rHGRcrNYtfjZgueno5hvvMRc4skZxMNT/1SwLVIis93MeBXDmPNINy\nNPEv\r\n=ZBGp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7428c74bb7402fe230def58e501d6e58ec351f3e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.41_1606167338202_0.9895435005471955","host":"s3://npm-registry-packages"}},"2.1.4-unstable.45":{"name":"aws-amplify-vue","version":"2.1.4-unstable.45","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.45","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"70e93052037b85676664295893fa61c8b5ee349d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.45.tgz","fileCount":47,"integrity":"sha512-gLazyZ0sXSrCpXyDwFaxdfS4LpDRpfZMQGcsdCOZWWyFCCqq3Q+7KSwJYfd8DSxXqLgyUR8o3dbF/oZQLpcf0w==","signatures":[{"sig":"MEYCIQCZs42aBekUVF/S8k2P3kLXnEOSku8rHRNjXQ4sdwhWFgIhAN/jfQ78JooLpwW6zhlFwQWnxHXkf4Y+fg9vVVDalp0n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvE9QCRA9TVsSAnZWagAAy2wQAJ4hAbtjsMx3LqqVkBKw\nYCxrXif1R4xpfISyD+/8iN6LJmsdOzjqU/KsZ3iLFNdyu1iscdFn8YfbMpGc\nJcl9c1ODFOkCubr2/sK9oEbQ4UZPY2++od543Bz57CB7ENgywu76+tTDwz3h\naoWHGkYkA5fYCxzXKM6o4argXqXUEi6Fdn+KxcPx6TgRrRj5VHkAzgC/jv/+\nFt1wLuYJNfgk11wzOGdYF0XAvLqY8xFzsyOu/v/S7LW9Df9gT8Jue33u4yUA\nf3fpzF1oAQcIKmz/50TRjQlGvuDZhAWBOB5LhmCmORl3XieZ1SphBViZnI3v\nrRAyu7J7WADGSaAlkxfnNiK17XFyZIj3LUKC9VXki0Ee7Lzgp1X3VJKb2Zo8\nooCCRt2nylArdZkLaFP2XLSmafxKeESxd76K6HQNVfD1kl3jG1Gif+eyKdWX\niBmJdmcne4tKzs3zTrfWzc2AI1VJZsD3EV72QbzN0QnnmQQlw8jpDv3bPlVy\nCFub+IN5qRLiKFPbLsd92S3/pV1AjeHbEu4dJzxjUNhO56YNb0PabGgdYK1t\nO68stElM/EXHezc0GmrlqjhjreUK3lmxUzW4RMRUPQd9v5fGhuHMEG1gKqOY\nTvFRPx0Ca0t1VLspztn7IC/T+QT0/VxzTcqBjoeVm5wmoG4AmlnXYhRxRPhj\nw2oL\r\n=LS+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cd8091186778c959acc6de73b43dea393b4711b2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.45_1606176591925_0.2687704574324259","host":"s3://npm-registry-packages"}},"2.1.4-unstable.46":{"name":"aws-amplify-vue","version":"2.1.4-unstable.46","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.46","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"966baa5be705949d6c256f613f712532eab71d5d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.46.tgz","fileCount":47,"integrity":"sha512-RpqaTI+UNaN8iMT9tmi78mpAwFJnxhG+QS7JgyDP5uEeYczJMFnyy8RHgGoZhOCr7rokdcZIeJhlQcnqvBojVg==","signatures":[{"sig":"MEYCIQDYGf24KzCV2Oj36zQR4oNNMjtUCpuQRadfaMz7nMeJMAIhAMAMzkhsGd4QWxAeO1eKi9e+GLojWABKvra4vxOJs6pU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvTzpCRA9TVsSAnZWagAAKE4P/jNop1PN8C0ncBANwtXG\nQQpChNwL+9XPLRttoMbQ2jg4nlOwn/Bld2f6MzaolaJezMf7gjKRgaCHlUtx\nX+pgy9lOsfm4z7TuhR77ShTbhNDNLyIm6CYPeAc0D94MP2sEf6mj7jAA71Yc\nDFZX4nLHuQ9/vBg1EvTFE02y2K9wFjc96h1D6yP36nNxR243iXvqrhdkpOX5\nf46qEF+zdR5p6FYYH69pAPTbLdMIwnKhTfUOlcZ+dUVdQeSmjin0k6uqLUQq\nz2JZWwhXSSkUCIdkxSvv4EFq89UW42ilahpDQUumxjlUaISfp6Pnj30HQ7dT\n9A4KBmxyDWaQp2dlkPUc5rmTdtT6vnnsaA3QSyy4r68ph7XhbmRw0I8y9wQR\nwPdbqd7Tmi24OHsunh5LDxNrzFssHnAenPv0lxXYD9LONoYuQiPdZJhsPYFO\nW6GHRc0WcftVcJNmdxwml1R8KGntOvWIskEbW5OwCFAqa5/6tG/N8LDYXRSE\nMAG4gtKvWlJLdPuauqBTP5d/7I99LtKJ8DHrlMbYenp4Ic8yqOgPN5qd1X95\nqwIJ3uFipO+3ih61XyKLMm+qZHoCdjqenCKRi3EBulLO8KAn0tc27slSzHza\n/OAsYP+y3FCzbMsy3YZYBbRg9AswR9izDSxeTXDhCg8aJ9UPu4roWRAyK9RT\n+KPg\r\n=6eg8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"63e5baa4293bf6688962007137377d19c5ef8904","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.46_1606237417305_0.010896639452254053","host":"s3://npm-registry-packages"}},"2.1.4-unstable.47":{"name":"aws-amplify-vue","version":"2.1.4-unstable.47","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.47","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"43a024584d9f1a6141119da9ace4b9eddebce222","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.47.tgz","fileCount":47,"integrity":"sha512-6W3+ViZFsUvoTrTjt7vSIYUIkbnlro1y3zCEThLkF5dpZzz6bzhq775InP6MjsTodbN/kGMWb7zA3DnFxfn8pQ==","signatures":[{"sig":"MEYCIQCYZyQeFIAZr+Ma6fXu7yxmR/IAdnt4c4UgmQxi24XpkgIhAN+h6RDEpq7w2wQuj2iIipqGl0MbypSuyKgTM34BC4YS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvYKiCRA9TVsSAnZWagAA4LEP/2dybCgaDjSyJTOPYlOw\nW9rhYjuXZ8iliyIxDe5odfoC/SpoGnJO2iLS4Yu4TjNgwpHdFL1kg2EH3I3u\nIcitUgkH5TQs86jHsLux35jAQk96DQ9iMHz+IT2LqaKw8M8ORB56W8TFLief\nwjJOp2i32rGpsZIwDVbAvfwL2AqN4Y9J+2WJYoHQuBv5uWN0V/gqmIMON/sz\nkUVurIHrHvJLyhjtF/gTvhoTQXU688B4VtOYmQ2SMh0hGcnMBvgzFO2SnatM\nNmfA9fdpBHXeRrWtiqV60n9T4UfFj2WnzsGLg8gSEwqr5ozTBj1fOXjuahK5\nnbOKY3nEPJNFk8NCAnfN1AWkA8OMr82+Np4w+PZpJadwW+/UdzP8pz/eNv3N\nU2xpSLs2+e9Z+UvdADHmxbt3bsP4ZnSpogLcwlXgA7XNs6zbXkGv/uZI/exD\nmPWus24jCOCCimBiDx2UTJxHo4WQlDBqfoCQSf54Ff867NofpC+Ei8OH2BbG\nSJZ6Oo6v11QOE9gPBcBYNoS3Ka2Jme17LJWDsMfDWbMuvH2baIGPogGi3emO\ni58IWkJZcS0rtLpJv9MrkDUmFKXzt7PPMUz2qokQgrbBCxV0pMclFOLORSfT\nq9/CA9bE6pL892uzjK6tndc38OHeoMP3uRAlX6HZTRtShsCZxchfSSb8XhQt\n9xDS\r\n=e9Nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ba8a73f41db6411b91b208fea3202408c55f029b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.47_1606255265882_0.03859779759858917","host":"s3://npm-registry-packages"}},"2.1.4-beta-ds.51":{"name":"aws-amplify-vue","version":"2.1.4-beta-ds.51","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-beta-ds.51","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"dfa5311b67e74fe11a58a75e2cb5dcf35d4c861b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-beta-ds.51.tgz","fileCount":47,"integrity":"sha512-kMWVQbbmAPuyfNG6A/MeJymrajRHc4o8Ur4nEds5yuaUpXVXrakzarCNe4kL/zVPWkd4gRqc+2HVdermDkGEAw==","signatures":[{"sig":"MEUCIB+5W4kS+x+lYw3aB9RXndccVlNq+VhZa+dDp9ecnbukAiEAgV1ihDh5goaMKvLuAln4PeGDKSW4HvPcy6UfGKJKqRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvuzyCRA9TVsSAnZWagAA/AUQAI71G47py7SAybYSKkes\nx8tnhixCjZtnlFZxyqJMzUMp9ljplq9T40zd2mk0forEWvkH/Y3wwKDPuhD2\nU5kf2jDU+CyzNSv/sTrFo8YMWrImkoucvTjSE7bnj9RtaZwqIo8pFrqr6ab/\no/6m1nY35ze67Pfm8yo/rYmqzDb8ZIQY3Qk1cJqTdDDwAnGpLM9l/WJ7vJ9z\naUm5shVK0od+cJ03OFvLogt5En4ibth2Kqu7QeeEs8LEXTBy517jzLY0XPex\nLYx9KRDXcIOh8qfva5wlQSKP7kPOJnEjHSmm0aVB+VXCvp85zuV+q7Ua2vsX\nYa2Rr7FbEGjsTkNU+64mPM9zqS5+yyZ7P19Y1i/m3sa5iqYokWkJfQyivstL\ntI1hh3dfz/Afi4b4jR6hUXRWOgn+GLZinAOS7YSmxrIIvthDjAKqIHvrcH7p\nQIcUePPJfMzhzqjMveoDA8zxewDLXt8GoY/Oj+OEHdhCqKCbIwXrRDbh75pa\nIj98waMldwifPr7Z7M0RWG2vsURq3pf+/P/3X6c+05wsPd61lMnidVVYtCE4\nxkO7yGQ3BbDTjcgEr3J3TjWIvDAJeCL8DIDC/+T5dHyA3upyZSrx3laUJ8c2\nDtbh05spP7HzOgxj3Mdjai9hRW3772rIORcWRCd/0qw5UiD9WG6zd98F2Q+U\n9l5L\r\n=mU+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1223c64420b79e1f6b0041cf74781942bcc35036","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-beta-ds.51_1606348018498_0.38072812293640457","host":"s3://npm-registry-packages"}},"2.1.4-unstable.48":{"name":"aws-amplify-vue","version":"2.1.4-unstable.48","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.48","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"99df6876076244c0862e7112ec69b8d2c8d123cf","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.48.tgz","fileCount":47,"integrity":"sha512-Zte4TlCIn7JRuiIPg6o6dVIbTfDyc2Iagi8oiT3mNkqjwUSIKP7Y64FAK/4tWg7i5uoORmK3ukurJ1PYFr/Gvw==","signatures":[{"sig":"MEYCIQDOndBCWjH8zUicOveswvCt7dRCR2rjD/o91pUWqhJK/gIhALw+e3mYDrNNgKBivGzi8tWeNQ8reVTbetBlHvpKZMKw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxWHHCRA9TVsSAnZWagAATjUP/0c6HOHTovlsQae8n1lG\nWkCKr7Zo0j451gnaK85i752X7A+AQhFnCJPm6/SKLS+olDNzliSy0K5rWAiG\nEAKJLoC6NO+nJcr1sCH4KM2h2b33Y6n1y6yiiQgpOlyZmSEpLpNW/x0tPBz9\nyDdZPaULVYWkA+txREyCmP4fmjQNOcoqSRt3IXBdgdxmQx/UUxl2y3IioWfJ\n2q+BWiCa9tOQ3whNr+WRtb61yjFRtEvT+ZPluvXyIF0uqKgBh9mF6aYMYTT5\n+PUb8uW/xrC00gatB2bKnE+NAas1f83khS4Q/aqQ4fFfGqc23WigkivTFvs+\nlATzFe0l9S82iRB3qnAYv/c9eQqSEJir+/yktZ2jRAbiAp+/lgx0dL4rssny\nz5srwNNE+zgcCO7vAp+0tnepPiv89bb4m01vrL3LOzEXVs26D8nYVQF+yR15\noyQcjf84ZYZFJnuS0kWhDiACeQFboKLns8B5GE21Bw71pg6eKEpnZkYDJsM5\nnrhiqRk1/ab3PTuRnso+q2uKfH7ntL9FoAWtVwqNScOzcb75hKXLHGzsrNYB\nZ9uzHbbyFSPxRb7EXgxUkHsQTTbg2iT8O1dKShu1SgUlt51WCVKT76iqZ4Xy\nsc+2TbisezTMxZcl77tKaWSctEUZ61C9xhV+HtLxbWhd8RShdBXg6LH3S5EE\nTfMy\r\n=+iAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6e28eaf37525ce231d7793bf82a960046fc7f8f4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.48_1606771143405_0.9203358287972576","host":"s3://npm-registry-packages"}},"2.1.4-unstable.49":{"name":"aws-amplify-vue","version":"2.1.4-unstable.49","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.49","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"b1fcfc636f5608f00e11cba6821b01b7fb85788b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.49.tgz","fileCount":47,"integrity":"sha512-nTNaITr6OjSkWCApVcbxKkCWz9j8xc0sG0PFQ3J2SjdA8rLmzmaYSsMlCXR2dBexU0FoD5s7urBi3CaR+fC2Rw==","signatures":[{"sig":"MEUCICeNRbfCTb0OVl5NcZhXZ3fq+7fTdRk39YIJYURxMfUAAiEA1spUXl0GSrn7B/sU+TGA2mCYd5XEYplcuY74FtiV5z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxWt8CRA9TVsSAnZWagAAGiwP/0wbWmY3xWDaGwYMBHWz\n3Ril9fHQUAiCX4qoclZIvBmqTvPlMvmRlhKeDr21UWbvA/whLFovvrT+zZ7+\nG7ZY/9Hl/fldpNexaksnDibQLfiHqmu1itFDePUNSFtxAU9ZJe5ICP+iQ71a\nbrQVl8qsADoyEURnQS01cFpjHOqghqdHIbzIxmc5DmjJfUTyW+hoPb8dFGzi\nZnI3w5kBgn5sjC1Gy1zqfsWtLysQdMB9GiWZlepAzRbsBU6ceeJEMBnhxlv+\ncOyCuGEn3yeAqLe9w4eLivAW4uSA/SHUvv8q5FtaLVP+kH1VTa0M/9fb/OL/\nREBduzIainG/NLz0hlmKlKeuc4O7h1krpjKL9AH8n+r2vTsxe/XeJQNKLleY\nq25NEwNa/ktWLw7xKAmj4fcKa77NqIwZ1nY7An8fsmOM2kM/4LLtgwCveqh4\nw1jZNvCb9LQwM60U0ea4zpmu1blHn8T+FYJ7w6adJRXxQFPEm6dgeetAO5DO\n6iywnNxUtuecC4GrXzcA1dISBIRf/XuaTkjsmNd0IMp+SacoGa+oxJ5aUhzj\n7ksN/0DX/Mw2sV41PDKuKVpXtCbCbBT5uYuRoldZHOOHEQmIes+wsaGDqXSp\nY0WbZ7fVPJMX8ikeq+VPmeDoTcjEMPvnzbdh19qwqcGA5hw5yvSaq63Zo8w3\nNc/+\r\n=1+y0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"039aa95f9a3e791f09d7566bd7baecf68c7c8cb6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.49_1606773627736_0.529255228535324","host":"s3://npm-registry-packages"}},"2.1.4-unstable.53":{"name":"aws-amplify-vue","version":"2.1.4-unstable.53","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.53","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"11277c3823e7fd8bc6ca7013a00c8f8307dca677","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.53.tgz","fileCount":47,"integrity":"sha512-gVU2qrta+NNqIbbLCEn8QTSY7eXQcbh1cP/w9acLso8Nu8znhMJtC3o3+dOONge/kh4pFKrgza/fQLONV/g71Q==","signatures":[{"sig":"MEQCICn0GMbELo0nygrAZPDpsOfgnWuF9XrLsrOtuc4j4AdaAiBTkTxxmkDizn6c9ZA3P0KGBgxcEFVSFKjBRA+gbyjg9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxY4aCRA9TVsSAnZWagAAfccP/AsJB4O9qI63tfJJ5FQw\nQyw2/gGpn3gPZbz18jB2SgDq7RhY7/UfnANNzt7hFhSfGiYgD8AkS0HIUNBe\nCVD6QoKO8bVNFD2g7gAgCEFs8dCXdrrCcJVmOR90JNrcFUxQO0M6jxKqzNFs\nM7m3w0OQNUvzED7HbnBx/9L36cqOikBNMbnC73Ami80szF251IrLS7FMAbRO\nxGDyvZG9qWnuudvZkJELANd2yfE/swRjmHbktIkxPvovvO9M0n3tmq9CEVUZ\nE9jMdUYK1AXvNJ8yrVImu6PN6MyzJXRsIDz/X0CLthl2t67OLrXR1abM5gHh\nk6XYJaCbh3hsW0QBqqbvtCBajFUTldNeWqyCNEjk3MH3b/7QddgPFOm9rxmC\nOYatBfZotZiZmVz+xr6J/8Fssb2h5d1X0DZ4uLnoP+cYgt105IL7pLG3Q5tc\nsAhZl0u1FcdT4MS4Krs6XJH6/rZnmW/gbS5AgLExkgVMWz/tLxMYjZXVoHES\nasJx4dqFk9QBvmwzPnI+C9/4XrkT5QphuN3+FxOP0E4o1ZpJAYJxWT2wswwh\ntJ9SUVlsfU0+dWY4jHL1G03AVxbrEo9XTP3bcDXcO+bGYGI0T86VJdVT9Obe\nIGmBEZW6OQWDnk6OgBlNb4uUXivWTm8CyaeFeHJphKz5RLGTVGEiQJ7yo0KW\nW55M\r\n=ASwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ccd7c2e5c8320fac0e01d59a509c7c9a08f65b9f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.53_1606782489655_0.7495408114292021","host":"s3://npm-registry-packages"}},"2.1.4-unstable.55":{"name":"aws-amplify-vue","version":"2.1.4-unstable.55","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.55","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"07f3075d3e89d73c3d7baf6f1122ac13a7ae30ef","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.55.tgz","fileCount":47,"integrity":"sha512-Gf7H/cV5wdkrssv8Xh5DE7L9cE/i/PnKeJTg21993THksoO5/gqb3Wox58Oj0j0bS2FIfp45YWrasccOW+POpg==","signatures":[{"sig":"MEYCIQDTk+4/YFMCbo/AJuvco0ImpCsln7lRZ+ogVu3fqPBDVwIhALNtMCF6zIOw+lcrh02D/5zUlQngQ9gSYh4mxiIdGFEb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxatOCRA9TVsSAnZWagAAPp8P/2QLupQGYgSg28qnHc1W\njhBriFg2mpd6BOydNlkRrs6lGzCj2VEjRKoAlnUgbrBqq1p2a+ERIdj8W2gX\nztGKO09TJA37ci4uDlRaj3N/4wnYpO3VoxIMpD5T4NysU3cVzE1i8SJAzolb\n/E19f1qvDwIjwKdLe+10MLqriYxljPsjo0nr0a2U/Z93i3MjoDfp5B/GKprQ\nKEHy/gBhMPF8fHeF/KuEtOWzZwM1gDo8pTrCAhmculqlsxsKwwagubMZliIi\n5EkwJQKyZ3IpiM48NyEDGC4Pje/EQwNv3sJZGoHnyag5z7po1T5grJ7y1PGL\n9mIbtB8aCZt+u8XmN1VRU6uJBJn42uFda4VndcJxvb9eouiJC8WB1HEENcuX\nyP4S8qdcKx34Gpf5qqj12k6IPr5E4L29wweN9z7LH4Y72FYvjGsxcoThIBLf\nVfnCFZg+ebLmL2Ms/4N4V3Qd1o5lGEurz8C61vExkzHJ/Npq411hdxxfgsnr\nPRXqdmrDd9lyXbJcCKwTV+SOob0C+UsT/AuGuKJrGxkaxleHXcSlQoCV8+6g\nENcaJGdVYSfXo6dIgsFt9mIKQaACB5KWlCe7sAekuKcmNYs0TljOUZBA6xSS\nthShnkZ1K7SikNH0hzC+paYIqWiuFiA/PcP4nrTcIOfgjXvuLX3zSeNe2Q0O\n6A5o\r\n=1X+U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d9dfff3eef7e5909f76fdea6054f8c02eb7ac8a2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.55_1606789966441_0.20026147708117437","host":"s3://npm-registry-packages"}},"2.1.4-unstable.56":{"name":"aws-amplify-vue","version":"2.1.4-unstable.56","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.56","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"279ea2bbd757ec7633ed48d72d8bcff5c6641a75","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.56.tgz","fileCount":47,"integrity":"sha512-2k+GavUgBrfBp2UAFkvlEGBQiSWLf7gNQQiBMwEdYEbU3WqpJAe7ZiGGhWgUvxml1uPs/KKeAqnA1FjL1u5dyQ==","signatures":[{"sig":"MEUCIDO0doX0nfkR/tn+0oYwQFSani4bOCSYGZDU3rgRmLvCAiEAztlUxErjURMJE2D7yHlkPtcbkomy8/FKDwXDuTeq06c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxsxCCRA9TVsSAnZWagAA8XwP/3r8UHVjM5qLHoEOcV3X\naMzSEju+pQqr+0FfPdsMghkQXX+gcdkjZSxz4t5SFukm3soF5s53uXQOF1RG\nenmlCuKea9AEJpUbyELhCPyo6DvA4ylQJozLsOGeTshqjUMLu3X2xcG8B9Hx\n7ac4lAVX8Sp8iys++9UtkI9d7FYb2tPHGQexpiOCSRSKx4b1yWXCyKwMrI3z\nPLtya7U2vIYiCIMa1NSSCl1Qfp5RQizeJsrSs65BnXd0C7b/vwaqgEO6zKJy\nY3k3wiPsKBoYVFHqshKSvcGhg8Z+FxbdNj7hVMNX1ZI5ur5jEh1K8ZSzKWhT\n1ZrwsovgJMO+TD2VPwvTJNzR6nYlBRN2p+vUpaspm1RzuIgKa5O8p73Louj8\nBmYzgDvisevSiRi0USrlzK9iGk0Qelnguap3iEsbKBEscYMsuyLblyuX2v8m\nL2tlkKKVRfbBOTabUnblKfFKNThE46UnWy75/IBrGKHrjmMw3GiMXYNLRkdw\nY1P/0XmACGOTWdSdwRldOxbDevmL6MdocxzqHBCt82y2DkKRbm0nbdSHmspu\nUHboMQ7kFrh2pYS3J3p9NeYg8OOXEou4KqE1hb60Mdg2YvDLdmn19UK+9jYU\nYnNgXGi2S86nYBEKhF3QcZVo76oL8M9AOgPXmDOFOEeGvrmqAk+q09XJAvfo\nR4jE\r\n=Jpmq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0b82781e946e6bef15f7b162d0ea538fc8ac5100","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.56_1606863938243_0.2399115316213798","host":"s3://npm-registry-packages"}},"2.1.4-unstable.57":{"name":"aws-amplify-vue","version":"2.1.4-unstable.57","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.57","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"b8588558c00b490442f2dd80e4581e6645251291","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.57.tgz","fileCount":47,"integrity":"sha512-rasAIQinpi0mgf3KMpGcsJe4Aofu8Ttm9mqLnVoiip/MzdUGgn5Qo4X2HKMA5YvQKNZK0pNnwwS0wfsStZKZdg==","signatures":[{"sig":"MEQCIFjaA77JF/d01+78HxKNMBsEudFNgY8eChor08iMUlTLAiBRAUTNqCslLE4jAT5fu9gujjWvZVk+znaDzHbNkb/MsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxtkzCRA9TVsSAnZWagAAaOkP/3v8ITXh8fzIJtUKlYXR\nqomeEYqiP4QqZpnD8dG6jHSUo2Ecuaj74cR5TcoUV1MrEam4p8n9ebDyj6bd\nxWqoq/OP3joFgFcLGKe+iDb8PTUm8gg1P44kDCD22uArNHj47Baa49rCljhE\nahWWIgmGyUG39AmcpTNKujsh+vpiy0OzHy4ug/oYLT0eUfLDsZlDw+6sFIrA\ntDcy2ZAaVPWO8zNtA8R+9xEQQe0c1iP6Dq19Haa5F3zP+EIBSOLJgtaInDvR\nAJoSAAGXroo6RirgdbFbn0+fzn5AdROyhJ5FwKoxk3stzpRDYlV/Lu+mi9O8\nKPaLMq4lZdHgv21bReO8w0GZqXKRoHOuMRp4PZUcdk1bEZLc4ETweWbcSL7y\nCSs/0cq6xcVJ0u/UZ1dzceR0bYPfC6ECormgpGr6wLaJEpGgQFfthGWN6XBn\nT+iYepYwyC3Y9uZE0d7VJjUomOGiMZ/QCSFWMpmYjpp0aXgxOz5dOjQ/sPMA\nAcgP8Rxk+N/TlLsOO/I64ZErJjMyBlnurbLPHgVQY2EVVWtcN1OW/fXn63B0\ni+ql156+RLyUUJLSC/jzH8k+5y3p4X86R0vUL3pV6IVAhd+r2xdKPNvTJD9G\nBa/1Syk1n8AKrJPR03Wwm8jzF8N1bQ4HpFdRkAzqNxytXwRlfXh3ClcE1pVG\nsmG+\r\n=wdYC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"84b4a8832305a34c0a84484dcc623f4cdf036b10","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.57_1606867251319_0.344565946162245","host":"s3://npm-registry-packages"}},"2.1.4-unstable.58":{"name":"aws-amplify-vue","version":"2.1.4-unstable.58","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.58","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1dac9a2a2c75b38cd55580fa36fda07a0d6626c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.58.tgz","fileCount":47,"integrity":"sha512-R0QQCTE7RowpulXdu+9jdstjUAMRc9iY1n1DquEaPs123fOKepP9hZpkG8W/UFxqcl4ZwswqFCmkM//ZXg+Kpg==","signatures":[{"sig":"MEUCIFcoBwWR9iGKOVY++bRt1joynAPFhwM/5AKizomeUZsmAiEA10esh1cd21LNtAfDHgp3sRrnyq/FnM5AFB9m9jTKw8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx+KzCRA9TVsSAnZWagAADEsQAIR7VwsFLqsNF4JBq/r+\nfzdnl6FGf24VdDROLj22T3N1gfygNZ0zcST1cVlQsycnxlrnqIEPyQ/goXB4\njZT2zKrPJQ3VZG4k6bg0hjn/JUFQUv7KNi9qEult0Gmz+5lwEotriwli1Q09\nz9yMsESd4XSWR6Kd6PmnTXDCIE9C7MpOBR4QkBdF4lEOxofDCTMudc7lb4QG\nboE3lXTuISVNT5C3Db0R01aTkda0vjOAm21no73IHB4JJrc7Ce5On8gLv4mf\nXomMoS11c5iFumlttG7wyv8c2kzKOPH89oW5BDAizja0oHwvbqTS+UMwvnVE\nwysZscZiooP0eA1OWgvVuFVmb2z9TdnIp902v5aQmNLDoOXLW+hNvj4xebiX\nPOGeoVGVYmOnee8oXKHzw4lw8dGIPXeosFKmUl8ZqnENrecUMtcyRvm61J3B\npq/sPiMkn2q6HND02kXkX8UmlxK69CjuGuw6oc115eVNgm+Lo3CbIQpOJ8k/\n63y55hpM7wvW2kwquGbw4OiqbU7miyq4GsQbm8sCp544lCUrVsjugSnxUycp\nbaC/rtsJsfiZTuo3kx3JmzX9fDYXuCOalatbzfRrfOpRna4HOt2Kpk6o7U/E\nHzmNw9rU1lnnX8dxjp5WHc92YjwKjck1xn7kuuWghUFG5cRwWfs0sYf2Pc2D\nZKin\r\n=5wHy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a3f572ef0f6a8d30a08c859fe3d2107ccbf8e5ff","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.58_1606935219290_0.7649534506984625","host":"s3://npm-registry-packages"}},"2.1.4-unstable.59":{"name":"aws-amplify-vue","version":"2.1.4-unstable.59","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.59","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"ed3645c8e840ca7cc50f1959cfd91c9da1123f26","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.59.tgz","fileCount":47,"integrity":"sha512-4posMBWW+Sd4W+ZipiQX2KOEDtd4b4BsMF+A8EeXstI5DJWe3XZmvXyrKzDKKeBrdDIsFeaFc08JrjDg3/ksRw==","signatures":[{"sig":"MEYCIQD5O1LaTayhUwt2LX5kKl1FBYroCvc5hHbYcd4/zfxKuQIhAKmz1hKM25amccgDExGRiQFn5/MMaBllYmXLSMO1CJZ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/HzCRA9TVsSAnZWagAAWS0QAJpqu5LV/fmmDg5tTvB1\nKMbFSJcf+KTzUHGH86lEKdCRWRJ46/FMTuFmQF2ZwNbfZ1FgEMU7aaTbFUAM\nNZiF8osWKXUpLGjORwnv/wvtdXd+YdtWcn1vXJZUs4/JN9jfDJXzlXpR8gVy\n1fc/aeGSOd1IJ5YqJQXYRnkuI13x88OwpcHgrXL6Ou5FfUMFCVFgi657pPl7\nXbOIEiM9g9+vDQvk/GvZA12LoxWMZZdJJxKDgFwjYFPmWz9imZeEyBrZe3HY\nzhmnxH78Le7bCXLZcyGANm11aZLA5wUSDfOOk/4ILRsXA3uiQBCuoFPq9iQ4\nUcwdWfxLH7imaVpMXlMC0Q0+rGSayPq6wLJkWjRKD1xUQ1oV4QKQtcCSB2aN\nTWWmZgIK9zLXlLNRdQaoNCFfP2blQ5kaxOb96k/Fa0hYS4bTDL8aMhS42Mc+\n6Vmkqq4HT+OJagttR0aouNSY1rji+IOoX5d9u7MPvV5eg3kGQMf3I615fSdi\nFWCoaoji8huzuKKOghvX3UT+5j7pzRrli1mdlX2z/EAkC+rhRR4PUwYWddIi\n5KskJomjExGm1dBL0Y8KADsvru3YX3vPNBPmCUAlRbIkp/yxnq4OM+jevca2\n74w+Tg5PgkjOfLvSu6obU6mc94Q0Xq27unxq0LIOVPFmp7DPdPKFZQ95KOT5\nSu98\r\n=dLXk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4d0a2e34a21eb96b9085efcdd8f7846734bf33f7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.59_1606939122967_0.84673377271991","host":"s3://npm-registry-packages"}},"2.1.4-unstable.60":{"name":"aws-amplify-vue","version":"2.1.4-unstable.60","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.60","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"e60469585ccc731d2781d1f5b37f3ac4174b3822","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.60.tgz","fileCount":47,"integrity":"sha512-U7bzkgFY0kzqDMllwLjuuaas7y4hrK83CI+3KshNefCUp7il7OkgUBL/mKLpICh1SK2bU4+et+c/1sikQG1ZZw==","signatures":[{"sig":"MEUCIB6h/sUIG1371Y5r8A8wjAifQMVsJ/7+bBDacQi+oRPlAiEAm+xJNaOMzUu2u2v4xOWL56i61GW4GrE/DHNfUr64eKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/wuCRA9TVsSAnZWagAAkUQQAJUnETCApYeMzya6UPNc\nloKiXqUtqa2tM53sIPzVjN+fQQ5cdLP0CWRZ6BQhUwHjQvknqX63M2HkHvk3\ndBQV2mu4Q225xShacgm1f61h4ihSUPzYagCnDAE7QkSLSoV9x3wyuhiuVwCn\n/oTejEvSDK0sxynsKKBCn6e0brL2MnpwqSSil45H5mIFfOmAVpv7YfhsAcf9\n8/KlL3fjN1nG+tenl0dReZYEW+8Mqk7oD95b4evL9g4/E4mCu4m9VVa3jGEU\nIkYpUAt1JvUEje4SRyIhLJsROXb2pYHNTH6t9ZMFcpOkF+Fa0o+YO7RjoiPE\n+vNjSQc9z1fsqd56HT+K/bbV45WcLr4t/IY1yXZTdgY8Bk1rxttGajSfzr9l\n+dd1I10zwFvcqpElPbk48GB98N22oDO80Zd6gLNUm23oqbszQ2L9C+4DhHsc\n/15u7ULlS5cUhD854UQ7xnFVMXqSVmr5ZL9CTgbfpbt4i8hww00pQeT/7zW5\noWu5fH6iI0VzflCNQnkSd+ZrZ7W0mX4ZcbsJpvyGYOpkZmIlJ3x1tq3JrlYv\n/nbNCal/SGqAugBXM2zo5X2MOlcCvKIdyGW+euTRg9nL3URm6Ep+Q0ogxrYY\nQq4hXCpausptI9aXaBE5z3kRK45IhGyVKvg2VQZhtmcx/xicK98/lzEwsTE3\nra3o\r\n=YVdZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"daca2ab654159dfdb43527b42703497c105c2bf6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.60_1606941741646_0.7277519098263967","host":"s3://npm-registry-packages"}},"2.1.4-unstable.61":{"name":"aws-amplify-vue","version":"2.1.4-unstable.61","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.61","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"33aff406672126df417cd351ab9cefe9d0e0c862","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.61.tgz","fileCount":47,"integrity":"sha512-pSg/s/eCBWmoW5u/sGKWRZcqJEEODLHpdlfpC+OD6RRnPVUVcN9l/Ar9Bos6gTK0vjn5MzXwoT9xocEUgGXMFA==","signatures":[{"sig":"MEYCIQDbzNkq3Ptg1i6NS29yw3LfahzyT7R2YbFOkBM7/kDKvQIhAPBzr4VKUWpwrMlnCTztIaAFxgJ2WBTFBliQNBjN8e4Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDaOCRA9TVsSAnZWagAAOGMP/RpjWSQypiEx4pUhX5n5\no4T8XGGBQNe1fUnoG1xgOckItiF3jO3iZzpnUuTUTzZ6pKvgCAxGDJjgcxbf\nSIPhMq1yjGXne7jn7zRaSYO+pgYc9xkXzJxZ0aqeY79SQhTwFJh2IS+7wmu1\nXRobwCsTl5l9cOaKftSzodDD/AWE83nNPCvRb3IDJArZFfC3QW4jNdDryMow\nGkEhQsVucM1kmtqKWgzAreT6zpev6uW7kwEKek/wwj38lwZuj5SBrdlX2ZIT\nO1Geo8T5Kq+s9gGPQ5/I1KG3imcnCTYt6NP6wFapVZ7gwXfLgVKcgKPQh+jl\nMoHfHoULmuaq6G6CP9qa8IxR6rWFvAjIbS9z++bv1U3eS/pMreiGzctp7/bb\n82nPloabNjPYGFNv6wJO9AaQ9RdiYQOTvgJcj7lOys2xZDrDtLiw/+2ZpR4+\nMq/FMuPRu4wFs8wM58vtIR/0HV9a/JdJ8Pav92Dyu7FBv1tlC2Q+By0Z8ARs\nHxXtMv108wLGPtytM6eugrSbnhn8Kr9lHkQ4UuFzJvjtiCw9Z8CAo0w9uTO2\nxf8umVyzWDIVYQXDyQechx44d+Tw8OjX/qXrqgdPRO+cqnJmnBrHyayFbpg5\nxGjn0+2tJTdh5I9I8pAdrHDh+jyWsuJKMlH/C0y5qTwLx4WRHsGtzyl1852P\nT1PI\r\n=X5WW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d9aa32837f15f408daba0a0104bb27042b9331da","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.61_1606956686238_0.929467879985407","host":"s3://npm-registry-packages"}},"2.1.4-unstable.62":{"name":"aws-amplify-vue","version":"2.1.4-unstable.62","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.62","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"53f104288a872b4be81374724541dd7484d9984e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.62.tgz","fileCount":47,"integrity":"sha512-qdqq9eeO2PKrQIt4v9wAAVcCwsrEAqklnXFH9t1uU/7eDR/CGwfHSmNA8lv+TeNMPiLdGSpH8teWCIvpJ6C/CA==","signatures":[{"sig":"MEYCIQCr64lDOpfbP5kGW91vZaZzzxHl/Tizs2tTu73bNmT5BAIhALxKdCzEPRTxeRDx69kPjOX4fCMxh7yB/xNHClm5aLDu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRfACRA9TVsSAnZWagAA8JoP/1d2dDJnYlS1VSiOpytW\nx7F/FPDQy1+FMV0CcrY12H3leirB72pDOUA273DaVwiGAQeH8WQhAs/Vxhwu\nYp8bt8FhBHmvjt/SJ/OzOU3qgnGW9x3zgxrr43mU3qJcd8MKORXddRNIq4WX\nP0iMm3mNaO91+nb64rsa8i06eqvNGiUDD1IUcIgc+2Tfl4pxJwkGABd9TbTM\nk0fGWd/OYOdE1pTSBtQgj3Ys/rEx9q/NfY7tyep8fiKMJYbSKJUySIChd2aI\nlTwQsIhNMa3wfVHXPsEQIGnOkT95Y2KuvZ1xqu3D53VhvnL59NZT91aXVGZL\nZmapq7xb/eQsBCHaVkmkpEKmgO1AqqQzIc80KqAfhzLrs9dKnv8UirppNWw7\nEjBA+e5JLtHJKa5LJBQ5kRN4wVhQxYBP7gNQn0Qds5Qar98wH/vhdZ50DUEc\noAqli0ZRwbpCpxUdqi+Gv86ItgXgI5GgL39AFbWYOp8gtcxjioD4GVcNWZmS\nkmETzoGZJXjEO6zZNjNtY9U+dX6avY6MWx+3Pn44mkEbDr7JUs2Ex+GaftKD\nzcRXTb22pWIH/jJ8Y1v4WTmhBwEUJmOVOQ0NAsfJ6GPiKQLX+0x3K2YZFmR4\nxBVtrx0dPh6gwgS0y7UAAqKcdEgKbJgMIDQ2x7xInBx8C97IdudV5Mkxm00+\nfEZt\r\n=WO86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e98217cf13f2ab82730861fe91f9690d7ed2fa38","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.62_1607014335515_0.798065193441031","host":"s3://npm-registry-packages"}},"2.1.4-unstable.63":{"name":"aws-amplify-vue","version":"2.1.4-unstable.63","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.63","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"412a1d6482b6745fb199f58903f49693ef9bfa2e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.63.tgz","fileCount":47,"integrity":"sha512-NsSRgRTDEL4SCmCt0DByFETzj2guf13baBcs0fCLPmIqpqdHCIXwZeSwz0fm4zS1P/WMJ0OMkIdZX9MBd76ozw==","signatures":[{"sig":"MEUCIQCt+LXpuV0uv+2d7Bc7noxJnl4bjSHsS6At0ATPUV4PNAIgCdO65SXE6xIdUe3VUnb7G8UBcTOd1Mh6Cjz9Z9ufxFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfySzsCRA9TVsSAnZWagAA6t8P/03UwrjtDyEHYqz2RiLR\nlAJVNejdSzLSOLRTfQW/4qkpT9jNFa98Zv4/4HDU5Y1sLnbFofDaJ+7TIRO+\nH/OdBwyQEr5wV6S4zCL/wqEEsQ2GZrPENSr9GtLmInCYoaMkm4a3rcv/GlYR\nYIDMw2afs+Wd2qpTuta+N6okkl8+3BHm+NJ8s+n+uEJYtQN3DgL/EMyIRwim\nD4RUS1z2SqhwhC2zPOJVFaIITlQQr1HTACgubeCmJqy5I4pKTSpC5tSpbHEc\nlmlhwcxw4Zw6bfDtErN9lylkxHLAKESjpIXX2EvRxD1bivi0vdoK+kUVoBw0\n2/n8hSvAScy94U8cgrCzbuWK91nrjSncS3+Fseui9caW0bNg4G8Okv97+9GA\nhilLBJUEgIbXc6LTHR/aYZ93zpTnmgIfomHSrhwl6avI0UT5ulgRuJ3rzsP1\n+ki4wmkZ5rabb3RDIX2+PvV10E3ss43JTFREmEETtszQJ5prvLdM/m3CS7j6\nzkqX042wXWLq1ntnPGqLOZEm56AVLOGip6itLXgGtlbSSKBN6fXzqeg/evvl\nC2YOLMrrshcG57ZFPsOqdoR46P7PcWEqn5HSW4M6nEQWAwMhQcJ9sBlhBSGZ\noKey2eHG/fqGmJH4bSWkSIhhtGHk/s6GkemjQaFYZgFiSZ1X0k7E8iy9vISg\nQkNI\r\n=1ewy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"83984689a8c2d9aa5bebbc4cc0e29790f513a5f7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.63_1607019756460_0.03459471642631584","host":"s3://npm-registry-packages"}},"2.1.4-unstable.64":{"name":"aws-amplify-vue","version":"2.1.4-unstable.64","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.64","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"125ea5951c04a1c3a9fe5d14cbb6f71d14f89a32","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.64.tgz","fileCount":47,"integrity":"sha512-dcXHTZHxTI9oJrrMZWmWm7mv0RzkczZVnqscPRpZ+TY3lJjMSx2TxT83YSxrg5uj9GKFJuTf64VFkTJzKG8kNg==","signatures":[{"sig":"MEUCIQC/VelEnpswDTapCecmQWddAyGd2LXAS9Es0gKqxiW6BgIgD+Uv5lBiANPXqVGhqf9jlxpWVjvppYwyEHoJzySg1r4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoJiCRA9TVsSAnZWagAAvV4P/2zTYzWj9CLIKvAUR7wH\nLHfyNoPvfbZCrWH9aICART3s+z3ewzWnJs0Hl1q3i7kpIX7ho43ze2Ai+xZh\n+8j3fSxaBV8ga9yGSdJFvUoN/aUnpasyT7i+G2ijetcz/BSAGio/Uf06eqlX\nSo/AOYf3SDDqNA4KeUGvPwp7wYYHHzrhWUUVigITPRslXBkJpNqzFwalQEpy\n7tmZ7HN1FIivhxm5OD65Q7Qws4q5+TgkD5XMTIOsPlG330AIwaH/XRNN1Vba\n725Fo+ina50bN8sqIyS1XrgHZhwLUizQgNea75NSij91xjhXfX3OhE9lIZ6j\niWtGcr5E3IhyI/6extlTTrMJi6GVoMtp4LVsa1r/zw5nPcLboCxDUm+sLwp5\nHe9Z9Aqpi6XXviN91LG+tkcms77E2DqFweLbXNcBXrDiSnFenLvm6OWIiUmC\nY7Ep42y14HbxnwICeb1IXk3Wp9YKWOIL3/IsY3t01wzOR163lfek1GqYc7fe\nwEYQIe750W+Rjnwvv1r1zOE3cvCBoxYtxB2TIbbs9Ud7NAt8QxZkjNy2JGra\n4TwK5euQpVIia0SsgzqwVdkrjHs3GZVZB1YY/tZ3f1PXeNU838YbtGbOdqWB\nRj+juMc63L7d+A4QdayH1lfeJnv7m2O0Db19ERz/lDCkH0jZGE+XP7r14vNO\nbj1+\r\n=W8dg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"74b895c45e629edc5ecf333e2769f222ae500834","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.64_1607369314113_0.8323492243513508","host":"s3://npm-registry-packages"}},"2.1.4-unstable.65":{"name":"aws-amplify-vue","version":"2.1.4-unstable.65","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.65","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"1fd46545b8ed5d1d74bbee1e041b695f691d8571","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.65.tgz","fileCount":47,"integrity":"sha512-P3TjW48f61jFcLy8Oe5KPER++FBnSFE4TRrPrZmcVwK878rfpL91DEhckW5bmFcqusih1aGx1hsvy5TG4lXgIQ==","signatures":[{"sig":"MEUCIQDmr7XtECHtnitilONLSuZckq0OvMHXowjiy+4w89n4zAIgYMShVeWOD1Z+AEOoqEJeGosh/2oqK0xk9DdO8GOv6Gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzpU5CRA9TVsSAnZWagAAos4P/3YKbzjj/0GTIbr4vcgb\n4NAVoMTxlg4uL4gTpwz4xGVRv1VwL5B+Q2EooyQ2LQ5jWe+Q7oa4BF4lDBRo\n7GYG4hkO/bj2Q6CSXlvboX2Jae8egQUTwE8qFpueceXDPZsIEip72P8FaFge\nYKdOYPW4gqpA83sDEiyTlpJaGNcNRI3WuC3NC0xi0+UWjuuTWkbYRS/By1c0\n6s7VDLXvmleqYkvLGRlNzHURHPbDLsnb5qr4S203BWiSMMtV53s4VflGvvF2\nIFuS00rS5BTIp7PbyCX+rM6oaOqlIMvvls+nHN/wY3blpcwqo5IT3bqSZcpw\nKn2ATri+K1jrUsIG4vdmqyxWnMpsztx6rY1S1/Aafj3dGbn72D6V9sfPTk7G\nHGyc290QneyqQkcgSVnR8STfsCF872jNmmZgLDEv1l0ZxGdaPU7YC9VUnC2R\njBgpIt0dTE5EJxl7PTDWyJTSAj0epCTIuRf/+XzBf3PqYGrutmyHnm5NzZ9b\npzgmqOdljUrfC+Qzm+w+D7bSGlyJ32EdP1GVlaBHYbcQ+QcO6Mf3zkyjx48R\n3YzRaRcYQ9mB+t8vdGt3fS7YX22cq+HGAmid6l5zeEvDSNdXi4dueN6+2EJn\ngKW+VK3yHn7b7/a/GnklG+iRZrAKLbW3eufQIUPOzrskpHsmIg/vYhMgPvlR\nsfIU\r\n=lgqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"88e2413701cae673043c2fe42b490d279e7e51c9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.65_1607374136639_0.9321664858329157","host":"s3://npm-registry-packages"}},"2.1.4-unstable.66":{"name":"aws-amplify-vue","version":"2.1.4-unstable.66","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.66","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"72e4917c90a53eaf6d733cf55f9f888e45a6474b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.66.tgz","fileCount":47,"integrity":"sha512-dasRiGAg1/2UOzJ4DiENbIV9yVHeO3xqJ+eA80Tc+X6OfX4cTp2IrzJ+bMNPtPt4OmteWpRI48wVwmuw4CEkgg==","signatures":[{"sig":"MEQCIHyg+HJsdRpaw5fExTBaeme1zjnkGJ/yMsqo9fdYTQRYAiBIgxn6tp2pgYQ/nGL1AKrpmgqEHTiKbs/kfmy1tGfr7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TSwCRA9TVsSAnZWagAAU/sP/A3/sjqK/k1WirHS/t7x\nIpxHXzpr0rVbZ4gYSC0F6d62krKuZBsUYn49bTAdUVrPT9LaT9rf7L7ZaTVS\nlCB/8TlCNosFopiMRSn/y/EiI8In/8nGv00qt87aO3UJQEHr3aXlUtD4bKUF\nW6RUQTntTX924za4WqdNq5xbajp9sY/p9JKd+K+ZIz1kNDTBvrXtlwJmPoA7\nv3LEXeVPllZUe3anLaS6wudZ7bAgxyI5AekKhUR2b7tYM1+LaOmv4Wzlb7Bd\nuuxsVm+DZwQueDg9ooz3vHsCY9/TqiTbAUv4ENr2v1EkrgekhNIWatvSP9eR\n4eNxqyrlPGH+KMO5j78w9qXcp0a2vGGAY4o7DEKByWYehpio+/U36fNzs6Ym\nXZHoa8t5lhpn4dfGM6kCod6hJiccKWr+FIiCYAIZpmewhnuh7yKeRlgQOxP3\nEaUD1NLcxCp7UMyySFzEoCU40PObkwsCSnMPKeyPhdM5STwJ5TuQtmKoA28O\nHxMxYYKFAJNc5JXaZJddNQZk6OOMGTOZPZELwcchdBUBBNFZDybSXdxj9Fhq\nqFcPan4onl5nWpmK+NfMPhdoiCxc57HKFdjoCgg27tx5dlRs/UXEYGIFTkIh\n3Wow1i+mhfHWTSJEsuu5RxVRckdkhMQeL33qSm08htN8zNVhLOFliqlGWKkR\n3k+n\r\n=iQIf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f9ab99bac31bcb1b1579b56f5d085b6907a9a42c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.66_1607546031521_0.5234856208783103","host":"s3://npm-registry-packages"}},"2.1.4-unstable.68":{"name":"aws-amplify-vue","version":"2.1.4-unstable.68","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.68","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"409230f98a122dcc3cc35bb3a3a200bf8130a895","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.68.tgz","fileCount":47,"integrity":"sha512-FfvYp9AVur8dJOYlhMXYm4z8fw/FCnqVYTVIvDZHd4hUMr2qE6RhvRqZ3PqtCFGLjhY0OmAid86LHcu5VBdniA==","signatures":[{"sig":"MEUCIAO225xQ9PbHKGcyH258x7zCkvd/aDmtQrfbyXBG/hEqAiEAlaxoCKNRiTpzSWX3j28ukJqAmwd6EAFO3U/FMaAC9yQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0UKdCRA9TVsSAnZWagAAuuMP+wWofDBMvyZSJZkvIsLF\nAh+0REJV3fflL8N68QYthB4n4hVzLpN8o9IJMt+joHL3lQBgYEwpCxZRStrR\nSy72FMmbADbM41CQrP8RM97s4iyBts+yWcBGDgvAmedsCee9i26lRLStcZfW\nX3qANPEymLy24WAHXV38n7nNNtFjKgQRCHnzDbYr1dEnf0bR1vRonFbRLty2\n9kmeVGUhPVWJQ5UHxqQz50ea4/kC3TBNTpeOcgHN6E7fplLZ7KH5N0+guc3/\nTIaVW7HqcJcTuI25a0oucR9ifTL51/gNLhlkfT2wkNJ4HsU4AdGklHIaHtu4\nqECmkGYSYKPXWmBS54O4QotDG4kv/39rwm9sRC9RLxUUG5qCgxsi80Bq3SFi\n0XKrSiKbc42vEMUmYhnvuKX9U5UW897xXN0fyeYpsxkp9WLAf29CE16l200d\nHBvfdAgOTRUpzm5FiSquFb1zGKTASYtfldWcHq4jfOhfxuBw5WZ5dPHuFmc2\nozQZeNifZ2VkJ0OpR/W9qvs+RHrBAkKG1LoRUA9/ZtpbLM45VZAqM9zt+XiF\nEDx3Vfl81Qh230gopgEvK/YO9TaGOXtT+RX8jTylz0VeaGK+lTnx8zv1+J8h\nuLBiocuhekgNtgUiNPqt0vqZqtEJ+Zl6vZAqoLl7hjeOxrMJD3FS99TJHqN3\n8qdB\r\n=Coaj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"68e8e2a64b29a852db10e9457f3ca5dd023eda91","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.68_1607549596678_0.9315270449971687","host":"s3://npm-registry-packages"}},"2.1.4-unstable.69":{"name":"aws-amplify-vue","version":"2.1.4-unstable.69","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.69","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"ae8734610516c42fd0fae419777730809caf1eeb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.69.tgz","fileCount":47,"integrity":"sha512-kEeMOkOFki3UAyCKgw5xR5n39G3cQsW+KLZmYKCCOOw5k8EJBoasRvKqIKXDXXG9699rKBrCVsDbhREb4XbomA==","signatures":[{"sig":"MEYCIQCx4dhSvoXMhg0If7jxuxWkLrEkA/Am5wl+Qi0TBOI23QIhAOYEJ5yrsBI++XM8nU/RjFRPngUQ9BIhSHT4OIIpFKbL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0mtQCRA9TVsSAnZWagAAsTsQAJapuYH9DbVlWbxHMQjz\nwiOXRV36YXlRbMrao2/jD6dU6MFZ3QDCy3CxbRWpZJjj6M3z99Yrm59bBZk0\nQIXtMSDD3zu0Ns70jb/+YjD9Hw4Qy+MiU0qHFr7rBF+TJ53SgIW/PayN3BnD\nDIKFAYQGas7A9aB3ku+9VHcvbhlFpgXo7ipNem7oAHe8jvhpAq03ovJlSsnq\nlWt8Dyl+Naz7bR863ijFVjGzjCDkCdFvn1QWsW5WS6sRBJxi1Z15sLicmTe9\noFGkydzMJGEKF2aQc/CP+ag9jkdX+StGszUL6TBYSikVTquBGhCfKz4LOL6t\nYn6c+nDgy2j91h5CI3dnXulynHi6VUwHS/DKrR+Rl6f67b8vkb6FxGniYwMH\n5q3R0BLhUrxjWFl4NnmgeeXkbVfS7+UhfhQvoSWcLHG1lsObPtWNe3JGWQ3K\nGAwm3KbfpqL+eLDaJ7dYU3eM15n6BbS2DSaQDg0iwYgy5MfbiHDDgLn5o5TG\n1nDTYz6kcboZZDcVOQDVrnoszInTkGTsx+ofAhHXRJ0fzhWhFHzYMsGwpT4F\nYCzoMZwtoKhtjTymKqZfmx2mi2c29XK6OtrSIpKRcG5kSUn7JI74tU6Iek8Z\nRxGiQ2og4M4ifnX6nHR1RLu4+gDYWuIsptq4XrChVir4VHbRFKrGF7LZLbrW\nsaEY\r\n=utf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"30463fb0b8a7001d722a079da3535093f86c3702","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.69_1607625552086_0.6592175109853429","host":"s3://npm-registry-packages"}},"2.1.4-unstable.70":{"name":"aws-amplify-vue","version":"2.1.4-unstable.70","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.70","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"4591adc18f7c2cc298ed6f9cd7900c837251446b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.70.tgz","fileCount":47,"integrity":"sha512-OW4LGjaQND/T3OSwl41NaqS6HxOzqlKaGIHViVuspGRuYthNYaEusD0SfBWtfEV4bPMvm/p1VYUz1X64nHfqmg==","signatures":[{"sig":"MEUCIDuVI24ZSOleuCJC5jUU4qhemuiiyZD69klS0o5XNcotAiEAnr7DDI2HDpyd2CJPEhFWfA+SvjyrSJ/hBfaMMowahpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0p8MCRA9TVsSAnZWagAAK+4P/RlWvfpBgCXoDaOcHnrN\nLcxoGKhX7naoXt1FRRyoiq/nFH7rKUXt6iMBIxo+YCUI3tsEio/wxUh2CZHR\nwApmtQxKb7jyWVHw8/Z2aeATow3I1tyVntw1mQKj+MuP6l2TYJwjR/qhjed7\nr1Zbuh99g3jCj6FLPF4xohnKuxAzoAWHnyaRi9OsFkJyRohoxK1UkdVp5Yyz\np7AA25MIdwqZ0FLEd8/F8KzOG8cQkoDjshqOdbqon3G/zu3n6EegEsKnvqcb\nskupibUaa5xSZ5qSUvvROTxa6f2VoxlUwznc6nW+cLipnxWoHMP2+PRh378T\nqoxva82rHE7vOTBakYmLFB9AtEp+UP6F/f9BBZ+rw4aRXnu9ps6EOLRsRV28\nioexsYCwhpCO4g0XBgoiuFhVm/CnGmFyhl9YRLBCzjJonvo6pRKslhmAzi9f\nHDjgHJTlG5Mv0iMp27FrwxO8xCxebB6XyzvUjlTuwXYOEfd4s4DiJhp3NX6T\nd7qcCkGNItTyYZ3mYYmMlO6oaUjisO/SDWdLgc2J196iLXkuRLytju8Nf5e1\nGbgOKalqWSqFtMX5QPGQmXEMvnNmdmOsI0fw+eUeJ6b2OEs9qhIW/N61iC7h\nk63T+RAQBSLKRctvkVXAx9qpsowY4N09x01MYf6pw3cUX0dTEdFlE5/MX/s8\nX+/r\r\n=K1CL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cd7248428f8e05b43a2a5ba4e8138e27e36be92d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.70_1607638796432_0.5501693121486375","host":"s3://npm-registry-packages"}},"2.1.4-unstable.74":{"name":"aws-amplify-vue","version":"2.1.4-unstable.74","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.74","maintainers":[{"name":"sammartinez","email":"sammartinez19@gmail.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"}],"dist":{"shasum":"9a5167b9da64d3b384495c42f7bc916cafa4cb9a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.74.tgz","fileCount":47,"integrity":"sha512-nCiYyaAAYVgLZxz8l9TPIGOk/55ZGK0jgV7Qcg08t4ddmLgsBaLj7T5XJk0Q82opGJhGNra6+N80DQtwD3d0/w==","signatures":[{"sig":"MEUCIA6k+w3bEINlvqQV7iAyCBL0+951xa0jQD7nGNOVdi1JAiEAjPCh16L2/KU9CXfXpotE1aqwerE2WJB1Ap2Z8NBWIl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1D1MCRA9TVsSAnZWagAAdsQP/0qLAanbIiCvW0zzHO9i\nVmvOTs1vcWN8EsnzPp44rbFMEcWyoYTAwCwonISvYeW34NgK8orABM8k02Ta\nK74ZljN6P25kpylQ8l/0HlwozUIz8FA+Lvica0inYJasozzaVI1yO3x+s+WZ\n/ttA3lmw6+2dXJN1ctcJuTwnWhmPVnX4nDRPcYbSZvUuOUZ3DcysLSGahbuO\nG4DyR+OehQztBJLqnDi0kDTkDh79RMTUkgQupev5geDfX/LV7Wt00MNAE5hj\nBWLGo34MMbCRrvCq/ZcNIh6Ggb7ewyujeEY4Jf00//wekTFNQuHdloZWgqEJ\nN6+KPxd5Fdom/x+40Nl4gS3mak2beq5WoKype4f1AYgagnC1C7HJjoHX/6XA\nJiub9cLEe5ujQJqqOcRxsvJ41lThYuNHYlUuJl0ELyrMBpZc2WKb9nT41knP\nvF+jf7B8C1o2tbWgj9pR3G1LxN2HCEHapiXirQkTB047dkM/So5LJ4dGfPEu\nU6MawS1Gt2T8Inoe+MCwFrxLeGLdHsXMKBRTqsI1hgDJrdaZSohiVheuy3+E\n2zmT9p4lmP+zk+vQ/oz12fq4d3wTgdLAl4qPBteaUgP0ttASYjhiHiZqPZGr\njBwxhPSalQZq/3QelOVqgSo1dNh/Sfl5xKVAiIN01dwiGEe9oLA79Ts5m00R\n8c4U\r\n=OiPB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"547d88b61c240c2418fc815c902670f52b386c1d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.74_1607744843812_0.33326815723428593","host":"s3://npm-registry-packages"}},"2.1.4-unstable.76":{"name":"aws-amplify-vue","version":"2.1.4-unstable.76","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.76","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"3eafab9a5132ea26cfb6958de21f5046d4b6b8d3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.76.tgz","fileCount":47,"integrity":"sha512-a2LsMIv2A0OLfZfvjsJVEzg9bvEqA4ZR9mgz+WEUT3Ulgkmk2DC6T466P/Hq9GZg6hGi2+SnRu/q0HKJBiyCHQ==","signatures":[{"sig":"MEUCIQCMBqeX3gur+5kajDQ1svZjATrOkbHmfttB982UWUnMDgIgPQKJYO0Ov+Ek7zYvjvogvWvtgKFoCHgTCSK7mFYZ2dA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf18INCRA9TVsSAnZWagAA7QgP/Rx93Q/Pdfv6BA8Bv3o4\nin7k+WHWC8eN1zNeIe49WtaSjIujx884Ug1Be1wXGYFj1GPjEYwXfU9/uhTS\nALDKrtVpBE4pG2UYNFI8h33ei3JvZ6JB2NT4kizCxeiBzfsRUhpXxmPvMbBm\ndp/LOVwUAQnxxXfsWBN1uKlaYjKRl+LuHCjnGQ7VY2SWBIDOAfSqaZRiyhL+\nX1VmrK+A/dx55M7hnk7H+QDfXHNOnkvPOUPtJCrAyTkdaNIW9N+RL5dZirig\nD0i1uho2bjz2iPfMmoHmDw8tx1f7icE1c54F8sKnILxZ/r1OEMe2hEJbaQkw\nN8gWxk2wPEqmpO7bTJ7wHKsiUyWouMsZo4dzZlrC75WzGhIH5Wkf9KuDYn8z\nPh0STVrd953or6F2j3Uq4rVdDc7IedqobDQvFq8IzOdt1/7PpcHids/sA7T/\nJIpyrCocCpB4R5zoacPJImJsUG9gyygZHPEhDDi+GN9ktKZqW0fP0ZpYL+UX\nDsfFlCiWo1yAb47BSRgDPcuD/0CiSlVMxLQsOJnR3e+X8TMSXuGRbZnJWNWy\nB4NLjTtlKfZYfdO5RRnr6w8OlKWFKNaUNxPh3TM+ghWVXe02+kMUgNuMEEPe\nxYUwu6t09+Q9D34Qxl0yXOJHlcI/wJIsy//NLtkZ1fKXtK8p+7gLrIy2CLVE\nKIwj\r\n=GVnX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"549bab922cab15b2761ea9dca7a3b82c43a09874","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.76_1607975437279_0.83177916400315","host":"s3://npm-registry-packages"}},"2.1.4-unstable.77":{"name":"aws-amplify-vue","version":"2.1.4-unstable.77","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.77","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"d070cbf121a792979a7ca9ed4f71c621f263787e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.77.tgz","fileCount":47,"integrity":"sha512-ryng4nbZHyCgIQldzgxzgvPZWa6yCC9cxTz8BDrj1unvLuhKjolOpPshAzF2++RATF8WZzLX4eP+GTDRGbofbQ==","signatures":[{"sig":"MEYCIQDYYQ2BLx+MorHJPUirbCAL0Ae+ik+ySvO+D7g1MwcMVgIhAK3pdnHeA7hbvWDocJH2a8WH2Ew0B7U4LQ5x+cNhJ0qs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2AjzCRA9TVsSAnZWagAAcjMP/1OGnEx900WfVpCjkliQ\nV++5fDhTuoBNr+n8DsdIez6gK4cM0BEGcsakjcxE95gkRY9ma56NBs8Qmej3\nocGJKWFdO8jcJ+rF09G550NzSwbk4cI3niQdyewph7TxEhJ0VdyUBbhIADIF\nwBTgwPTZPi0BlXeYFjMDQw8XShiIdHoknwOGLR5pR7TMxWlflw1roS7tvAjA\nChEJ0WGgB/S9p4UpjEArOZtFkLFyxj7AU/NaPV/tv2LgT6dCvSJPG3A6y27c\nia5+PxmJaNHli84sFGw3SLB0oJNhY5Tg3JnoCsCijr2BlH2LYQYbpS13jUy/\nb5jSqYtdEybfeUHUnILAyZV6xv0cp08S9MjM9ZgSnxYqhP3RwunkgCyGxzsu\nyJtECg4G9uE8MSKFhxUfbu252Im7+Y23SP24TxEwVG6MFbuGMiKf0LgdHJdy\nlbkjIPdX8ezF7PA2frTJczwLpEEo26adMcSoYSuOvbGO3NLecRfwap866sI3\n+Px7OTl66nnxj1vfIEqRzdxNluJL3LtKWjTovTq9MWFdQZbgzoRzpkwBrcGw\nOy9vQqLGwI1xH9R0ze+owHST4ZxipHprrvLF1kT8aBj+zJr65fhFgwxcy8EQ\n3dQ0xI6dYkUGmORiTVBzP7rC5p+onK2lzoLs1+OHU/mVQqK/i5HlA0stIBZi\nluD3\r\n=YXIT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1ee7ebcce75fd2076fa69c970e5a0c538a16e737","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.77_1607993586819_0.2974948908830728","host":"s3://npm-registry-packages"}},"2.1.4-unstable.78":{"name":"aws-amplify-vue","version":"2.1.4-unstable.78","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.78","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"e1dca8e2e5959e57af983596e55d960ba0348053","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.78.tgz","fileCount":47,"integrity":"sha512-WKUUlORaCie49PtVmYdp1d9iw0UgAo86kMF34Dv52H3v7eJlB/V6JFiuSE4EedEIwMfmqmI0lESFY71QTBLaqA==","signatures":[{"sig":"MEUCIGLF6pGsf3nkK6piBIJJPFqCIUTDnnMCBQ+gnIls7KLkAiEAn7oI8GgOhQ0teknH4AaK9Sh3KqtFJPCzOMkXVzf45ac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf25e0CRA9TVsSAnZWagAAFQ4P/RGcFGAIw2oHn9bVKudw\nc/S2WqiiuSXkje31rxyerUvDIe8vCMWUfWBwBcpAdQYBpv5fNFde8aGAyoTc\n0YqNBNS8kKCGXGd9gCKsU62LOWAUy0jSN7Mar9GisHBJBiPJJnELretYr/UI\noUpdVu7MZNRTA637K/WvvYFLUXE91cHSQ3lV7jA/VPJY0pqUvhpG/KMulbn8\njPN37h8xIYNnjrubcrLF8rH8K1RJpXoQM8rC17Z0PtSN/3tQFoWPqMl0WQvd\nms1rpst0JokkZdV+e6j22rFYZmVZeeQTleFAFLsrQQytQjLAxTjq5efI/2zg\nggVPlg1d9gIvfpbKM2b8t2jw/dpuwHI//r+EP7EqcW4sS8HBBl0J4HPGmkRZ\nW8cWFtProsDP8pKBLHd0G/xsyAJlrfWNRqp8A1+rW2EsbrhCeNlW4jLeXgY+\n+qh/w0sKKYYoPDGtNGe4ZW74VHLrd8+qZDiLjqUIHEiRS3PqK+d9s5/5Y1J7\nYPLgeICL8kCaIgI5ApZRKYzZrEaMX7TIuexz9Lkw/LM3YGGhgUs3Yy3NJdtK\nrcwREKW9YgptN0/kc+SSeyIsTx1zZebcJNRBPrmS+fDQbhw8RWR2QKdaZdoe\n7M3WBRjhWyko3w6KBwIUAcpe1WymJYUoEEZB17SoMFrwJ7lJ3kIAllXPYCLM\nM1Ns\r\n=3XfZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a770ba66f35fd775a75caa35a69a897f06daf4ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.78_1608226739561_0.7615867766968005","host":"s3://npm-registry-packages"}},"2.1.4-unstable.79":{"name":"aws-amplify-vue","version":"2.1.4-unstable.79","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.79","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"fcb6c884fd6fa8dbf3c5a1cdb69c99d17b08d217","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.79.tgz","fileCount":47,"integrity":"sha512-4vhSp8JK3PLYfGlrTlT5SDKuqgQ4wsOTjxokBkTeEUYvKmoONwCnQtd9nZd+vJM32ZOlNUgKVcMj4hW3078BGg==","signatures":[{"sig":"MEUCIQC7WowKrfeBCwye58Lp5uQRg4W3SErY+E2klae6l7DGtwIgdPmzytE3G6RHxst2elDEEcAMHNBkdIAlJi8Io239BOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf25+oCRA9TVsSAnZWagAA5/cP/2dPUCvlVQctlsthqyVt\nmmkDpMLA82kq6VP2B7bK9rG/nui7+9dOZXFLi/bjV4G6GITqYk9oL06yQB2l\nA/qfQhMWFlgAi8tHTj3Rm9B9VMvfHJ78Vza2d7bqhWSDELPC987MNmXZlUzk\nRo5BbALZeDLXZ3/Mj6JfqdSKDl3UBbghWWAzo3I1Si/lqUBaTPHb36zSOapR\nykt2TTpcM4Ixv3QGIXs57bU1mh/2j2foM/REwFBhAfoMVn5MFmsm6kmgLV8g\n0ePZuzLwf2hb/d6sbnG7Jch7VzZ2WFWfFwqeWQ1je3eT8ftkfxOySVRKIz65\ndlF0sHl71HY6fbUTp82bPKvle7l8AKs1VlaUnFJ6yOtEH6KEvVv9X9NArLgm\nUucA4xt5BGAAdwuDEfkCqbKdl02uonsr9bFAXNpLh3yBYAtc3DXqYD1G08EO\nhkyQX4IKqJqAB1aJwZ7kUKkHdUWbsnsALfhe2TroMaAOWB/HizaBQNM6fquZ\n3n0ZsI9ZF4ORw+FV01VlitucLS7X72gs8hMQYE7jm9B5HDJ2+0OTuK7E3vte\nLx/YSOy2uNfSHCUrCqXS0YZwc2llmnkvjRj9Pv4m78C/euqlMDqB/EocS9Te\n31KEPt/5jMSBnqDTDE9MQwB2gzkTuJvoQ2pU+v5y/07QD+Y07Ew0QRRAt+A/\np9DO\r\n=EvqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verfication step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cd1db8f99aa2499936792ddb8267a8a951603434","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.79_1608228776138_0.6275622095764222","host":"s3://npm-registry-packages"}},"2.1.4-unstable.83":{"name":"aws-amplify-vue","version":"2.1.4-unstable.83","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.83","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"73663259c426602bfeb0565e08813479c53b681a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.83.tgz","fileCount":47,"integrity":"sha512-FPtfUuQ9BpzQpMqE191u3/8hrVAV15XLqjHGwJO13XA9R17VlLo4PofSlzh1jCm4QKXKfT19VLA/3gjvnwEDfg==","signatures":[{"sig":"MEYCIQCdTYoo0adsTJHEaH/nn4K/jZSZD4y2OQHD1FK+f2vH+gIhAJj/ngLKbcOZ0FeM5slYJvmMGUGMC0vhfXLsrOilyERd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3V7VCRA9TVsSAnZWagAAm/4QAI1nxvNHf3vsWcmsedwm\nZE68FW10/tEl3XD2u533I5XTpHAFrW6CZBwBhevURr2bf1jRMXVesXFaYZ2S\nuCe2WTo+EFsngI5CH+yHq9U0MQF7CanA9KgEV0NIvEE0Aw4ntl1/AxPW7uLj\nnBIJheqkkcu7gMMwa/2DBiABcTE5CkPbqFhycQxbEeQexXQOnbHuztA75sCa\nIlrudiLQ7Rw8jQPQsY66ZjYcWjaOV8AOsjJzaF7Hh/bjjtWzwEkufq9/SrQw\nr65WRHDsugxNNfdh88xz4dP4c6d4fLqKVAo6VxkNOrLaENjU7EJHYGh4gCxr\nTkuVVBpspLBKtbyi59531CbNw/wr/HUzJ3G0GSHWWcHom3K/oVgSMmHCit6j\ncQflgzOdbET71TDqlMb4KEdooM893y+bWdbV3xFSnZEzgTKoprPuRN4XMwZP\nlZMB1UCHmk8yEU6gb7v08XChbQwyB7oornIqlzBD1JuAlLLY42FpY0Sp2bs+\nsdSUcCTCIXr2WcGQWn8IfuySTOTFDCvsVXNuESDfj3rhRFdEn4xbz+f9P1do\nz1b4PG1e21eX+aAjRdVUOLfP/DPOSgA+1uToEwacdb1pPiqkEn/UMKV6s8ml\ncZVMtkg1bN2JvQWFDhS5gUAELKbuYOKlexURshKWuj5q7EleU8ly3v2ccm19\naRyj\r\n=itdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a50d23e3717ea2205e75796cfb244bcea931b6f1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.83_1608343253091_0.3094587698977358","host":"s3://npm-registry-packages"}},"2.1.4-unstable.84":{"name":"aws-amplify-vue","version":"2.1.4-unstable.84","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.84","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"a03014ae61e57e4f4af1ea02ada6db91ea9052d2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.84.tgz","fileCount":47,"integrity":"sha512-ER86OqFWaVKw19QXPpeuxP14sZgFrnsUVqPOhgEgpwR7+qM1QOuaWMdfkxBlICXdxb6BfFvGFREk7oSdRhXa9Q==","signatures":[{"sig":"MEUCIDLnzP1yaQUSW5G0HCfe+6KoBI1bPZyRSRvawV7G9XCNAiEA3eeBNOgZvbYqNTnkzliru67qDb1MOXmJEs1t3TzQyyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf45zaCRA9TVsSAnZWagAAU+MP/1Y/Ydn/ZCBECm6ekHcw\nSZlt3Kxi2dnep1+qhbiRd2y+v8psZU40+gFJyiCzoCir1QfJ1vCxIDi3Lcmk\naTJLSANiWNSroQ3w4HUer9vqLxyobkVyIjPoDnlaQgS3EmRci5AlBF+A07yu\nc1yi3gjMFbFGFpuzGWe136ZlvedYzuBAmkAN9YLaiuw5L9EUaTNKgVsBZDyv\n63reWXWH/dXmFP6mjPnikKHYLsSrRGYYltt004bBRTk7a29s0R90iPYxzXby\n6YfWsW/2QErfL/stk4S4F1/3UVMR5x2w6zHnAEFNxI7ejUf6oZ31y/XxhH+3\nyBRgqXR+luUWVjevSTZ2S3t85yGY8JenttgbMm6zfu5uMMOKA01Pqa3QDRzI\n47mSRwzN0p32W/fk5GY1cpoc747HMmBNx6HowBtrYdP0XSUeO5GoOKPhxzmw\n+9TORLnrinAnuNKSIMS5WekM29/ujymM2Tygz0WMgetiYmcBDPhM8myWJyJl\nqPK3twrwRB3MooKGjr2XQSN4GPWKVsjeWgVekhiCiLA6vKNmC0BV8hGbFBnT\njsTlFM6SKpvNH3OmOzDNMjSdlWvgKS+gSwPF47PC/OcdALpfSddQmFnsbX7Y\nwKUW5zsqDsIByK5LBrx9kMXXRFEUAwxEPnQ7xIaqaAKn1rklahcSQ5TCr7EE\njj/j\r\n=KQh+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c21e58aec0723ee0ee050682376ea4b95fbfe2ca","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.84_1608752346092_0.6944023322748487","host":"s3://npm-registry-packages"}},"2.1.4-unstable.85":{"name":"aws-amplify-vue","version":"2.1.4-unstable.85","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.85","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"07af2a52f674dbd6d7cbb61af3545e85213faaaa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.85.tgz","fileCount":47,"integrity":"sha512-r/smGghfwR2Vz3MHFn8MqbP5xqwGcxqpVJtfOJLqplRhWwPZol+CqHwQiZbPysT+VlR/N+W7Xxipwtv32X3Kbw==","signatures":[{"sig":"MEUCIDNQFh0Dbuhyyky8xWIZzl8C6KqxbWYR4Opxlk8Mp2IEAiEAzBg790OJ30Qc+729/iMXRhLxpcEZPnjZs66EHKVH0OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5eHpCRA9TVsSAnZWagAAjHQP/0PRtT1ZWS+7/oDmwg/J\nrE5rNyMLJ9qt8TZblCueRPe1XWuUutOw8FmedAkeZ2BiDaI06vD07jjmjyoz\nvbCFRZVsgrE3Z6E/x2yazW2hgtJ84930Zd2tI8jiLeJoMGKystFJM7xW4/GR\nG1oQQew8Ie1KkMn7ZKiHYNHSTxy44XQrtR8SjioJYpvbmWVE9tjZAlKSjKEr\npGRNEz9GBOQAsfF0c+PkL2XAgrsFkIvaF/yDO4OqqE/nYpAzUD8JMnyyq2ga\nVnIJxxKKc/fTu1eoj6+1jNGmpSd9czRbx60i5OoFyjy5mrWCsw4BOF1N7AhY\nQvMAJPL41jecqFod5TAtyCFPrD3oYWSiS78rvmAaF3jSz+2EfSCUnEXROa+/\n0XWiSS0BYF9pSp50bZawEdzYJTnoWGlRdEVbpD89IBOY2QNJqjI7WrKVlKWP\nG+RwQqow12PutB+AEm3VIeEu58hEpDMyq2gzhicdt6iYu8TCLP/SSb9dvIhD\nGLG9xM21jfjqYXq+rYZbTpcP1NOsRsJzJBjzyq9TtuOehWxpLdR3gze0cL4K\nNPSNdKboF/m2YagwSwTVBv10J7+/+nFaTSAE4QNrahXJcLwTFqRdx3RBsjoR\niaAfc55+Jo3GT+ydI6aQMPmYmHNj73O9uZ0Muy9MoZCHM1HbM13pPGgYwyyi\ncywR\r\n=T4rW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"06bfecbd32751dee61d5abb6d5be9430ecaeca5a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.85_1608901097498_0.5636837312842953","host":"s3://npm-registry-packages"}},"2.1.4-unstable.86":{"name":"aws-amplify-vue","version":"2.1.4-unstable.86","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.86","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"3b9b11c2ead1352b8a9ee48a64e9fbc9d065bfae","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.86.tgz","fileCount":47,"integrity":"sha512-/s5XgxDtfylcE6bxWeCPCjlkK79KaaRC+uLpe8AAnStD0B21+JXGib41r0myeUWEQewomrJB27tnAogdwwgpQg==","signatures":[{"sig":"MEQCIFCH+lixP0chNreu5TtEU623VnpOfO3Qp7qXFrN0ZXm6AiA83Yyv1SEsWSRsTe7pEQTeo+wPdG+PSeFHLmB11zBx4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf83uVCRA9TVsSAnZWagAAwNIP/2I5oKTijVXgvJsZA0BD\nKD84DsbaCF1FObaosrQFyejT3j5UOPjJr7sNcq+NawhEtUjghC6MWWxbYkYd\n3Vvy1Zh5NhDz0DesWQU4KaCTrhpGaPBtfJfmuY31snPRLB/LQt+c48BzUEgP\nFWEpCFCraY/i3Ilfnp1nvf2qB6ajRET986o9ajJAeFfrHsTdTkn/4fp+c65Z\ng4eMyQ1IogLRgO7ATIZaZ5xATQPTfuM75kJVIyzGeHoegYgBW85jizOP4XId\nnKRFzx76Ir9un+mBIkM0sTFGzdgEGzP3ciZqgyB64Eyn9xEKxTpL4SM0nQPn\nxo64XHprqCKRQU+v9vTB51qbwUndViIUf6Bx2NxwpOwLUCCVyo6imhyoys8v\nkcAUw/k21oh7kS230vJU1IJSjlX/ncg4AkG18FuGL+Ej5isaKzNDvG4rwIv8\nmyY3gSMioV9myVo1P1uTUNfXT5HyKFnKQQA0H2sAn9508q2sRlLjOIP19FRJ\n8WkGtPQH509cbsNqYbKccWUb1IeS51VkAVrMH2+7Mbol0EgzzOFvgNLw97jL\nx9yOXJJnruSWqA9Ncs/VPagfMeLLUD6SUTgHHVh8txmSCb27hKpOy7UpROGw\nWl6u5Qp4/wCS4VgW6eSD7orb7Eqv6lQhnRNdB+gxWXaoIxfeMFZ6TZ54FB4G\nUu66\r\n=NyAI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9baa02212d4e99f723e431f54e857dd0523dfe84","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.86_1609792404541_0.08205771237720128","host":"s3://npm-registry-packages"}},"2.1.4-unstable.87":{"name":"aws-amplify-vue","version":"2.1.4-unstable.87","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.87","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"989e251e15b4e1398ff77d572047ad86ef5cbf3f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.87.tgz","fileCount":47,"integrity":"sha512-wJnVA9ja+DrrPqFqOjFYmsxeh3ItKEigYNxemb7/J7ZJDV8o8PJjqhZw6zVkOY3n/228vKjo7nrPhZEZCOmlDQ==","signatures":[{"sig":"MEYCIQCLkLTrrHoqzRR9K0i1wpBG/GHGzJF5HAYpbuW9VTwAuQIhANv0i7jjGrEpYdvXDoRn4KGwX48mtc6/wUpsAFQpoTPr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf84dSCRA9TVsSAnZWagAARlgP/1GXTbZwiP3KqJ+FNUG3\npGcUANzEuE8KHEkbjZBlQgQ69TAaiUsYVvadmJbxPdDffmMqu2Gc4ilHIfM9\nRD8WSXZJ8JqONAGUbseHMAJQNYvKUieXsTzCGL1OAaBNrz6+FHuwDv74yppz\nEwHNe96s1fgGEjHhtNAMrIbQFj+HkrW7wj+Q5VVO2MuFGskmeHSPNU9Oa2WV\nrHbuF4P9ttbWw0TD3wCBYtJyWn4+ZIyeCSCi4ejIFXJI5Eg6UzkpRC1HoU4j\nS6xbw7WQd4Mwpthu5sUvepj/aXHI89/Nnjvv7lSip0iH5/eotWu5V2PaaQWE\nxF7NfSYQnPKJg9M+TBZIWvwbLHbhN3Za6Tpvfnr1m5hLXzJGMsA4GXk2zP+N\nZoVUSyWDb1BJY+wVqEV6vFDFBMQaIUFmjOvvBFINfmjk7ngHgrNtLCa0eE7Y\nFlc79V7H2ICFyAVid/dU+NN9zXPAFYEndJwqfrw4dWF7nH9yF+Y+uU4rXuBZ\nl7mdzOXCZF1EtkwgKr4Q47ACZ1CNcfsAVERU4qHGjZU02X+4K+sFRI72bjzU\nZy7X0OisrHMPs5VdHU3AU/26RpWZWT3GOQ/EdyUQO1Aj4/tfn6Ec/ALnXvak\nmhSUb+R+Mrh3D2FWz7OzI9OAQv4x/0541PcU71hGTxI6FT9IeofrTJkX/VYV\ncWUG\r\n=Hkgz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b72d31f37f6c768ce9f52c4d5ef4c7d46d4ddbaf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.87_1609795410057_0.4042356397445481","host":"s3://npm-registry-packages"}},"2.1.4-unstable.88":{"name":"aws-amplify-vue","version":"2.1.4-unstable.88","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.88","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"a0b725016c02488025e7fe1af5a929ba3a32be07","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.88.tgz","fileCount":47,"integrity":"sha512-cVriIXFF0J69YIpro6SMlcrt7lszXs6QsTN0WC/hD/8rUUaONMcCw5DESmx0Zk7MXfEpiutHhPEEyaWECWlJLQ==","signatures":[{"sig":"MEUCIDGCyI3Jw0KJyZsk7mAmF4W1vPab/Ea8tHhkFe3j49jBAiEAp+X4KLjGlVIxe/EdGuE6Wn6X2pBBiixOXi7XYU1jfMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf850QCRA9TVsSAnZWagAARk4P/3vyTOqygf+xwKI4WORJ\nSL9nmG0umwhHBN4+yWrlfylUni6eKmnebJkmPxpesupgn3Hnca4uX2Fp0C2W\n0Vqp+ZIkm1pqVwKNb7Ll9yyI1+g9bRqVwQoWT4qsxXEKdVkTVsC2WyN1dKIu\nlXhZuHnoL0A+0DilFGLYWo4kUGjujJxTAOAX4nct8hAXPpc/gGTBOSVoG3Mw\nUeQEih9pRJUIILlqFMYxsgd545nctdcyyMn7CvIy0bC5WejLIJcNwWDnG+vM\nn4l9yMmTK1hDN9WzQVWbh6ZiULHS+6CswhkFSGBq3LAszPgbKh6XZ7MKlrKc\nh3ehrl6frJQaUQTVQC6zRweUzZMI4OIpG2ghJi5eJaob0h4exn+0TWgh2WiH\nynBpGmphBkp6Gslm9VAkiSPRslPUa0+rxT7zidFZOi5y8fNOx+WEtB9hGJqS\nWPKcuYb+R2nMu4wHnPKUB9yydaOecr0T3BdP9CtEWvCdCY924auiEzjb2PPf\nXcpsrDtzuFBD3ue+rOBLjd1Zg8BH1mmlpnKl9ozVU3bQLF6yzDdImoRx5W5N\npgU0++MaCbAV9s2qH0V2FQWswYHcKBOY49E+q5b1d4X9Mvqj/symp4Q2GibH\njIhzcZabqUlL3Prb6stG2tL9qeB4EeXykmlLT8Cs7aieHZ9MbJEbdoSlsBhr\nwxDq\r\n=GmDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"294aa918bce9c20f09314a9a4a39d04c85ea7ab3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.88_1609800975655_0.7373872979693337","host":"s3://npm-registry-packages"}},"2.1.4-unstable.89":{"name":"aws-amplify-vue","version":"2.1.4-unstable.89","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.89","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"61c1e1bcf5e7c89cf70e9152e4be932d5df82b47","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.89.tgz","fileCount":47,"integrity":"sha512-bpQxCbtuP0+FhT/+hiPT7XMzkoVZ/MJDMFeFUW3Hlora0oaoYeHdnSL0MIKC9H+71L2ClrXVnpbPcjW8PPy6vQ==","signatures":[{"sig":"MEQCICBkvQ5M1AOjvXiMPhLtu896e1Dfxz4CPPF6w8Z7XnzgAiBp1bmSbgtrcl8JRtcigLZDPIY0wpYiKAfqicI/UPWjFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf87bxCRA9TVsSAnZWagAAmM4P+gM0f1NU8cekQ/v0o/2I\n11wvOaVT0csCxygO4r9uK9u7jMHUp9h6R+KyXmvisd0IJg+4k2D1eNlgYS+A\nqz34hX2a0kl7rxHuHF9IxXOBWUNLm8JH8FHpvBDopONtwWl5+A13eaownLJi\nMgwV1bWfUt+evHen6sfxOWdDN+gBqUo9ij4kb89qIGkEbvjlf7AsHB/jvh/t\nVMJWwcOa/8m9ZQmVBFQjmmaRkK199ciNpAnH3S0EeKnnEz35TK0UoCU/avTv\npjfGY+6q0lzZSroSGpVOKzP8GQY0jKi1F0zL8s8ZAaY/HnPpc53W124JyN4K\nWAHn2qKkrRfwBApjEQY5wC3tf9BPKiDuqiAW76B64zaMgk+4gNwRi+8Y4raE\nCOyeZuSOarZHDtyGjy1wcW7OIhcUx68H4hknMgOvozSgBTxDdsOQ6e95cLHZ\naWi4bv4VD/ClBcNczfHqLBwtzxiv1g0RGuRJtQB3N8/jYDbX0YUxpjap7lME\nkyy0g1kRAkVYI3/tbqoJeL9doS31Ip6SRjPpSBK0rUydv118noedIFcjmTkS\nW4aO0xFZdHgIEPpTP9tcLEYCtTMCJaK8XPDyz4FAAUvPGFl/rcyfvfHVeGkf\nm5I/9MCm5VkYB0QMlIg5zA1I4ns26l4KGy42VNo2gBnCpjs05i8XnFIejVOT\ncfHR\r\n=OYKB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a03e2b7458ab44163c8464c27696dbba3b26fe5e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.89_1609807601001_0.37038561836599126","host":"s3://npm-registry-packages"}},"2.1.4-unstable.90":{"name":"aws-amplify-vue","version":"2.1.4-unstable.90","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.90","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"81724dd32a3306889e249dc56ea05e11cb0a1af8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.90.tgz","fileCount":47,"integrity":"sha512-+lFB0D5vAupY3EdZ7OeLnuJGcxBNhle2NVn1lHEigNrj5Pr9/Z4RN6JThbNVftmUALazZVe3e+HuCUGL3So8hw==","signatures":[{"sig":"MEUCIQDDvvlhQiqiA9c9FDtGYLlY3EI93hAaBbEmq1jnAIAIBgIgK1UNsL+pgTidg29qM8xIoJU4PE1oQZvGmfey/O635OE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KxuCRA9TVsSAnZWagAANBoQAJ+9LLmdKeKk5/hsyVNT\nbzAZJK8p5j6Wuv89I2pV/HWiQrDaq8lQnQF3ciNTtq8581CsfewE/dLnFAKr\nw+N2nsq5vZxdf8R/lvwa65dvEGt1Q1HgVYsKwSA757Pc+7rT6FBa3QIoMezd\n/QW5uSfoK+R3ancXvg/2Qu78JtAtcVsst8tddKm6fChYhgdT0EnBhth/P95B\nhWCT7CsWGF0qXdq4IwKkI9AjqaM5NN/amhFFGBaMWAwFrXCF9ubS7inDguyD\n5coUA2qn50Yr86tDTPp4NgXxI96lffeqA6CDC093N2LRbx0XAZe0Jq+PK6yT\nsGY/FrJdghSsOOF4RTpBOXESkvCtpdMkoPptC7lW3EQDyt8GndeMhSfxeXwD\nqlUdVk+yUZ46UECI1KiMLCs7Edo5C8pZEMn6n06ohydy3a0YovGvz94yS+CQ\nHk1z4n8/fXWCELoLXql/d4dlHLusGE0fh5O0j26BDPITp6pBz8WEQQmk/uzA\nZWISdwFdpV2XkVIBpvZuAK/uR3SaTOopMvB3yd7XpgsY7de2fVrXsVtqbBR/\nB+53wIhck4PKrrDZRGOVygsVSlDFPVMZcrobSTE42FeJBZm3Gp+YuI7uN6vO\nYmZDpk1r0kY1m6gICyPtqAbJB6y+dtUJ8Tjw/9uHYMWhNcJH7yZ55bN0T9yC\nyQrL\r\n=RSd9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b3761aea625e4e1c266d5170a6cdc247eaa54bba","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.90_1609870445765_0.1415216161147732","host":"s3://npm-registry-packages"}},"2.1.4-unstable.91":{"name":"aws-amplify-vue","version":"2.1.4-unstable.91","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.91","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"464ee65eee519971806b26b7cdb810189bca818a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.91.tgz","fileCount":47,"integrity":"sha512-EsV9aGRd3aaNI/eGemECVtYtHsz+KTlewtMMY289WayFEgr8jCyHeyyoARa4FKnN3Js0T616x0sdXDinK8EpUw==","signatures":[{"sig":"MEYCIQCr/W6hkiOCe9jSWgPIr2JCL7PcIxJS9bkzwBCZPe09ggIhAKcOqeP6Hy77aCU3JK6IMxgcitYpEb0r2zBKGbmRa/uM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9eltCRA9TVsSAnZWagAACpQP/2I+zl0Wk21raZb5Ls8y\n5+V3fgqusn0xj2tcAT83MRIoSH/MMTBvE+EEwVFixaNwj5vE2FCKSP0qzwa8\n4l4x2mKljCaun58LFfC4TVTQDKFKCtoTC8Gy+9tHRzrKGtVHSNB2Gp98NJLh\nIJ3jA/76JZcfvMNO7rvXqow36hnHsPjD7BUjrKcle9ly3zmRjYi6ntsy6VoG\n/AZnaCmPcmhzgGgyq5hbhvQFA6ne9hd9ItKVVc+tk1UNVPgFmPxNVjRTagE8\nyK3qwOYaUbAg7IGp11nT40qxyNQ6wFE7NnAnTZLuD52hTHjgrL+e8DpLjtCD\nO81usZhdN5FBBLdze4nCEVaU4tHoZyJw8Z85SR5FxSPQ7geBGka3cCdQyEXH\n8iIPH4B16LH4fxTH0ygeOqrnJF+SJg87O3+UnRIp+gEmjKCw9cJ5vAiT0gJQ\n70KPqgQ4yMShOrQoPsJjoFLNSVnZQWsdH1FgSQRl8puzPFlPEfUpY1JPmB3O\n1xaBBZrxRX+LSBZuBYlvnvLfNC26S/59yNVW3LbTHsWrB4OgkPMhYuKjmnAr\n5Q0Sv1Y7JQo0nDPE/fL52d6nnnVO3hgLTiamqk9kOD0xEw2oGZCLqRad48V5\nXEY6x0DAJmEam1wHx2Mc2eMbu2zQOniSJhf1hF99D+mNEcYP2EINbWK1r+jk\na1XA\r\n=JSIO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e0789af92ad043bd4c069d766158942a5e6b2cae","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.91_1609951596531_0.008681062744044121","host":"s3://npm-registry-packages"}},"2.1.4-unstable.92":{"name":"aws-amplify-vue","version":"2.1.4-unstable.92","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.92","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"2e8477adf2e72e96f2d99a071c1522de5d8b0cde","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.92.tgz","fileCount":47,"integrity":"sha512-5eJh/b7th5BbN9uMiWASKnO25i0npdXZD3p9ig5sIHVgml1UxshvAkTHnoJyjH+7XKp9L0UqR95elmh5bsPdig==","signatures":[{"sig":"MEUCICpZ9+0OPSDb4+iHI68QeAUXgzxqmrJjdXJHwUcFxsVeAiEA9rLk334kX3hUpxhySQSi5wP7sNA/kAWXE2ANf2/JHms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hZMCRA9TVsSAnZWagAAOz4QAKA+lEs1E7EuD9up3yjJ\nDDaB6DlbjuP2I0cl0O8o0QSTQiknFkE0wVossovFCqdd8sB/QLB6HZJOOuWd\nqhm4UzYbqEawFVENs014q+LK1tjtYEIZidB/U8hkdICjOKb91vvjVRMenMDi\nefoAoh+a8Mjr2t2gOLgPavVlXuKpBpqmTaFRlP9PLvNQsw+f+nQfwcgsyAjS\nCvmkihak5Ne6ANWw7TyqZFANCHsCc/32uRY0tZ1fh+P+i/+vCN1l1VpEOB7T\nmouuHgfbd8O7vKKd1AA+sp4h43UH8EieLz5DldYrlZh7HKoUpF57qe/dYvZr\nQEdue1FIFh7xtl8/thjvVqP/gPcTxNvIu1/0+uuwZyYsYlwj8pMVrmYmoKbi\nvUEDB/lRtwanTwRGpnl/+wrmyYG9JNuAIqodhTsCPXVmy0AY4P4cYokOiQ+j\nJWMfhpsi/xteXU69oz6ToDt/bUO0xyD6Dx3udEmYpqJufUSNJj7KffJjjqHK\nKmiCnDTSblXupXOeAFRXpXqd3PgQctzerbPR4/wPfa//DnMXUK27678AEAbH\nbIPnfN7EdFTsjmE0cdVN/SuV4GstQnkGEe8LJ6IL0kRCSAtCvTwt/D2F8vl1\nMg87PtOIyw3nl103d/VPQ6dvSyvxrsRpjeHcFdLdEkB/+aHSgezs10LWWiLe\nxWqI\r\n=Kcqn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5b4641b8568e3106db81958f1cb2ce0b6d684ab6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.92_1609963083511_0.31157037884758876","host":"s3://npm-registry-packages"}},"2.1.4-unstable.93":{"name":"aws-amplify-vue","version":"2.1.4-unstable.93","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.93","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"2f2fe1fc09ff41afacb61812821aee42a2eb95be","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.93.tgz","fileCount":47,"integrity":"sha512-/otsK2iK9+3sQAset12AhjH+Po0dSJSOT4iczFNF+QG3wzFb6095ianJalCRxmXEiaWhuUKDuYkwt9Pgu316rw==","signatures":[{"sig":"MEUCIQCvRAGqbVsPGRwFaGe7CKScSqSQ+6doJeP8AOeGz9EiOwIgQdXVlHFbxw80wLJaazDPOw1Rvjx3659hvIgChjLBddU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf90fXCRA9TVsSAnZWagAAWccP/iQPU4vEnstHFT2M7JUL\ntLZsaxTUJ/wkV3HLQ09eMREPklvxavqpogvBLhPaIsqD16f1WcoH64Je4EpO\nfvdANECUzcxmlT6F2w9VClpQYtoP3GbTo2RgdAjdbWNiGnrCRsxINYZ6wqcG\nA4eZrQ0VCq6vCrTJtiTeXaWVZ6RrJUUXW/uWXZI/3h5jzYFp8CsmwUTkH0Xi\nbsRzSJFBe5cvXIYQG3gL9bbxRrXSGDogVFSLZZDp5kw+s6T9ivPTC6W/JiLM\n55of3wVziauamKbjOonp3JQ+IA5vX4ZJDm76Vb2qESndtQE874mVaThlLXdh\nMw9Xx5k7ePrT12Xb6JWHTEnGgWwRNTZ+5TyJatKSP4hDNk5icQojgtWBnmI6\nnngw9J2iP3qV3KRnjPidvn5KlvfT0sCu3px1zYjay5p6p9ocdl8wBHHA1B5G\ngFUducE5QSYGkAlySIrFnCk3qt0sas2ltf6/SiahjYlprWxAFruRdQ39nfBE\nRV/VGWyVVilHEvQm5wBI60LNSlsQ5/PX7lAvfA7fRRKKFHliFDz8o8xg2sZJ\nMPpSDmvREXS9+RXsLo5GG1Ngz+0GLlKGlYjN1nQqjTAZhz4tSuit5fDD2s5o\nkjvqZnuWU9qiAGDyqXyUjQFuikVDSzYxcwvAPqgbmyT+ySQEfoGTltLMLymO\nOzIf\r\n=gZM7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a83b6b86989baf7ffbca584b939704a45fa7b864","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.93_1610041302555_0.8842983487380598","host":"s3://npm-registry-packages"}},"2.1.4-unstable.94":{"name":"aws-amplify-vue","version":"2.1.4-unstable.94","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.94","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"ad28ce566fd5897376b53a0a00d79e8bc574d679","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.94.tgz","fileCount":47,"integrity":"sha512-BjECsAu36TuW1KdRSEya7oag0Y7pMa6LH2OEwLtsWqw4y1kHxWKoB4Yk8ogexiiTwPRw3wKi9bXuXsdT2SK0sQ==","signatures":[{"sig":"MEUCIQCUlvW+/21ggvV7+RpUEzHIP9U2kdk4W5P44fFJqxxK1QIgNc+oNwF+E+TcRYSrcKduN+qBjr4kWThRSxZbIUx9o/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf91TRCRA9TVsSAnZWagAAzMUQAIswGBGB/YRsitJWn44E\nCIX7kCgrQj1ZQUiqeqWesTzk5GvrDz75+b8QUqdlHFqsWgQ/hJG6u5PN7nF1\nVU6IenKZjNG2BG4NuSQ2PiwHyNQt2ZUwPh16anrgmYZEBW99gIwbnN+MoGf0\nIexifdstq/H+WXHLN2kkDCuXWpGD5bc3b1kZVqSM1bEeZI9cIt5XLt2kCm/z\ny/HmZJF9f5xZ3vJ1fMoqVYgR9Q77KiWzXWUWCjZyrCPFlCpd+9I7j7gZ9h0G\nfHv+IOeIb/7kTcyLGgCJGCzx3XOkCLFpTWGsE/JN2WNxc744UnewsYTDK+rp\n3Vr/d175/2CNN3TMPiE4u3Sqoy7/n3w2UD1k4fmrR2yrs9O768lRxqU4nUPT\nXmt5vEqdLVnxhre6bWqNI9AFn49TLHWUjegcxtTM7JMDMDeC79xKsvd8Nmkv\nRfKyEsNQdea4bKD+tL9j2L0IkeWLj5iuQyv6/bn6Q+lQVrRepO2rpQEt5eCh\nbmi/jCMKv05GYVzaO/X59Hv/nzgnC3kWLdkRiJ1+RrNNlPUrYDEFT/prZWcR\nLvVkGggjUGqhNv/r1LG/gV58OUpt1Wzt3Q8VzyjKjujmphkl25nk7IAC/oOM\nVwRc8rZlFo+qw3lQYIir0jBo6g+d5YdT95SmQz26kVHWW+mdtiniPK/u2p2n\nAGni\r\n=3zT/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b5de2c99a6aafbafe961849c8066631c2a03151a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.94_1610044624989_0.7448801852517852","host":"s3://npm-registry-packages"}},"2.1.4-unstable.95":{"name":"aws-amplify-vue","version":"2.1.4-unstable.95","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-unstable.95","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"754124416b955c4995fc55adb555cffed5d0d507","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-unstable.95.tgz","fileCount":47,"integrity":"sha512-khobRdzWrujx97iEC5/XUwU3n6XFnn4iKjntq+wW7OZ4TfyTC5urTUKOD6NGOREmCmdSXoyXGxGxB7+BzBgWOQ==","signatures":[{"sig":"MEQCIHa0l7oncb8N3pLMXg9yBo28lmj3xAGBbo4ceG/rsIClAiAQE4N0+liB4gf9BiScG2wxZoZsgnydbBD/0gKn/sItig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf92lMCRA9TVsSAnZWagAABAMQAIszuZ/3/xIzQPXoaNOC\nxT8MeVmqSKANm/3L0hkAu8uvAP3809qOJP0gzZzV3SS0wy3QRNielzfe/3Lg\nbkhaK6IhM/FCGsLEsG7RSb7ImqptxH8F2NUrL70yPl/A98iWBOEL2uCJ3CCc\n4bDgUjQH7JhZvqJtZWnKK9DoCn8mUD8G3LDVMTcodTRRAQajPuCmr8jbj9+g\nlSrpDZMF+b0grrEXRV+e6/mfYMHD5So6/zMUH4259Vw+d1rpSUfmcnhijrv2\nRCBpiNQtsBDw77nHkeFP8ABug1ETezTr3Hz3IPwhvCVCjBiWm9BNVucllZKh\n4b8kExroRjsSxhDaR/vjgwn2VpblB/huNcmGN7Pexswxcc3ZLxmW+KNUDr+d\nZmlzHkh7Fb5WdVGZL4yihsK1JdV4YjZfVOIVd6TVbRT5E8oGLdgMXnTJNqas\nwX74yHhXHYR1HXvuNLaNsd2ir0VylGW3N2pUmEDFpLTK3WBA3k0nyA5bKN2w\nnto+oX2UtKdXWf8iOqJ+RnDzed54muk1jHz11ZpLPwiuW03SKFsXjDcgwGGK\nShulXO1LIVLAmOUMTFFs1yxZZ+I+ktrXBifhjeoH6uZ3jg9yz1tMkaKeovdm\nnzYbYxjuvkQvjSHEqaSvjnof5jLZhmr5xILhKQHQfDvKkW+me80T4DL/d2ra\n1JOg\r\n=4r7C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2a53beff4ffbeeb9857dd8c144fcf950ba09f7e8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-unstable.95_1610049868276_0.6509818721486524","host":"s3://npm-registry-packages"}},"2.1.4":{"name":"aws-amplify-vue","version":"2.1.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"13cc63a5f8bb75b1ed944dbd3bc9ee3f73af1902","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4.tgz","fileCount":47,"integrity":"sha512-o1w5gswDTwyGKi1j5sc3+5jNCUhh7s7s2PepXikDVp9lSaYxntOj0dY4fxCEdlOk0SULd+4coN0x96KmjARSfA==","signatures":[{"sig":"MEYCIQCili1iobatogjxJm01NgZMTfBauJzjWmG5k/8PhTgGvQIhALY39FUg5/zJStJwJWFQOPv2jlBdV9k6ttDf/PPqKTPq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95oaCRA9TVsSAnZWagAAbMQP/is01b7QgbzBiHZk+xdx\n2hOKFrlDPw6rxEyCxfHD/P3XcWBk9TXCzwgPcYIMZH0Io/qAUvmY0CPyfoR0\nz+OOVSkL9TjE4o19MdP/hYrDOb3RHtzZiUmwmf6uuJ0kiq8BI9QC1Adr+yOM\n/qRXz0CP++pzejL4pB1jQDAuLfYFWXzqlyhU7K+kwGHJJg2hEep+F6f0cL1J\n5x84XxbtoBDTacT65oAIv43dMoLo6q9RfXuYBrPxTsaaicGVua/YIzLgiPF7\nCPzMyZHMpv+cjBDllD/rsAvYAVaI+6RUX8Q//BjFCkJkqO8crd1G9g7PHded\n13f4jZ7jggdjUsk3DUMk1ylHSGLsUiVN4VDUt82M8J0sUsUFmnkATCp2uyJC\nPpLYMjKgeLwvw6ti7K81BaI62ZPXb64ZW9rIppUAAQuHoCLsKP1rEEFFss4Y\nKjlHMnha25r6qU9jZfL6nSkgRUUXKGA6Fxi/J85TK0iEDMOCm00RpeaHeQze\nTPqOMLdNeqG3LuI+V+4C2IBngYt0vxWrvVOuz8q7eprzeBFzSg80vyBGbtoz\n0FJ7WjllAH9qFClrMhuI8uzD5bRAnjRB4US3JlzzRtmm/Ewql4nXotH59VMz\nf7Wh4lVOwn3IAvA5GA4W8/Q+krEPyScScbf40crwdJG2xJRWwQSjBRhM7Wf6\npCeL\r\n=/4PI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"02d5456443c6e80c5b014e718f1e7c934855b4a3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4_1610062361844_0.5791538919943928","host":"s3://npm-registry-packages"}},"2.1.5-unstable.1":{"name":"aws-amplify-vue","version":"2.1.5-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"c4ce787c386bdbd2f20ecede4d1314457761aa7c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.1.tgz","fileCount":47,"integrity":"sha512-jZaCCwHsynFetbcwKWW+Kl3tVmkiB2zz69zj/yAKQCJhSai7pfTwNLSynbap8Bpcsg2xrMJRsPjWR+kNOUey4A==","signatures":[{"sig":"MEUCIE+rM8HPPOK5O5wf+XJANNGgtGd8vHLU2udB97C+iB/MAiEAgwlxj3CYBN6BpgoN/0vUEq2p0QLwiPpGZjQmlAYVg6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/KJsCRA9TVsSAnZWagAAMXQP/1s4oQjIZy1635n1rJRW\nApjCcWHK4oSkAaYB7yfppG4YqACEUmyZdl8TW+/a/p2ACwtgGGRv19x8skHc\n2Yny9VpYtB56HtMQAmt6MdAx/gDgU+e3sKlYKSuuEmkPeu4RaqV+TkgnLUkc\nhSNDJx6g+BR3bmAtTBy1OwGRpAB8ujnV3vZ3/pxtW9valFe1d5flvPkcUasr\nbTsvANCD+15vgEhwJIIzb+iwH824gUrXxPedp1LT6g009gvDJRBlUYvKUUKu\nq6yE3y6oPqbyQtlzhTZBB9drjbdbkBhwMy63stEQVWVVJCYZXjlS6w2vxFJ7\nmDt00pHS4tFH7q2F904TMv3Ztvv6+RcjOZ+GNJmWHMzZx5vt3b5Ho/lGRzUs\nwFsJaOpkSBlqkfB/O68RJ4dQVULT54XLPPsaTgFq4z5Lvh5YEc9H/8l7ZOUd\nwvucOv6xo1iSHxCF4+tmETB0uRv/+piOdmAZnasQRA7tVZgPG/vtsGiRs7hZ\n2QwFBpDFydaepcakIcY2S5KD6XGK/38LwfPzYZ84RsHf7PibV5whHmI3KC0N\nESqhaZelbwysvsHZ40BQdLRvQGyZ4vYPvMXmirz8sIwVz11Jw+ASa+CvFfaV\nDp4V/4E7Mq6gWEpi8+gAyBZ5VjY6Rt2GqkmGQ+z0QnoDIb4yly4121WlGB2x\n+naB\r\n=Ixan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"13b7ccd49b3314580b597dc177f400c1b68e930f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.1_1610392171742_0.83146895589958","host":"s3://npm-registry-packages"}},"2.1.5-unstable.2":{"name":"aws-amplify-vue","version":"2.1.5-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.2","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"d5bd4cd262214b1f6d951aae36e42f24d302533b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.2.tgz","fileCount":47,"integrity":"sha512-kSymLrLu5IlF/t3Wao+gX5CSepal+8bCZ1J0MZt//tW6Vi8dh2x1nflAJHdkCaIFnz3oTkvMY54BhnWcVqockQ==","signatures":[{"sig":"MEUCIQDF13HMk/dlEJ+9QYWCxxqm/th1te7IGlwng17QhVqMmgIgTTldoWXTlkraGv+VNMi8R0IBp4Y30/yPIIKACKJFAYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/0kfCRA9TVsSAnZWagAA99oQAJ9R9XX4iKvwYMWHu39/\nMpAgY3vpLxcuBgVh645fUOG8dB7bxkiWSuu9Cw2gK7Yb98iqHDcpuWgta8Eb\no8j+ullKC/J78G/tqUren/rVhSANrVAetw8MECU2OhMerdaQW0BxmlP6azhX\nIlmZwg1d3FUVBf1ca0lXRN+ufrLcXUqA3pGCXYbASVftOFKgCBEcHfyZxDZn\ntapmXsClaUuBv5HvMclu/7UjhnvFTz4MX/UYqsnrI4V8U/VG1n0JfRDtaPCc\njwiwQ4hg6SBkLZYEma8P3/jJYXYGUXKeS030tiU5mX02Sz/0jQHCxR0yd8q5\nddO/XTUyJHUrbXwO336Z0GsPhepBIgLqEfmnnwQB1f5/lgtBW1qSJpcXZZiR\nhJDyoIOR8Mt1eCAePuwSG0VNmRBteyKhKQVv+cE4k7QRRaeu7zz74XNdvN4b\nhoF49Vq9RMaBNAx+6KMjEkzSNBrn2Tfp8q5oI8dmZb/cw5dXJiH1Nz0u1L6w\nu5RZDB3DyKXSklMdBxyxC8jopjFWA/jiwzlyaGFFgoES6ZffCAwnjm5bA3Gw\nW+OOG0BZYZ2WJoBauhJ/l3T3Hs/pbmx4ISGDTBB0WzUM628QkQoy/F3fPjPd\nG0q/Zr2m4DMI4Ydim++dPO7P3hyps/0RYlWlbHXPB1oZRWIMOKiLoM1mIOh3\n6PYo\r\n=1wZP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"760374ee94e740d8772db9913eebb5019d0d7c97","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.2_1610565918486_0.7660506541293113","host":"s3://npm-registry-packages"}},"2.1.5-unstable.3":{"name":"aws-amplify-vue","version":"2.1.5-unstable.3","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.3","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"8b1694be79cacc4dd3e47355c438d06df705c271","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.3.tgz","fileCount":47,"integrity":"sha512-5cKyTZhK3QzHPxl/Rp9ENgit3nUArvvcRYjwA3HeenN6K8LO/tPzc94LLcOyqCsd1ZXdGUUjJDphY4lzQEEXxg==","signatures":[{"sig":"MEQCIDI0ILjaA0YBNK+gIPW4UsAdm4ia+e5tLdO/QlWVW3PEAiBC6p1VewD7xPVH1Dai91j58GDebHo2w3akTD1lkrwC/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAKD1CRA9TVsSAnZWagAAkCgQAJ64VZ7zNuTGzKBspDlY\nZsslCZ03lylAZmQvN/IDeoijxggb/D2mi5es9ObZO8aDyk4qF8B4874ml9E5\nkuIXZ5fUj1BWruERKYuqL606bCjUuzpqiE7xdYYxEynHewXgYC6N0q+/ZFJM\nT8PQf7f3YmZeiDXARKqNCd/tMjr8PMezcHIcU+oM4u6Gx/bpc/bvMcuUvS+i\ndn8yz3gVTRlI0Ff8uNtfTAIY+3pde0rNlQdhWK7LbJsKzT5uQflojey/omYw\nyHi3kPIo+EvStZ9mZii7395L+VXo9KQfyx5uMx6+VsJTdMKhMZGFJK/OjtVq\nfp0nkqZc+p0DRETu7qsKjQ2rUFUU+btDw2E2Qy4VAJq3H9ny3lglDjcwpVQe\nyLmmW27BBSNgLBGL51rGTPO/SudNFeKlWYJoYhuuj+uxm4xEYIZtgdo/U0g6\n6v2FYoIfV5sz84+il8SRoXWyg84B/eGPV6EiENPyH8uJpN9V3TZbBwnYMU6A\n5ZElvgPokxI+vZ2/EudNA8j4Pot9lsG3Op0r/XCMxhKbzzZYaOcVwlZ/JReP\ngj9i5wZkg44IyTTZVk6GBSiKoQRVG+NbqEI6WU7NcAU8rA7rOuWkxXfvOqCH\nJV3lc5JENpUJOA+nPc8gvLXRPK5r83lh1g+59mYY5WChYSfcpBBAQUa7p9AB\nXnDH\r\n=SBz7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"843183b094281b42ec829b010dd41d214899c23d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.3_1610653940472_0.5737913694796819","host":"s3://npm-registry-packages"}},"2.1.5-unstable.4":{"name":"aws-amplify-vue","version":"2.1.5-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"946646946ac49780a79b754201786ae731c20463","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.4.tgz","fileCount":47,"integrity":"sha512-HtyKmqW6GTc3JDhGvP+EPo2/L/Uo84kMaC5V8l//2+lXOrr+zATgU2VkhtSenwnSAjplf1j4sp9/8ijUb1SNIw==","signatures":[{"sig":"MEUCIEb/fEgy5Q4twX87cIsC4m02WjGbeHtsHfdYw9q9+c79AiEAo7SVLPdyusB9DAi+DmHD+BHPNpNFsxA1qQ0EuRlz/TQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCICACRA9TVsSAnZWagAAbw4P/jZpyEvYlJPHk7IhLgex\nBHkvAMyLGvcrBrbkYkIikOuTR9Zw/Fz/Ht8rvZwW8RAFqOdXSoaVIH/yS4gw\nS6LPuvsxaYxojBNXslKysKiO4Ao/rPlYHsnlpN+ZGjhxZt0eYxcTftcddu2q\nR7emxeOcLxGzxQ+SYPXTK7mTZSHQgsONMzIwoeeX1s6IfjqrgNqO71JrotDD\n+6B1120LHXr+5vaSaUPKU1LW10kMb2Ujr+0bA6M+7EHz2Zu26y0vDsbTaYiF\nMWbycr3COuKxSLQzg2Oe5SRA9iASg8g8BFTlwi26ZCqkHs2JmK3MzRV4tGE+\n8A5XDsxhZesgjXK1luDy5PpUZulo0ia3pyTJ5wenoMbp7i9S8Abhm7TLCLPz\ne9PtLKtG4ZoBlwONZ1KS3xx2ePBgCrumTjwFViTxjj2Q9G3/VbsKI02KvIVh\nDfWKazO555gtvUhpdkCBDkPswBWpRi3cIOV3L6HTgTtvpHZonauypRTjAeQF\n/n8v4lwCAaNNU68uzdlNewhqi6WvIf59BeTzCczuSXzTEqL5VFj5ZHPFmndc\nCBQTQhiotJgi5h2xQkjCDtmgHwnXkWFNSN5rtCyPfdyoj8BvlAfLiLQAmA/i\nmvDAgzzuxihtXfV9cSmtALqM5Sjwp/vsP+nO0z8DNpRNynebIo4v8SK0GFyp\nL4JV\r\n=sl/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"537c9c5e27372e02e220069456f6cabbc95e7fc8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.4_1611169920126_0.0007487988703858139","host":"s3://npm-registry-packages"}},"2.1.5-unstable.5":{"name":"aws-amplify-vue","version":"2.1.5-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"5de03900508ea87e621b147d19b5ab88d566848f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.5.tgz","fileCount":47,"integrity":"sha512-ElsRoUSx3OReWWqrQGotS4yw0Fa//NSn2UTanNkRCny3DUombF4zpuEdBIA5i10oAnhD1v/yTN7DeKrAc069oA==","signatures":[{"sig":"MEYCIQDM4tYVChq4N7tZb1ug+JjwcS6DXrOzNn55RcpeSssACAIhALNA3YTuIslgI1I9IUztREAWCREGFwtypveSieLwqLt+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIU5CRA9TVsSAnZWagAAnt4P/1SFFceygMnvipfBstNN\nAcD/ruYhZw0wE4weBQhPUZwimT0oK9fCGOHWXJVrf8uc4GbZwojj4x/Nqb7a\n5dyrZu8wNvwJwjf2Gc/GaMA/0lUDPdb95JTiCLLhCtkZKbdmh3oD3SU4U0UT\nKrRCQLXVFtohRrJnEFXKQtIsaYlTWyh1pTVhDlBQjr/vRfYJgrUrB/FvYIsL\nG/WwgoOzuOoskbKgidgS7t3LttDp/vTV0jxp8Vnk6hf+xrN3W5H7dx6RP2go\nq20RzcFiQDJp3xDnRdnMpoLCiPGZbo1xo8zbx66AO5oB7fIsQoUr8GAClg29\ncoPnxTmyBMIJSuzvVMjkEqRJE+Jk8KLyMxBTMtOx4HCSUmPkBDlQ1mZRl2Ts\n2Tc7/DJtGM46D/vqdGGzgHsw9UiXwQvagCqkYz4CzL1ItpeJWc1r534+859J\nbPUlZ+tBAKaF8epSqn45uQXyqn8py/TtFkkQQMhyqJcmqAZmFFEr6dEH+QYE\nf2XfRM8YcF6XlHdWVmp0p17KZ3ZZD9gnYI0daCcr+5StOe4Skddp0obGY/OE\n2RxOffDBZ8p8b55O6VqBjkH66/KRCruHgG0qJMDjMQvrRroXJCtlV+Yt1Fmv\nsYoU5BNzsd3zD66Cb89N7lS6qJ02D3l21RxGLUK1EguN1u2wB0q6kzz6kcvr\nuYHN\r\n=7Kan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"84472392551c8c9b1c81c4c76de49752d9d4a653","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.5_1611171128500_0.2182066634934594","host":"s3://npm-registry-packages"}},"2.1.5-unstable.6":{"name":"aws-amplify-vue","version":"2.1.5-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.6","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"4a33f7f916df571761e55c952cd2e2b0497f45e4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.6.tgz","fileCount":47,"integrity":"sha512-XlntpXjyJwTLFs6SMsQsKimhQCGLpz9JrcdSfjJpBhOOMzbBgHxhOc9uI7Yx0yU30zxsLSRvwkszSQAaZu7MEg==","signatures":[{"sig":"MEUCIDUdC62nnxHKsJRZt0DIWVgaqYAmQtFoyiO7ncZ0Khp8AiEA+Tma0T8taRYmdT7xUaB8Pja9ViruVNMuP1FXgJyGErI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCyZUCRA9TVsSAnZWagAAXsQP/34GaOiG70BXk00ypIAB\n0abDS4Ayk9a09cyd4Wc50EbenAWfISYFz7GbByErgaf03ncHzxXYn/nn24vf\nNFy2Qkaticrd0X5PIA3RKt7YHwAobr2WI7VBzSTFTKxk8VT27uxxEZeZor0I\nvRUjfH1x3ZsCfa9itUaGLil+6YthML4HVrjp64n/FQ3jEDMCgRB/QBIeyDjh\n6TSVkTSTW+ca07f0D4UdWzREMobgMASk/RfSUm+7VW32racdFCMjpB2+82JV\noF8MGotxsqaCSY+eJSKwlaPwjprWp8zGfX0Hv7rGmuPNKs+2fLpVnL4PdoMk\nc0Kbi/55NGzld46aWK4C5LYss1DayoKie2x2UZes3k0c3o7VJcPcbGlvwxOT\n/v8zZYRIdO0ee22466IZuApUUMVqJn0aqrBm/hnTIoZZBqtbTYCKIK+L3a2G\nm3h/aDWFBB1pfuRP2BtbThUNd+MNXQeNoWYaeDbR6KnbaT6eaOthg6kufmd5\nQxckgsbp0E4sztWoRLA5ezcdFZtWyN3mgXx5gc+5yUjavBrsTSQtnJaKSUiK\nYTYXMMWKaDIbTV2tD1OHd75i5AWR5/fD87xbvObwzzNkwMfkXxUMaCNg27yf\n0xYKuFKzeCS7lkBRVOCzmGitY+w3gl9BvZRNRLKKrYFj4QhjC31mRh93fMqb\nvgnE\r\n=pkbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"286c9e8fbec3ccdc5bf24edf3cbfb2bae370d751","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.6_1611343443977_0.9763689505764621","host":"s3://npm-registry-packages"}},"2.1.5-unstable.7":{"name":"aws-amplify-vue","version":"2.1.5-unstable.7","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.7","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"cfa9abd62cffbe2b56ae3d9c4f668657d2985421","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.7.tgz","fileCount":47,"integrity":"sha512-JIEANNY/RnGERjXTG8W9ykmoYkhdSDFkZbpJPBDraxJLhTOatNgTLzPo5VqJ4gWPGYVj0DMosunBRBLBNQktSw==","signatures":[{"sig":"MEQCIGo+va9QHkHIEB2UdqVPbjkzDQgPdLo6WqrjzFnZShFbAiB1Xr3fvN03AcZsOl8l/afILDyfg3s2hxoqovANyD0iKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDy8NCRA9TVsSAnZWagAAtKgQAKR50VT7iTonWhjjEExC\nTZnUFHRzq5ljKX3TlgxoJFGav9s+mpfzc2UmhdObDA8oXRjojSOiTCkS9MYv\njZ5LHGpL24s8OHb5p6t8bCthEiNJiY2yUF85H+B5uUkEwmyR+2GTXzi5MNm/\nENWmEcpK+R/dB5/gaiowN6oFDr/pr/JCbMZVZS1D9OiZPL35JAzReh6pR5E8\ncuSlkA+Hc5aRBJNXe2l1IzkA19kFSfMAa80LNFiIE9Aa4579LcP5U/l0f+9O\nW0IHIQMBN9o8NHb8C/cKL5P2Dp2XxKspoh7Efqodq8JktY6FjLJAvy4Bj6Yo\nEnQBUpAJckGwz7JxWJY9FO3KctS7ou2RAhk+wTTNR5YknkPlbuFzecSWZXtB\n3UJ5sTD2PbhKpDm0Nrk/mKkFj9edXzZBRUihJftL3PO/ytho7a4A64+Z0Ear\nnOcSez9vJj+QvJAs6UFBhzfvi5QBEyZn/0G4cmvsrsav7tmZWJSlfn83TKPN\n7BC9TbI3VynNt8tdwSM/Myz5BSeGndqxyFnZNfzGD6EaHwohb7OCwremJFOb\nMvMzQaYzwVr318GRdxvWkqA/TXU97YT3e2j3BBBJDgKzm87mYpP0cpUFeJ64\n/KBzURiJ3Cu7szIVCcmiUyIwtvk/lJWPPvCnd4efaaYHRLFqeMgzydabZJ/7\n3lFr\r\n=vKSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3ce644c0166fd224064a018f63ac6aa1af1d0f84","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.7_1611607821249_0.4025213765254927","host":"s3://npm-registry-packages"}},"2.1.5-unstable.8":{"name":"aws-amplify-vue","version":"2.1.5-unstable.8","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.8","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"36afcd56a7cbf6968a08b1c1cce7a23b6f3b5f88","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.8.tgz","fileCount":47,"integrity":"sha512-iF6OsuaKfIE8ZT+pjWdxuVGuR+bhQ4k/ViL+vNtbC0nmSvG+/Zlc/kxk0s0EYTQxV9KRNywE03UGRSrnnTMqEQ==","signatures":[{"sig":"MEQCIHOQquITVSKcPL1wN86BPVEk8ZUtTtco2NWzh/Pn9dUwAiAT/JqjhY51en6VC0zRtnEdii+U3HJckLRn6WIbj9DE/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD2F2CRA9TVsSAnZWagAA5acP/jfe9itVYxzDuTEYeeS3\nN2oPoYl/S+rqZaNHNpXebknboCTsPS0e+wdIMbHLTHj8qZ79SIajQyf4cHPv\ndNtGZheno5zDpDZDJ8vnnjHUvZGc87WebecHNCvyvnEdrWVKBPJa5fhpXG5d\nKgD/m2dmUM6EO3/K7CpcdcaU8DjVz0bfzl7oZ3fuDn7WBn91VpslVAmhAMH9\nz3oME2C/4s0ih7PXsZ7NjMUriEJogcBoHI/DCRquI5iGWXNQkfjZiJuhMMf2\nITIIRdThrMLIGXmrPXzOsXju6yAbSYUZ/K+BNxlq4zVfMrF3eNalBOHL0TAy\nCw5TBRjrDqWtEVHb6kE/b8sLI9ub3aQV8hTqnnJwAq8ghGzNFNYGYoc2aTKG\n+5orOskVfeeN/tR/tfZM+0X7YV2bCxsZlGSiDq2enJw9unQllVQtut2K/k5e\nXkDWcaL7m1hv65EEUkuRy4jTI6M2jYNlsP6C98a8N/szfJWpXP0zf4KDtPeG\nW+05GwtdCWdUsM82q17VvSUmaERgEL/cBBCzGVAU0UIVdap4Z847IZ0aDKWf\nlM0owY1D7hOA4zcCqvIrPQbf+jHvoKoa3i77Vht8QpBpPDAl7v8gGGa+Sr1h\nUCqb4AaSqZsXTYKnQfkcbEfHYxA1R1kCFQTLHDhb4QrJ4B1BSwOARmZSfj8o\nOfqq\r\n=9JJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7b5b23f9fa6f1c4934c631ab6bfc363b8d3eeac2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.8_1611620725572_0.6701264541040881","host":"s3://npm-registry-packages"}},"2.1.5-unstable.9":{"name":"aws-amplify-vue","version":"2.1.5-unstable.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.9","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"773d1beaaded1d96b90ce22bfb799485833c87ab","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.9.tgz","fileCount":47,"integrity":"sha512-KmL54Eyni9IXEe+zzhdFY2S97dcGqUjItsYoc9k3w8JTMFXJxKSFPuJVgN4msztCQLsjF+RT1EUZcX69Gk+j5A==","signatures":[{"sig":"MEYCIQCulw5amP2w/4843BW8SkAGij+U83DoQytdEjHOPELSLQIhAONyrdVD0NQHlFQoO24q3Ac9+67JUaMbfIGbstqktXXz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMKDCRA9TVsSAnZWagAA5z0P/jq/lkn5GRKhYUKoyW4f\nrcoAgt84ikruu9iUjb23y7k3a828e0NjoPux24kwiPd/Dw8JgFhPHitxFizn\nzNRWZ0AnNgDNArYSFdnDq2gfH9Xx63eHcyukx3/K50ergRu88Hki6tEIYi1h\nko2SIRnlEDG9GGZY9/GggkqXzzYIVQ6U/nd2LeLcrVRzT/dfzJdNTfQo/UZ9\n2LD5y0B4YI9zivbxuPyJYQdpz/SSqDkYAS0XTU/2y/5U1UtyKUjV0GzEDOuN\nhoEby42r64HN9XbCAieHlnsD532tO76/RSVTJhEDwolQQbiuOO9lCpKmCuXg\nCGkU70GsCjRj0m6ESKc975tTKN/U+HsBx579w3V7AyrIH10CmI4PZ3J3wgox\nUkth3LMHjfSD8Xu4tsFk4fpRVqjsFb6hcrC7r+a9Wrh5oMeXVF/mRV2RYY23\nqJYSaxg819QIXSbWm+DNEBn7YD7U/Pf2nOMKZhJpSogt1rDAUfkbV3Pyd7Ah\ndlfWNhJi2wZi2Nh/2AV8Y5Q0HXOlA0MSrQUbfmNZNo2h/uQhW5OB0KIBuWjK\nuXic3c4gM4uWwU5Fi5FHbbxoj9I1yqb1Ut5PZ20iE6v18/edbfDd5k2ubgYm\njGZx4u4MEwDANYhbYHL+3CfW62LzB/G6M+NkoniZ8sI6lKG0gxcghYoP9Ynw\n4r1x\r\n=7tcv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4ff90518911502c18a93d64a55379c3cd9739c6d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.9_1611711106968_0.31536432765827427","host":"s3://npm-registry-packages"}},"2.1.5-unstable.10":{"name":"aws-amplify-vue","version":"2.1.5-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.10","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"405477327a9d4972259893b1f056ed9bdb6d0bbc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.10.tgz","fileCount":47,"integrity":"sha512-ZvCTx6oKLL+NJ7TmNLJtQgSzYNyHFpQQe0x/7k/f906kbtYsYZRMZ47hGe1Ll0i7AE4QSSJpQtA7v6SU+MFsCw==","signatures":[{"sig":"MEQCIArRIi41yHpNoUWEqTZ8tqfBT2wNciZYthICogJT8j9mAiBzTTdNCHbyuwSeRHGtJ28Q6s4ChDsPTxQEygkZudFdgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEds1CRA9TVsSAnZWagAAHOoP/jVAYKmxxf5+GIS+0mXM\nIfi713sEKN4ScmosH9gcZFff9KW51fjlGjaNDJEEot/bSSZ4Ty4SkT7j121e\nLe+oC1KtzsQkrYH1q2XwIKesJWZ8oxdnGhe4NeaN7OKihpxJf4NC6hKxi+1l\nwPicrMGJG4XlogEVFY93Cn/fCPbG+WgSdSTIvARTdXU4/persSBIcKz02rHg\nUSkVshOYXO/uyPIsKfPbVACpuU0o7RPcwg+RwSbQFrwSA+7DWD8Ls6wehcQv\n/zYoJE4NDFY6YywmOTaSNWqSRFN2UKuho3LOMsTVDyITaVVYt98hbDMQS4NY\nmopiZtUrAzhayjkmZ1U24c38KW6ObfizDXnl354lkwvXWbd8LY7vs0gA/8bt\nt6cxS2hoNaclAyQ64BXXnUyQXy4xSg06jh89ECH+aAmbm4tuIDi2E9nvEBUz\nAiomtnT7Wzh406fCXG1v5cathLiG3jSllCy7jgpJYboFl3+JiHrMoBcOfakB\niai/KoysNd/q5W/T/ax4p6e/EJCALy8omJ/9fZwAoDL0rMSlX7KQBBzEpvBa\nUs8M0Tws1iOJySymGbcxvywayZ5myZ0teDSt6V2VkWA4FfWDPWRc7+Jq1kqQ\ni+4ZxkWJw544OYV91mDAZdNOLSX64aFdi8sIN70hkq5WMKyIu/ajOui1t/Nj\nIXys\r\n=1g/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"74dc3b12f29691db549dc51b41dbbe45266f6adf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.10_1611782964540_0.07171572348245658","host":"s3://npm-registry-packages"}},"2.1.5-unstable.11":{"name":"aws-amplify-vue","version":"2.1.5-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5-unstable.11","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"bc3dc86b14b67c72b54150f5eb2abd112aa7614d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5-unstable.11.tgz","fileCount":47,"integrity":"sha512-tS6T4ZkQAzv3PEuQUpcTH5ual+wA9E7HHZmpLEy3kyrWEbhfqwMPJsfYsw8HmEq8A1R68LsGWiMPXel3biUkEw==","signatures":[{"sig":"MEUCIHklMcz1Yiwmww65RR7DZBxqjpYQqZWRUoRIW1MvN/nGAiEAnN02eRHDsswd/h+fr8ncVRon0USQuVUGhhxFub3fjD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEz3VCRA9TVsSAnZWagAAQoEQAJ0CylA0yZzpC7h66H5c\nofRCEt0ABLDIdYylPT5BaYhtfPUxU+ONxl90PxU+IoXdU+aXwzpDGgfkuFkd\nDYZ5iFvvUxRSi52xMyM5pRofgGGbUvpdPvJE2G6MGuwsCu9hEVJ+2Inl2MPd\nB5UsTk1zmhGkbb5j3nxwiYMM43jEyMhFdC/spXw8nkJDFFe7yMeUsdaqc13t\nGr3j6OmbNcxCDLkcgmvvrLMvk8bRZjLiZg18YeoHzEErcefDP69nDi+8unTo\nLx1094ebI02aIMYIP/xT9VvGWkDGzW8VzHhJg5GMpNLKljH0nQzyfrOV7I49\nwQ4vIFYVoW2h9CdA46ttpp9+fkQZkRB8H4eMmndJEG6sngYzZNIp6W286GqE\nJDToDpq1afW0ESr9Sp33Mv0Mh/YpIaA6JKnL3CwUsx0AgUz/mGt3R7M+BC0L\nLD4d7ycARKYTZxLExkqFCbkfGWZEWBUj0QarnfEHyp/ARN0Kc1G50jUOOl49\n0Mgl05uz/vOYK5xRt3rzWEVIQ1R7TgRDsiLzj2LDLFI3wBZzkZBW7StLGDBs\nOrj/6lucBOUexRpYM5tC6SJa1eNXDqEcpftL2MZOrQOi+XMiWKVj/bsyo2x7\nxmoK2Ub0GhEFGjKBOFRXvXKh6zAITz/XhBsnDiH12ftLGTI1zkIZI8FTXD3m\nAhNH\r\n=nvg6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3a9efb0b596cf2795d7e1424f011f8e59058ecfb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5-unstable.11_1611873749378_0.42716354230403386","host":"s3://npm-registry-packages"}},"2.1.5":{"name":"aws-amplify-vue","version":"2.1.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"56e2a79ee924bd108dea4d9b6e7613142e936569","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.5.tgz","fileCount":47,"integrity":"sha512-Dr/ZJJUHlvCanIjcrzhPmOt3QhTBvpDvxRs2L9UOdSs9klqxuA04Akwl1dxeaaYL9UZ0VXF0LGu/PPootcO0bg==","signatures":[{"sig":"MEQCIFMsszRAMTxgQkkXJR/vGUGvDxPSHvTG2OTt/5tvJhDkAiAaWLlXjEJNjy57PjlwpLQ4SVBaMruCwd9XOFmnHlMzzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgE1QFCRA9TVsSAnZWagAA27AP/jy1enA8FgYCiPbA2U/0\n5rp4aBNh0HRH80l6zi3rvQTIH0hJxdbr2RDR0jozYk54xC53Q/I895nOELPN\nqrkgUrql93N+t55U9mEkWOkp+wTUKY2sE9lo3jG/WHIU7kA+mpa+WRwO29JB\nJftbFUYMyI3oSNyqflaRpC8fZq781qF+nD/NEpAcwl5onmCArBoNSze+6Elx\npPW71nvA1clPMpnrc4hZ4bWlkg9BCmzVuJyE2toM2dUrLx1AxMnhMrsne7f/\n9+GGnb1c71DAD4lbDTJlwY0OxWvl0ezRzwxp0epQUI6WI475oW0K3YjE0JnE\n8bVLx0UVaeZS9jAEn7VadycNhIOih+/uwDHdnCXZA/vmuKdI75n7eTG7FI7X\njMqxF4zabokp9Q6YyrE2mrK6ecJ7bWs+sXsaYkcxzEmo0S9iLOwt4WCc/Zt7\n741glzdEf2Dzon4DuPlz0/sBc4QM9cfgABxAS04vPnlr5ruSGbjqHH0GnPOQ\ng1QDzd1PfKhjAN0yAdDi1Z4MtbAGJAajpzwMFsV8u0ZBczu2MHGs7ml0n8PB\ngqUpEK/Ggce8qHp8jnoaQ3IfIuJjTG12aUCh+5HGENWx/ha+TWR1RMNPaRKh\niikIhg7LTfQm1Zbq7L5h5ol78TgUvZgFU5Zgim2UdEO9LCwdT78VfK+FJKgm\nXXUH\r\n=Qz63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"f53afdfe8a7b72f2eda70b2cecd8fae3ceb785cd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.5_1611879428576_0.9643155847323961","host":"s3://npm-registry-packages"}},"2.1.6-unstable.1":{"name":"aws-amplify-vue","version":"2.1.6-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.1","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"2c6274b3a9ea40b793e671fb8571918985132aa2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.1.tgz","fileCount":47,"integrity":"sha512-7N96Sjh2H0LrbctEeoOBoESiCHwYlQ7P6egn7cjDzHq8InB1Jfp5fjxsspPri5vtwOiXjGsYanwWnSK+OToVEg==","signatures":[{"sig":"MEUCIQCHGb6K88btVCXNLSVo/B/nAJYmzZcQuzYL7mCfIW6ERwIgfOduj30oocW+MDUceD2+WS81Y2OC9u2dRc+e2XN+KwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFE54CRA9TVsSAnZWagAAmIMP/2U+4XlwUhGG5Yd+iGIc\nlyQzcuV5aq3xF0EPvePLaJRtzeLb89aT7ClQttJt/eMzQ1DgOoqdtezCCaod\nzxvg1Ly9emsKjsezV6djO0FVMxAQMNkbCbPIaYwfLbbk7WPwM3vnm2hwXxS8\nKXyfyvzMkhq04gB5FLmt9Jv4q6rmCnfOt54sFFXmXg3PN2ntllOYvXkVQr8g\nPnhAQ8xgImB3ofHJSVDDbU7S7NzRxum0md+zvYlMCDZjWroBqz2bUPL1tw2s\nJgou3QYvoaUQTE52xbjnZ1h0P7m3KiHvIQbXo3Iy1Pz5UZmSnqUCRpy6RAtz\nkj5yuxnOVvHzPeI5y0Ieioj1he514P/482yBwEjKdoa/kBBy7CJjcjapcZLm\nNsOVOUaL9FIrlI7HE7k3q0G5eMvWqOK/HE63TQvcDUEvZ7e/IO7zWwtzaQBd\nMftr6f5bADg7RcJGDuSijqReLyicN0KRDdOMutRDS4pedgVBMGGHgjAmckv3\nZ7Rfi/mZpm4gKJeVX51MI5DiOvUyTLRWYQRFIFCE25HMID/4Aw5GKqsQSJQK\nHFW4FtXjK6cxULE8tnSCKpawlxpVOXD6yNMG+2Y4AVe/qkcaoybExlfRAKDd\n4TXwCOiLjJinq+dBq4riMJDHEWT83PrSxIxZyqMpHTQQODukQdfPqVLMGPkt\nN0FB\r\n=v1kp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"71d88d74a1387633fc4997151853e404c04e0e57","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.1_1611943544206_0.716882413638702","host":"s3://npm-registry-packages"}},"2.1.6-unstable.4":{"name":"aws-amplify-vue","version":"2.1.6-unstable.4","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.4","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"edca6b9efecc424b1b948d95a1e222708c1ccc27","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.4.tgz","fileCount":47,"integrity":"sha512-6pVpQ6SSE6uwWpI2mCSktMyOMGINFhqNABMvBrfzNBmNQ5lxhanUJ5UrXgLAZTQKhQnNcCfx1r59PEjrdoN4uw==","signatures":[{"sig":"MEYCIQCS6hyTErWsUyFFGAfzRLcw9SPnHXo4Pizst4D+DMSyogIhAPGk0iZtBl1Rxk3og3hTCO6kjD5yn2tpet7ti3lhmj6S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFGfyCRA9TVsSAnZWagAAL8wP/1ZViwxfyqj9008HcPgK\nEag36lRfm1HYJ6QY9xHTh/yNb+WGpew51xFSglXCU/tgf7Ui2B2vl3EGIFNa\nzfYkgEcxiUIbFL1WxNOpwcmTpGZEHEa6HoctFB59HzOPWVO6fN69d5xWd81X\nY+p+gnN5adScQ0kRqhfXd7TwR5v9dLXcsoypXH3+xfKMsmncuP5ordlyHGm2\nZmiCQgne7ljvX+mQcYXdsz/Zpae5wwY8DcLE/JoABIG1MFc9D5dmObffV52P\nll0X54SYMrj+s9NE/kyoXJ3gF4cTuEfntZjAj8X3huqHeQlP+reyaj68tHqy\nv78pRmcs5mf8+T1I7hYnZx58nJABrfiKjrzQwDyyMhwuQ7MP2v+dNSsR2CRA\nws/E8b8f6wsKYs4PrzvhlM+mCfCCAgVQ24VisbVGpMYeuPNNsAQyOqgP4yHP\nvM8y6AG7litpllzVdNAxPS9T2zsN0kxCdDRMl6VBk+kBzubPudcd9nsxtbWA\nPdu8wmaPUPGPl+HiX2Hbau4QsydrlE+4P1WlirLcoB2Ocs1geE84APBdNnS/\nyuCvAgZ+L+RYedyhKJi4tbPM31AVqaPil/pgVpbxI/bUccSYkQoA8lBHlLUm\neaT7yiDHnILzUflyZi5buv/o2oPbf56WGd0nSZ+qbmwdlnKpV4n2QlIk8MA5\nOZmF\r\n=fx67\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0a3cf4b5fcb25bee97a8fc744c87e61171b8fadb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.4_1611950066014_0.5998750912829747","host":"s3://npm-registry-packages"}},"2.1.6-unstable.5":{"name":"aws-amplify-vue","version":"2.1.6-unstable.5","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.5","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"a708cc6887cb6bc6fb797f3f5d56958304f7563d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.5.tgz","fileCount":47,"integrity":"sha512-kFvLfughFTj7zw4hho6gwgbJIG7mlpiZhtMI7zFsI/hLqQjKfQJa40KJ0jW+vJgojNM1luQjh/c48ub2Xi7tcw==","signatures":[{"sig":"MEYCIQD02f3gGaKSvf+hUxtvg61T1TypGyRhvJ4AEsyM+TXXXAIhAII2y5dhYdEO3Sm/Q7DHkjIdUTvGGhr6JmbKLC26VWZM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFKxmCRA9TVsSAnZWagAAnX4P/1jalTrUj++UtvTKszKw\ngDCCMD4l/t+yGS11gtCEDomxh0JDWHl1uS0RFEVsJDxdJWZg4RiN517wgQJA\nP53Vg8vRvtGjZbajHhUJ/6jYvctqtO72vPCHHAK09rIE8RkHhbIe1g0RYw/s\n2vLm/thiGiNnVQLkE3CCijqSPImgeLwqdnoL3fufGB6k91AHaQZWjaMGPxoe\nNcm/fzIJMn3Wy94/6PwySekG6TYrNhaTTUeNmcLZzuLBrEXyugECUJigIJRT\n5yIx/4CIH0YQOpJWUxyKs4Lj2cGssRo7v09DATfFNkDmPwdks3c0nlpz4cM8\nYw9SyVHBZnzkYGnWDK5Re7EtGAyS5HBjwZthQ7vBcOGiINx5NwdvDRYGUHoY\n+5o43XRYUPDeiexn9ZMpiTzOx9hyN5/TcThwFuBLhxkfnBp16YuNzUh1jdxs\nQ5CTOKATD7c3LropNLjqG4Nye0DKQGklQdhiWzfVRFyAykhEhvxyBvWow49T\nZuNwdYpmhBegejx5r0Vahs8JL7ujcgF4imuSYQQYqU3ebQ05nU9DG2N6eANq\ni61Kh7zONINMpLqqqkKoDzrZlQdKJbtA6YSLtjupRT4mF4huM2VyFNJECtRz\njQ/PbZf4OkxwoN3uqiS8ab7TV7tojZS2sEsOtiVFPg4mz5qhUkWEQ0qVSHZE\nFNh2\r\n=1EtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"08277aff76688c091e05c593cb802f90a9c771a6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.5_1611967590248_0.6018803297239137","host":"s3://npm-registry-packages"}},"2.1.6-unstable.6":{"name":"aws-amplify-vue","version":"2.1.6-unstable.6","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.6","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"ee8560a5ce39c8845a6f7010f2b8858c1829debe","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.6.tgz","fileCount":47,"integrity":"sha512-J0n+E/9mNIQdR4SQHoQZDEOsprubdyrP6s+oHI5x8k8Mr2Vnld51dfbXMuOou3/lyI6SItDupiE2wMOMtOC+1w==","signatures":[{"sig":"MEQCICeuogipAlbuhMKvITiFD64zwlPwnCJK/Iujm7KKKhanAiASX+HjKhA9mWGRfwc/BUu/cDS+54szFFJ9EOm9tZRc4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGEu5CRA9TVsSAnZWagAANU0QAIN0sLtKZt2iRVRe6/q7\nukVYE8bW9gotE86pKkfwd4gMhluMKY8bZDRTHS54kFKwRl9qP2M2lt/rfUKG\nrGL1BUfoqPRQECupGS31pobFxNXMjgPPVUy9Bm7+W5P8FGQHOQp8l6q/6d+h\nUMBD4FSyzuDqqnRYMnTNMuwwM7R/wfaNMeALKxruiT+j2w6reJuXrjFiDFoz\n/UX2hXizggNwLpZS1hUK2zY5wVpdiuItRJOCm9NPjIfk+j1wKiyxLaHksXqr\nmQwxttk5dYiY2ydqYnKct47e4uUV2yCVWrsoOzTT4tFlcIwKcWA3IAr+FLG/\n6xLZFRN/T/p8br/yHPomWzr+9/+gUXgybx6zU2e8W2ZrlzFXMdTFAjVo3C8E\nqRVZojNwtDctfiqx/4w4gDasYZRnwjdu1FjJ58bYWMnn/OdLWw0qiaZl2Jy3\nQxJB4UMJrueEyKpn1eK5gshiXgjNNT5dYEZLmLLx1x7XbVRjbx00DK7F+zeu\nDFksAaSMGn8Ii7QMAosNP5bAjcafS8knWRpS+mc2FkHNS55SN7zzak3W0FAE\ndAHz3Dh9d28gF1/riP6ZyaUoEKIq1sMhtcs5X7cgZMyiPwCPzGnKLs8XiRtR\nXDPKzCBbKPOrkVSNdWdfGbvbXyKSeWtPPl7sApTQw2rXlCKvpK7AbeBQVlfG\nNoOI\r\n=5Kod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5574d956d635c45a9c6e1f48fd03c96b0a8c336c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.6_1612204984831_0.12516440479700064","host":"s3://npm-registry-packages"}},"2.1.6-unstable.10":{"name":"aws-amplify-vue","version":"2.1.6-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.10","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"26f5addc4b9c3c5d0d7b0654d0c0ed1ac078795a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.10.tgz","fileCount":47,"integrity":"sha512-WdNPn5aLwMxogJ+m8YyQ5vqCzq0eyWFvbX+HPTymmQ/eiZN6DfNxQlP5kDCoOdWxIUcMlEF0rPfCzuPX1BqOqA==","signatures":[{"sig":"MEUCIQCxzUx6OhT81WZYEJOX8lVYtxEGX+MyMnCSafTg3fzVpQIgQAYWRTivTeAXeZzlODfgopHIAU/8KMVwqKUwB7RKQ0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGJfpCRA9TVsSAnZWagAAE0EP/019HP4Rt/b5t06LO4q7\nyMHLREV8pZr1iulNR9+s1QQXdhLGLjIHVbVQdG6xi2OCx4/MGn/LZsJbAPWm\njJh/Zn0/lWFnIzkKxcMFjwtoe+NZN7bxnA12PzcH7ZR8px7t7r+JgV1pJ5mG\nvvg1yvmvZGs6STyAHX0Aa+Ts1FNyLrHiXk7tExTs0Ia5fpa5lqJUPn/twDZe\n6OAL5iavRxOkggz8rXCLlP6u0AFlriBYi+pf+IHR8XvxJYrXf2R4qdQ2bllv\nWJpASNgnGbT3MGsIvAvPSaVx6ryUNAjNQBHt6QgONoZzWFU2Y8xciPeZ/gsC\nPS46PPNGGAGBBiRdlBB3DLOnwZ0Gr01c5cPr+rYkZLQc92xmxKrAEsydRkUm\nsjA+H2ey014O6m6DSb7kyhchesMCLJY4rK8twSmFPqdVCjERZhSnCPbb0u7K\nr/a8jdBjI2WYF1GF8QA/dFU7RtDq/1rBmGjsAPy0tAfv8FRbSZUia2dAjdJr\njVVXLGsVJE7jJLyfXIY8CO1ODGbZAjXX/7axEsS89exxxWbz95x2eW+HDSj6\nF0/zbBKGBhFnyJMD1HxJgHJ0ueKEbZsPe65mUmYT+1ofTkURVZiLtCr4FbZV\nFiHGLX1+j2NnFKcZJ521mJnGZmWmVy2zXjlNc/1RWUCxShBXDA+iOyGX3Ij7\nuXgt\r\n=6+H3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"651c3b29f39dd5beb563b5084ff74f7cbcc94368","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.10_1612224488821_0.1673552857054108","host":"s3://npm-registry-packages"}},"2.1.6-unstable.11":{"name":"aws-amplify-vue","version":"2.1.6-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.11","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"b2ce932bb705f70a849717387e29c1cde2fb928c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.11.tgz","fileCount":47,"integrity":"sha512-97Z0MHNG9qH1/PDW2X3O2mGh9d/pVKCMoiBa51b3u+B+qJHPoYw7CShS7iIu8+Kh3vgEE6LoVs/a6FELcTWg8Q==","signatures":[{"sig":"MEYCIQD4i9Yfg+dR62dkfFZemDs1dFfycyntv/IW2v2Nz1aKugIhAO2NNtkdsg78K6GIs8Dxwt/sZomstVXpHGEBKebvUAty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGchSCRA9TVsSAnZWagAAj1UP/06ibM6gKJ8SpdPBTZgN\nueDSyPA23Y+TgCKk3JHd22krM8yC983oQ/LEIRAVFt180cJNQhCaXnL0FOTW\n3haL2GA25icIq65WllqlZgrse+g+FY72ASTjWpGTzhGVuasVjbIk19Op8z7p\n+AQl2l1lLYb/Bl+qY064ZLiZcs9+V5Sr3c/YsvCw+eDpLodxlaiAZZDsxgs8\n2XpZj0v3/7cYR+eAGnGVz+ixDeY8wmcjlBtIMyzKmsOwcOsRDnStDFliRZT8\nHS6qsBY21Z0Vv8VvV3ugxKgpdQq+cndYgvvMROmjuayOlGmEJtXCgS50++zq\n2/piV/K3mFzr81JWp8MKaNlXy6yjtz5D2JqTzqf9QQqjIPNU1LzoPtuDuwpx\ng5CnP7BbnEgtO3TKnm38YxH5sbkuG3o04FVshcfOptS809LJfTlVMNgQsllE\nwSCZORbt+Hd8imSAOQ/dycbJEo7+23g+TuJmPG8w+Qcsjfr6CDQb6qBMhRY8\nuvkwX0dO8wolGs+wseuCZuYHBzZyhnuJPd6SdgQzs0UD2JH1WiLJwhtcjeRw\ncfVuCBcmBUB/ZnkMFbpJRFYGdp0BBEMyzntBEXQ0E7mMVGfxqWpQ+wZPIIxc\nSZHbnJ2/xU54oNOBHs0/VxbWFxj08OvP/sujKxc6RDh5T3oO5ZZ8vNA/7/5u\nD1tn\r\n=bZAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4ecf4256e54db42e49c55db8ca14f7dd2b206af1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.11_1612302418343_0.12202148843333593","host":"s3://npm-registry-packages"}},"2.1.6-unstable.12":{"name":"aws-amplify-vue","version":"2.1.6-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.12","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"e17549170281c20688a78c6695b203969ba49ed8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.12.tgz","fileCount":47,"integrity":"sha512-2O7VAuwIprydtP8Z8A2ExX7I1cX58qg0owXyCbc7+2gtJxO/JwpyQ8fLKRV8gGPham7QWxPkT/Gh18ExndiKRw==","signatures":[{"sig":"MEQCIA8j/Cody4UCt21xBM94HDsISOxg27ybMVwgdmUZXJgWAiBz29aiw+7W5qdY2DF2s4yTP26wHQz26mUXnfctGCeEtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGdSaCRA9TVsSAnZWagAANSAQAIr/Y8SHd1ogSGvWntYP\npfMXhrAKzRyJyUJa6AVZuzyqsLX4hloe1rtkJEzoMD87TiWJxcURu2RNgKLp\ndFlS7l//uEtT+jGZF8/p8nOF4zWRTt00HdwnYnhosF6hqAgw/QcSNB21dDhI\nbd2DpCTEUE7gSO1GHhoMsXC063ra1ZpZIrP7v4gQPGO8Iz2hEy400/fSVRV9\neiou0BY6LfFPijC2v3z1vlmVKSdTE/lad0PbsPjtNWzZYr8iY1WgJYj9Qtqy\nNOIKRkPpZSIB0zZPZBIHv8LTy+ttTuV0m335AMky+C9C6YLAClfLReOHHLph\nchjazgC+Ppx49/NUIZxL9rL7uFt6mD3hNeC2oUnlfOQ9XtPNakMCLZr0ww6p\nqFHmWX6pQSfyz0FcVOZX26u4ur4z8bK2CTBUB4HqYl99MYbLiEv6W0ExhGwd\nSWmPhxBTvgVYPYPeFyDMr6PF2rRtCrEuBrudp+FQAMIHEm/w7i/WWtFsz1l2\nt8s8/IbQ10xSiPGhy5okV3KlYCuqh1UBhmOG7kt86pL/mjEbEkFG+KCANJ0x\nSAG0YvbMBlv9T0GhLTzM6zX6zX+930V2WzhNVnhenH29ND6AEmalRr9cBsJ/\ngIfUcGYz/3WNWCKIMHho/VKl4o98ofVga3x5jqI5AVqQm2rqTIdbzwqOk+2f\neYMw\r\n=YFVQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dff79947ec2944e127637993ed5c86ad52ec4c35","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.12_1612305562252_0.8396704229216903","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.57":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.57","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.57","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"0f744b78a65b1d9a4337be2ccf9a00ddcdb4ebf3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.57.tgz","fileCount":47,"integrity":"sha512-0AcVosyxzSpw0mOlytpVvdACZqX+FugSejYW7snkqd1pCPgoFhHx8cTdm6IyoqBYOE5f/JTjHEu3J7+Gy2CzuQ==","signatures":[{"sig":"MEUCIAfUx3K2/oAOJppErLEBvlcx/4s22bDp2Gd6FWQTIo14AiEAtjdrdaUjJunhzeaEX7FdgIbDaxQZ9fYC3llLHp9Aho4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGyq6CRA9TVsSAnZWagAAnjAP/3K2h2L1eEnh+Np3YK86\nWZ2QexTJyuqEUZ3Pj9FlNHvJvtkW7HMghUVrtxpOKa60Z0TO0ThzDS0M9TKU\niyURiPQGvEEKQWmgeEuqbLJvrEqGzNIdw0CzOEL2PmdnY413jHXgbT/YIRP1\nMPLCKYbARJ0lZ9S/JxI0bgt/SIp4YuQMHLv4VIQ8GxpBmsDZjBx0ksRBdTOx\nL5sWljGuxbvnY2xqwZSoDJZ7CdoKqcBy0tpuvhDTdZZehFEtOKVN7kAWXV+g\nnkIJbOyMr/93byqJcD1sjWGhIWxBmWS0+fX6PqOqeMyznmgSgUpSLz+SnTpp\nKplFZbuPaKCzCe0BxKV/kUASR6J4sG+n7TpxRC725peefJ3oTg3Xxcyb9LhC\nHOllxYDBWwecNDQ4QC3WBlg/ggA8Gp1fwL3J/06j4nivtWyS4YudCt0EvKk7\n95YyKykR2SAnNJCBz8tK30+T+Xa9NWroY53To3hy4qEl4Kt0vrZfSnER7kkS\niRfqz/pOoaoEXFlTur6GcXWyr9a8utwuivzi15HZzbwth6aqss2iRoocXU7S\nq5WRWPQgWmijev1kho+ZjoFltKbE7QgD4+Fplnq8bZJcEvGlexeUpcIImKN1\nfmGf/N8G76vkZm2SftJqr+hsYW8VP8jt6qyCKCm7G/aq3lKH1OumuCckNwkl\naiSn\r\n=bD6i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9d0f5f4b8fab3e81d1922c6f0830e7c82116a281","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.57_1612393145611_0.3890401876823648","host":"s3://npm-registry-packages"}},"2.1.6-unstable.16":{"name":"aws-amplify-vue","version":"2.1.6-unstable.16","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.16","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"70918bdb7199894255946fc89ae34c3d0db6595f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.16.tgz","fileCount":47,"integrity":"sha512-j3KHuS5ZV3546Cllme9F895XYzK+BBdcYmw2qK1JIrKRMg96IhXqGyCcj6dXAE85uMShH2/dsn34q67TIsLM/Q==","signatures":[{"sig":"MEQCIBzzRtEc5UQ3pa57sFTUJzuUtKnoUx7gqUpyUlZN0v7gAiB6K/r8NupYWXPRBoy1FswwWTerrkUcGHhdQgkryJyWsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEi1CRA9TVsSAnZWagAAOAAP/RwKETRea1FgW3qALOxl\nz7B1T1/IX0f+1OM/iS9e3mzqW+OxfRofTfir6pxL0Fq5KOmDXUMbSzQVahBQ\nvAApxiiM+8kVMm3WsmEX4fEUOZ5HJ7KSUP5EjkDLL5e3LjeDTxneLhJw74rO\nWH35rxK4OEa4Oxy4ge0CR+maWhkwAuFuCuU3k9kgMoIvYx4WfZb0mspruQKn\nNYZ3mmKAq8O/bcZlBmYnUmmo+9NpSkIOtKn387VsY+NwviLLWv2xCH2UKB33\ntap5f+5vSzmpzoq7eXJAysP0l3tXbogbmv29gfP/9P2fVMpOEcEqXJwOq2cq\nSKYaWdRX9zA9EgJdOZErE7oDWROlo9NJaVg0NQJ9FUyCax75IGfnQMP+qTFK\nIJhNHyG5qn3WVrRseEvsJSNErYOxHWq8kYMZi7Adw9WYrmg4C3oJ8Ol48doU\nVZ94xkFse2QZTrO80uK96P4CxShJlXn/7H6u3vpGdZ6Vt0Xr2o8Z/mVYP9mI\nZ/x/lk6IXyTv6u0bV2E/MvT+48Wwkllz4Y2Y5sp+mu6n/2Ai9U9vpTbVCdku\n6vd8HBzWqQ4sLLwiyGxe5PIup7bjZL8hS+eW5orEf9Pz5m/nmdDfVRVSFc+w\n4XuCnL4Tbigen4rWwlPUpCV8+5bM9Lu2E8OcTXi61ffZE9aQwyA0HBS1voNJ\nSDgK\r\n=bKmz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"566b569b4256e82aa9ac3f682f33cfe08c8597e2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.16_1612466357187_0.6383379516879994","host":"s3://npm-registry-packages"}},"2.1.6-unstable.17":{"name":"aws-amplify-vue","version":"2.1.6-unstable.17","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.17","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"8386d4c9aa1337d5feb51c5b77e6754538e46047","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.17.tgz","fileCount":47,"integrity":"sha512-mtU1RL7omu84YpwnQ6APUg/OcH0Ud+Az0g82sMoqmoF26UEvjIqxBlSflybtahLpkjumR28j1AOm/f8e1R9r8Q==","signatures":[{"sig":"MEQCID3XsxaDDr5mpsE5GRjLrJv6SM+DQOVjNkxH4AnHw8u4AiAHWieBvE1HiL4WeNV6acB5pzz4JvTlCWfdvVrEWZQN5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgItdWCRA9TVsSAnZWagAASS0P/3fb10dlZZuKifVrMyUT\nquse/FK1NWEjYpF5opB8cIyZLMwCKSZ2j2YkzRwfAIqc1BkvU+PDV3MxZPJ+\nv78JzqKpKZKMxnjDczedwa8YB6hzQOOFnm92KI0kNkATjkYs8ZWgkVy02dda\nYDdjOwtELnsuGKe1spIJX6zZdFvG1sY2a5BHOUrkhxmN4n4gdCThiFX5ka5y\n9XK3Zca7rGGN5h+puna6eqi7hWPTRVgikJV8H2flWWzMDAdfNkgYJAYXzCl4\nRCRyGCXC1FkpV976tgSonkp3T53LByGRWlfxY3HaZ1lQyEPyseeATAPgtSQb\n8527nnohwmZfV/noHwpHdvISlcqza4jvyWuy1q1ePed6FXT8Tk6ktGrgL5mF\nm5saBfsyQh8OvP6uKaYkkFqd4UVdoGxqMj0xhi3MTqhtCv6YTERxIqxpxT+F\nSUAiDkOvJcMgmHWx5q2NhM6qQDKqX6qtEnEsjWaEY/WBWNt4kP17ciGU1xqV\n735RKjQVWB6rjCiAMQjdaYgOxWJbTAARH7Hf2W9T1SKvAD000PPUcyqv1grG\nTCIuzUdGDRkkFfoS2dP5W17JelAxHfcCQBBpJRrVEYhTaFY9TrnGCfTfZevd\npNBftkuXInxraR6foAMQnJILGekZivpgG6Q8wYgaGZ4s509fgYrknbZBgzLX\n96bP\r\n=CqYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f1423144cf73304f3dc048233b35c831c9a1742d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.17_1612896085545_0.21425586357797455","host":"s3://npm-registry-packages"}},"2.1.6-unstable.18":{"name":"aws-amplify-vue","version":"2.1.6-unstable.18","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.18","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"a9529a774fa5858e150f8fd5c4dde75befa36ce9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.18.tgz","fileCount":47,"integrity":"sha512-DDRkTQOOSfrt0Gvc5zWUqglud7PniCpb7HVanW28NKssbCo1KgEmLPmjCjU/Eh4CEu6+uLEr9F+Uwh/pUvte5w==","signatures":[{"sig":"MEYCIQDvbgFlMbyBeLpM5KY/bm9DADeUnYDrEMEXjDRxsbwMGAIhAOa+so09phEhUN0TkiA6aDiitVuLH4wf6EW9FegBRqhA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgItkpCRA9TVsSAnZWagAAxkAQAJT2Ua9IVBD7ZXysMJNL\n+M/V8uLLYMFv4YDG13UfCM+uWd++ozAZjAshm2EPI3eJTg1HClGxHGEDw9Ei\n283fvCxRktQL0pPNTwZBn07sphiXYQB48F8DuKBj1odX+C9fnaXrhxqbWlt9\nGvZ+XY53A1t3tlYMnH4B6biBfZ9CNyE+eKo65sonXCs/pYB+5UjsNbZsFhgT\nzw8ph+gSb0Ong8nfnqoNmVmVAjxSIRPjDUO5zKHBC4hkRm/OGynA6kanGgRb\nAB+vzNCPb74fRb7c+/u0vRu4Y/3PCwOELLfGig6snmUXOmWzhv0t2+nowSSD\nzG6ZCDbnMCQy1fcbRwtGdScSpc3NQ71YELNWF1VOZJ4aL2EHRX/qcjnpnUh9\nhYjh3XsA3ctm3uFIgWrIEV5GAG9wJfOCHR2m4g7QNaNVZFVzcH3DOEGe4CDE\nBE1txo+2AFJRifBPvBnIpd4o55iptxPv1D1Y9kzgSpofae7edbmIOdGsE5WO\nX+RuWJ+lj1VV7XNrniuk2y5gZn7ayvd/JhddCw5Wf6CRUo95LF2OcIpNxJlf\nCyswREipMSaXyUReU4qghMcOVB5vAFHq0sutyR9/InVuBN2v5AW8k+pZoCBx\ntghUA6dFImo4u8GX8SGz6yCXNigumjW1F4ps9Rv0kvKqONtysZuf9kxQiomY\nsGZ3\r\n=+26K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3f4e06e495fd202bb643ce77bf6e6b61b9ed9cb1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.18_1612896553091_0.19126680059400858","host":"s3://npm-registry-packages"}},"2.1.6-unstable.19":{"name":"aws-amplify-vue","version":"2.1.6-unstable.19","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.19","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"1722e4dd20549f3ce1bee8e1003bf018136937e3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.19.tgz","fileCount":47,"integrity":"sha512-OfWwXP06n67mHvPoGTJan2/uxPWCZUclsfd2bickU+jTfVSNfxE2h+50Zo/6AAeKlNiGjwGjJCv19t83ZmV+CQ==","signatures":[{"sig":"MEQCIAsF9/P/ox5dd0DfiB94FpKPSIBXeAzrIa+CkHI7yH7HAiAieRcxAXcyawESdDi9Uy6H9kI4qhXWfI3kG+KEp9PQig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgItw1CRA9TVsSAnZWagAAg20QAJMxAkKWK/6ZqxGLlSSC\ne+pUkYyu6khM9A9ms8MM/dOHeaGDRqW3cRTji8GqpgKfb0A1f5t2c8bhE8Xb\ndtoZD74X/RdQPyk/JXJoeBt/6qEKTDjSBshAsAj2sg8+6F4vX4z7Tys43qe9\nIuJ3Uxe1eU/pbQnzC/6xDxDj7I7LvvciuBP1Vi5vMdSMGAM1oCgL9K3odCHJ\nfjLpfJpVctQsdz1+DuYa37YbVpBpsOw5qcyMnXDw8NxWyebPI3wRPc3CtjhS\nWWJUqOY2ERMYnxoUupzTIhvsdTj0XjzEcnKumktQ7N87GAeqhdcxFwbvNHA7\nUlBL27IooTlgUl7UVGFFxs/tiS0bJ1S46abXCAFyzKDCQNtteGm0Rp8n/EfZ\nzaa5wm3csaC37ZCS/97MyM4el5Ra0UezrO/ra4HOmhGcHhSU2NEf3r8OENb0\n3gzoRlFv8Id0iTI3MOdQkg57ye7CfKZ9bujdKvQTDtbnPKYOVtoSvgtr6mkN\nEu9bkNLGmaXQhRSktT6oRL4lJrTNTQJIN823Mct8snHYkpwIZZ27sE1+jEzK\nGEHMtbJqJnsIeOPyVjUxigpL6CpPRC5Nw1sbo4XPI8qjK5pPTLqO/no3/QeU\nQ6g++N6EIvRZigAWgjAe2ZVMiHVKkxD2NfYj/MVyoK8d10EYj75v0i+xzPXk\nG6ln\r\n=pA6l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0fc0fc29feaee5b9b86709571e71f14335c6095b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.19_1612897332905_0.8181689799518292","host":"s3://npm-registry-packages"}},"2.1.6-unstable.20":{"name":"aws-amplify-vue","version":"2.1.6-unstable.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.20","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"b73309db5e83057e4aeb37f4717b176714ed1428","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.20.tgz","fileCount":47,"integrity":"sha512-LNZnQS3EWUhixKfABHZC4gcug8oe+14ruZ4PLgUcr2cXVj2V7kO2vd1R16bSTbVDh44trhlsbUi0glmNP2YT6g==","signatures":[{"sig":"MEUCIQDoZeGMRLzgTIZ9wbqo89ZmLKZdo7cG3418wDpDNR/f8wIgFiRNKO8IJOWGlb8RGp3T9O2CWXCI8jj039TCeJukDLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuODCRA9TVsSAnZWagAAkQkQAKHEbmH+A4JxW1ieT3RY\ns3kapI4lmxLrqywW6Jnf5OoCEOGQH1Ut3N3GUh1bX8OqeOF7s2rOolDLhyZM\nkHl4WdoJp8UgxdGvDUmLV+ha5Kk8uZ8ML9hHoz7w34mARUfR+qAdXjeECmya\nzDuIAGU5WrUnPuxkHGSxy/CJiZquGMl1itCFUvnxCFLJ41TsPvTI+W1YsZcp\noxnL90Ec8TvPDgY8z4JKiUbVkBjYdTuPUyilyzoizzA83GEMFUkyVczTkGeU\np96x9wQC3yiSVaMvcCIyzOFVghHa56l4+ba7qLfPFD1L/JKNNMrZGrkmPRvB\nFB80izgc3IKNboeEuyTvXPA/QYIveCzc07gups5niWMOGrZ5CuIbmbwPhRub\nr5r3TOFR6BAoLxb2SQpsk+aKZf6A3bFm57rDmzhbLc7tjm1IEemRDvrcUlSR\nVMTeG7tLiCYI/Y3TqQvJsXEOJmBeCMZC2479v9ct39oP0j8TgT2apTBCg9AA\nfaf0qVo1j+Vg7UzoGDmfjYzbSTO6/HIuXmH6H/DY9fqUkfzw+fW4TdK4bT4q\nRVS311joBj9ulOSCHNCqLPXpZ5mVY6uXhHZ/499Lm5N73cwClbadUpJjedm3\ntIIekTkUwWPv0s5iNnI6d/jWwFusVFkt+LhjwkeppOQQUEO8hS0RcPXFaygj\nH3iP\r\n=awoQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"feae503ba2ad22738e4a16639441f4dec6077f7a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.20_1612899203353_0.02601909455384077","host":"s3://npm-registry-packages"}},"2.1.6-unstable.24":{"name":"aws-amplify-vue","version":"2.1.6-unstable.24","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.24","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"930e7078db7570f4d2ecad7e027c571db86d3921","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.24.tgz","fileCount":47,"integrity":"sha512-AVD8TrmxUqvygAhqLvLHs88rFSzcjKA7LZ5TwPA7jN2etKHDc85V2gq5oXUUfleWKx7yVxJ2SgyjhV3ry3blqw==","signatures":[{"sig":"MEQCIBt61x+E+jYUBduJIUcUxKA8h6ycgWhamVCfmYJNO3pdAiBe7GLz2feaV7nei39C1u5akRvAM33IJg8NoJAOUGm05g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJGgsCRA9TVsSAnZWagAAbaAP/R/OJ8o74dWmer47cgoV\nv8bS5ah5XaUcLQQ0eXJkUT2cii8GciYRnieiFfIi/WEMD2lHxjl/ypyZFSly\n18asn+cxptVtBus1X61n+A/GmbL0FQIYbKrdRYJnGGw+mOxUlnWRwFRVPmty\nQTwe+Pu4woDVFtM4Z49G9COmHoEqUkoUf3TarXSm4IBFUeNrGJesNydASApu\nepKrWclvCsE1qO4yv0bEhD8ggpG4hqg+K6eFhfkq2hrfhDopja4sSor2P4wl\nUSYT6H7StttkfkRhsotqh9I5oOwrd6+CClDMHO/x7f1WlAH6AVoSCEmfijLW\nFGJ3aRPaumKVCjlm1yNyGrhOn4wa0e4POAweZD9JIrbS0ni2sfj8pCx5C1Px\nkPsxsij0qMYS1rO/1W9nckfCI4Glza0z5xWhWgl28SHTMaZYNO8Lo8Fdj/Ti\nwVRsDodF5enAsXrqpEs2HFbhUfATnWg/ooLqppiaVQCdpvaV5Tn1PL2HSjU8\n898jCJv0jh21jCljy9A5w2+LjRKjvwct+M1lX2CAFMazT/+6IdsB+0hFDHiX\nlB6UdTvzYf3SkKoRLJKzneCLJ5/UCeSM9UnbqFsQKcst0VQ/+W8GJCxdHrRg\nLTU6oZz/EWfPlGTNpkghYyiXGAul8p5IqaCjRIr3rM3/djdind6eRBMNxjHi\nNSo5\r\n=1ztC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e39a71d8631c9e203e1bcbcb1abdf6f0379fae14","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.24_1612998700389_0.2985032564338115","host":"s3://npm-registry-packages"}},"2.1.6-unstable.25":{"name":"aws-amplify-vue","version":"2.1.6-unstable.25","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.25","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"dc8030f501f7deeb7efb04a823dfdd16e69fbd8c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.25.tgz","fileCount":47,"integrity":"sha512-H0AKbPQyaQi623wyXitpvSVJYChOCqCViPQiQ07Izm1a0m8nwoGCazn9LVdf9zU7uxWNsK8skZCQ41i+Kck27g==","signatures":[{"sig":"MEUCIQD2GcCAUEral0oqDVqUmAdLgiK1RhYRIsovjEREM49tfwIgXq3D/jQ+l1D7QwB+TByTjQ1OV/KqtZzyRlfT/7zEoR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKttjCRA9TVsSAnZWagAAbzYP/1ocqBfUiMyIUVMqGdMK\n/u87NHqJc93SLeOwBzo3qW26cmgSsEToerNb7xBhq6xb8lewvm9zXMN9j34P\npVO43p6808tV5KCpaTy4TXKLpUv9BFOFdvrByOperHvWanWQYqsb4O7w0IQk\nO+vK9jmjLJEhF7SsXiYuL1ANr0TzzLf8DXzz9qHQVKlFXPQT8N8P0Mm39MAA\nFBSPEGQ6cQpPFitZhaASxiMHBa/RZ4e4LBcPvgaCICIot3FhJ1vKlDxPuSBN\n3hwVTzgfh6vFALct3rCXK63xzJQOTXnvC1JwxZndoViVlCaIhDdFovKKFqM+\nseTADcMM4DnOIUI+d8hgy5PK7i/5ZmfNCAHcW9xdBDAtx6nAOgPZav1Wbf83\nS6iHnV9ii2I1JHVb22XIF93CKncizZEvbYc0p8y2N/uiHw3zhJMV9sewmxmR\nvTXjY3JZtQq31cPMIHJ+DA3PxazokbqeOuBGuEAlSVnswKwukiTwooFLtFkH\ncDz8g+43KgD2lNvqc4LqazP6Goe8Ju+jGxoVvEaUwRplMSI90RJwpyD74JsZ\n5Bi1r/pstKH1p3sz5k93zaAY7uczWVcdmiucWC3897f3BGJNP5+HZsHabaqf\n4OS+Rf4t9nDot0ru5JtJWhlwWs9Nn3d5LPLzzM+VKNEO1Wv+p2484UliGV8G\n/4AH\r\n=ajC5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"990afb2133ac6a2f67964786afd54d716976e728","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.25_1613421410798_0.46316279799026616","host":"s3://npm-registry-packages"}},"2.1.6-unstable.29":{"name":"aws-amplify-vue","version":"2.1.6-unstable.29","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.29","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"5245f177012ce8faae79a60d20ee60a2249ca292","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.29.tgz","fileCount":47,"integrity":"sha512-cGsDUqkbDzN33FR6lbcQUkjTFUEfVlokDwzgPapTYc/JnEGleunk2HZU+Nfn/w7leb8m5Qrle8P/1DWtO1eTuA==","signatures":[{"sig":"MEYCIQCXxkv7CJNi4Z7+uXKVYX4pVPVGnT3j363gfweDoSTXCgIhAL77vnboCoeJakn/+UbH0PaChg+51pcUd0mK5hakzpMQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKyCdCRA9TVsSAnZWagAA2jEP/3iYTKqKsyeSsjhzok7B\neVdUvKGnx+VWk+QUGi5lfVqxDcsdQq+85VTYTwpwmuYNXpkE7dr2VIaJdQ2V\nNfJgTMbG6xRljctFIsXZglFVt33YanUz4+s65/GmQo8byDCUouFq/kVFFTAw\nKkC0rKI1FHUaW5VhUpy5n+cjqPYwssGYzCZBjIMZg0DgKA89TZMYRLBzqDRG\ndSnWaR8xHZaHBMfhyXBFfPV2WHFuBMl6cpKkW4RPeJdeFLaQFyI9M4ZaHy72\nu0BPPvkGB56SoV0asEDN/WvwMOnVxMD4YP9tntbbi1v138A7nyrcpvYoonKs\n1JnNRC5f+wOnXd8iR757yZfs6duWID+Se+NCEoaBMKB8EuRHXV2ogSBjSHXr\nuMjeI1+Rc4kF7h9irx5shDQYKGYOXSJQFsJdcpbhDWr7kWw/vtSKy3JFKBSK\nWMMcSyzXH+8v4n5Hq7wsAapPuh3fptnfiqqBYGugU9ceIdYyv2urU7Xuz67Y\nhMrL/hSPcQFrVYs+EQ6BHv1Ysz57RU6xOMG4dfqkbhb3t9KtT3jAaKcXR7mB\nh+UAYcZ8/TMzdxoINTeqPmUnDc+Ng6n2vwkvkhSimrlxm2n7i/90z02uc2rG\nQLDKHUTez9RYzwa8B7o1CgDOfxa69KTOiM+u+XTGjY6lwK5kCHHSugAFK15O\nMSCi\r\n=o+a8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3e423d017a98362a0117e1218dc3fa55abbff609","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.29_1613439133078_0.43039338554020845","host":"s3://npm-registry-packages"}},"2.1.6-unstable.30":{"name":"aws-amplify-vue","version":"2.1.6-unstable.30","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.30","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"f1b2086df9a631d0bdc3a75ed8e227124f7eee9a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.30.tgz","fileCount":47,"integrity":"sha512-rokTyR70ZbRv6gMIFV7oFTYXttcjJkXrZmDi30C2y7E99Btt2fwfBU8uq4rRDBnAcJ+wLPq5Zf0GewWgH8q7/Q==","signatures":[{"sig":"MEQCIFH3wmFPLYs0JSn8w29KERYraoE77iUqSOs5G5Ig7RLjAiAJwC8rUgPrHT4vJ2l9HAUWmK7/RbnS5zafTD2+MkjCmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLc7CCRA9TVsSAnZWagAAB08P/3Q9hKn+PBPaAdF2PfDp\nRYgZ1HgKsVPwfNUJEPaObG5lJdr0gIVtnoqeGLNJOMyKs1TkMQrXVk+mYVLp\nm/OMgefjm2FA+bW0zy/cO2mUjHJG0c26OIxaDL1BjU61WZ+PAHfy/LQtFv9b\n8DCNzT003hjvakLEBDv1424MjNZDfVtYRhlTCrlyiWD3PRR5u7gkySo9Lscf\n6EvlVfb44OsCGXLCAn5MNJ7dygkpu1tC1WRH7SZoLY9s3HpLBdE15Siyo5Pq\n6yj2rRmcgkxfvsY7FLI55zCt2NplnTfXgE+30Zre8Z+8X3t7fBWhppYRcnKz\nilik5HU2CCEd3bWf5XnCoRfyCmyww0J9cxbNvZtVYJZuMNLZOqWskWRb42aJ\nsEg75BFemSlCYWRu/YhbiRqGIJEgJ6M/7wkrxOw0uK06Imz6J2rsVsqD6h+q\n5UcQxGt9UGXHTRl5nXCOBICok3dT0ibHpwDHEVgv8o6CpyYKAjSN8Rq3kdSC\nOw5QxeOQPjoEz3DJ08+/1agiVasXf1zWqVZBNVxhzgmhUQbwBrIJttdMoeMv\nhhNWBffui1QS/KLhrlkMnxjApvsT28ijegEkRHRtt1QPuKUS5g9fh4SWy2Qq\n7zPY1XemxaNJONTt+WEhtBAp41cap+rxtDWdFlS+kmjIL8ct5HKPN2cTfn8A\n6guE\r\n=66xi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"104b2783cbf0f94b78f543c94956b98e3611aa4f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.30_1613614786234_0.8583762482660087","host":"s3://npm-registry-packages"}},"2.1.6-unstable.34":{"name":"aws-amplify-vue","version":"2.1.6-unstable.34","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.34","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"59b66ffb3fc3ca9c6014376771bdf204aba9abbc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.34.tgz","fileCount":47,"integrity":"sha512-z1cpmDWiw6FRr35bofoPX4VtLakv+Rk5zUjhEFOHGDWs3gVoMppXPdL8BVdvRA2unOL5uCLjs4tD6UuSuDcWKQ==","signatures":[{"sig":"MEQCIDBs4o/754V+EZp6nwrvD2uW3LtvTJE/eUtW1LCcb6q/AiBA5i+rCcvzSfJyZ3A+CT5iAOiS4V5skROAZ72m2AokwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL/95CRA9TVsSAnZWagAAMKEQAJy7QyeAVqLO7uOm1+QQ\nIzQBP2tyMFTt+R5NRK2ZeGMa/nJsBvGC+I2uCUg5SK+xe6rs1ly2+JjWiAII\nD2LB2jkg/adWFQxB7E6/s/k5tMvuox+n6k7QWClJ1hM78hcA2DMZR10YBlii\nLGImvRJi55hv3L1Fbtc7AcHQc9w4xqnUOkBa6PvxhznDRROeyzfrPhn0FYRS\nDruqRyT8rEKRmi8pvmV3PkVczscU2OJjpYcnkZZfqgNNtcjJ3Zg4xcwe6gEL\njPRdFnE0GhUmUoD5GzFEmcKtyduuEs73VgzcKIhxHZ4AGK8vuKD2hQf/WUs1\nH94dYoC2QRo8jKkuChwkIXgJf1RlihnQQREC4twhfVQHubIY4esrQkfVVUDu\nJ4sNdPwDSdVJY/ZhT4Fw230wLqPLO5SgpSuOLdlViK8SHTVeaij1XwtPzX8y\nu2MrPnPOjxo7SyUPBbLyDJkro1wBc3zQFYldoR4Y3GCgJU60kBTzDvpiRGOg\nx/eQD48387Fry95780YVXyb1KqqT3P/ux5xfOKVnNvCwdqiPSnTjc+ysz2PK\nzt56kMAuX8pZaDfptm8DxkynlAr/tLu60IC3Ti3VmgzPUwqe8/h3UQG6cBBt\n6To+g3Ju+ZUUA9P28H6bgXSe3NmscJ0Qhh3olaoVj3Lfat9gJrezs0zmhEqd\nRuXp\r\n=oGx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"aecdf3cccbf07d315b707f8babbea4451d41a857","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.34_1613758329200_0.0506488942688208","host":"s3://npm-registry-packages"}},"2.1.6-unstable.35":{"name":"aws-amplify-vue","version":"2.1.6-unstable.35","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.35","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"42708770306088958d413dd72d1f23b5fbc33c62","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.35.tgz","fileCount":47,"integrity":"sha512-b/h0jnl6PEV5yE0FCmcZQEtNgNR/cjKDBCowN/Rv1vUtOguuhbajBs6Fs1WaF7yhq6IfVNHfnHfOB93h+JmhLg==","signatures":[{"sig":"MEUCIQDRU4shqy0riPEm283YChxwrwM5KamFrMV54myO78UjSQIgDtl69oAgLzW80jKPvS8gj3Tt1WeTEjhZsLoQKlcXEW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMTr+CRA9TVsSAnZWagAA6mMP/1RgR80a/dFgjxyEu23l\nETKd02heXxrKeqIa07EZ1zHe+pPKCFEwUc+XEPZtQgDskrOnGwTpfzs8QqCk\na1nxUb7NGfYyp31zCCifh0IQ4mvNq8RYuyL6ycT9v7B2M8qflXwUup7Zxjdn\nJGPISLno2aua74Mctlh4UEk7h1zSSAJi2A+zy9xHo64G1xwwd+DJqKTafOz8\nR3LPs2lQOV6qtjeSZp8AGnmd5FphD058ObuwKI8StKN1nYiyVa9S3jGebo9W\nSxZY6t2g6j+q4fDGOR3zId3jvbALRu2IkKOBOo7bycegjeFUmxdDF0U0fl0x\nvxffB5hDZCPojRIRku4os+4S/qxFmbroK/cX0JxLpkS+p+jaNn+GHE7Qj5t4\nS1Xho7gltC/maRsaazcjUuQZ2KR2m4D5tb1/kS9FLrr1VSDaaXaJxEjZN4Go\nrLu/VrtiGOnS9EzUGWJyDGFU/zef+sAUiZBg2dOYGvLkqtaB05MZdja/rNyP\nYXRZJouef9PURuglFpK+FjqEfPWeRF7qz4jWhfjRtTNbfLchlNQdKweymZYT\nVpm6e0hF9eQiN8GQGotclJ3JxbjO/hXYHjuQC88jqXjX7bXtRLuA0GjVy71+\nUVuVmD2RuL85x27r73EuFtBvI6w4p3lSLun7XSRD8eP0w02Fa9NoURPSbqbb\nFL3J\r\n=t//u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5b87ad485be5521a3ca91aa7bb00bba178e6c8b9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.35_1613839102353_0.3653056472530747","host":"s3://npm-registry-packages"}},"2.1.6-unstable.36":{"name":"aws-amplify-vue","version":"2.1.6-unstable.36","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.36","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"da88f660539b95f8b5b8ba07dc87775a893fb594","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.36.tgz","fileCount":47,"integrity":"sha512-FAwYQNTNLkQ3wTJB8ww1QWo7QhBXnOx8FJXNZt7NCYtLqKfNSu4Wi8k5t7E9RlI8kjkMhSvpqOW6bZphIrAuaA==","signatures":[{"sig":"MEYCIQDvDxoXy3XyRgFrPDJw8Pzmm0zTQH1aN6t5/zJ9Vt53AwIhAIlGFMsk5EfiyHliW/L5Ya0NwvO/i8hoWK+8ikBRIhoM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM+JWCRA9TVsSAnZWagAACTcP/i6yitm9vwNaMKkFhGHL\nF3aTTa1kkbLNueBjxoV0JxNJlWMciElRcIPk80ivSiSTaDqc1VQ0JV4LTw7P\nRi68EXNQNPnoSrSRwo1keU9JRjklMLsTPxSyVmyL7pMaMdARkuIAuxo8eCfZ\ndN7j3S11rNNePB5Ax7JEiYRzTBMofKb6SSfaVl8oF78JHHp68szjzttW/uGZ\ncTFoY8uhXvssjjo45VfLl39huWLV4OvCX+QtbifbDHI27G4ARlh4vni+ymMH\nRW+AhLppP5MfP4AWDoMzLG9QO4ZdyYoQteEVx9HStR5WfoBQZzKCXTYP7TzU\nTTfqgVHwBfouUILoIO9JnJ3ZR9KN2VMuzKdf/PFFK8NsWV3lt3tNdUy7YFah\nHyyQhW/pRey9xnL+QElqQavDPk/FyUx+twSNFBx3SUDfygzs5sYc4gphhPY8\nAd44U7gGwcCvtXjeBHP+kjJeOgwoRpaARK1gyQj0MIo/9YXwKoWf1vywHY5D\n8+/Y5m/P9te8GArdlhkwgAY5FL4cXycwDWWT6MGkJ4QVGzt1uJ9RSQW+p/S3\nvn3a1kCyOSw6zydFZe9gyM9yhhx7JOZ4e5g41sN2Dh5tB9xnjb+chcsVFdxD\n89m2Lpz2Gjx3QC5Ss/zh3nja1YbGq3LfrTjI+UJdPdh5w5+nUjN25in26/6a\nKi3u\r\n=wO/0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c0ab2dd8cae5fa6fd1f7cbd7d9e192a00ef535b1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.36_1614013013522_0.6187292072883706","host":"s3://npm-registry-packages"}},"2.1.6-unstable.37":{"name":"aws-amplify-vue","version":"2.1.6-unstable.37","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.37","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"0821f9b3fbf3e4f061f123a1b77e8e44d5e78555","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.37.tgz","fileCount":47,"integrity":"sha512-Bc78TDNdLB7auvlPJKlF+YKX6BcXBPHCAkleHvyaYt0GeHlbdqyhZcdIsXDGd+ar0or+yHooPfKNyN/x0V4KNw==","signatures":[{"sig":"MEQCICjjyNgYB3uLl3f5tjogl7WmAQRTdesC1GyIFQWj08KdAiBWaie9Oo0SAL0qcjyqQTiTPGyyU0V7/Rlp04JbUYG4cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM/B4CRA9TVsSAnZWagAAJbgP/2M9lrKwSMAjbELz+knc\nA7AI4bNB1hWqvcp4pqrin9KowLBEClNDL3Epomv2E9rKvu3tU2B66Y301QS8\nHHGT8mJ65GY+jB32hUlFTadycIFg+5dDu8BtwHMaMRsWAsfSkN8JpLZMPy86\nmKiNIHKD5i1Wmof7Z5PHfg15mCCEpQF8fzkryB7qi5yEjhMEqzwOsBH/uUg2\nOSTQ2fDo7n99jgo3LZWEchAwkjE3q7e7S0vYSAeLF8HlETU+P5bjhp8t9Ykj\nOI5OuecVxgWg5UM3FS+twbhHUbTJQTZAIJR/eIKC3GXR84TF91ARMWpv0ovC\n21M1m6iVI3iRD5ocWQrXcNMeTPE28fXWoTZdatdzAPFWAbMU4jJcGBV3WMOv\nnrFueAVwQzmheV2xOBMuTn5/iQ6bu0jLA6TYyvr0qMy/9xjoa9bjU5ox3Vh+\nPO4KlqilYEOjZgXFKBPiY0XzB1uN/MbCvAGKwTCvCRyOSpKpCLCNhd6cE4qq\nesYywlRnIPNFOyJP5gDc+qVH0kelwzA1LqTbmxv3Py0y9d3dyutTDowRVvPJ\nKDz0taylqq/F2cUiZKgD2h3OTj83vYP2Fms9K7Qtpy4mJgy4admRde5fMTsY\n/A/lqnjvzgcz5HK/SV+3shh83c6rY3maYxmSIqqoyfT6b/E74Q5JS+WX1MEW\n5A1m\r\n=4LaR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0267dc52d7e748b65b770a6aad139ec3d9c4537d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.37_1614016632307_0.39193404410503985","host":"s3://npm-registry-packages"}},"2.1.6-unstable.38":{"name":"aws-amplify-vue","version":"2.1.6-unstable.38","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.38","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"ff7e4ece3ad2eab68f6dea8426d685614442d6e2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.38.tgz","fileCount":47,"integrity":"sha512-ZNVCJyHOeK5GGeq+RBGc+1y1YhHSls6dIxnZ2YIP5HcA3kUhL2LWXaqxqdi4RuGxv7wwOUBM6H+5H/1JSl9T4A==","signatures":[{"sig":"MEUCIGBqIfh7fX8RnSyUdFe/SMjmK53STdPZV1d3LaMb7VG9AiEAmrGhUxze0qDUPJCFBMmtLD6tzoNfHsisiHTOZOsh4ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNBoOCRA9TVsSAnZWagAAVkIQAJntPnXwE+MyRNaLGVRP\n5i6324B3f9pGXcT/3/bx3RSZCsgbOw7NgAvJr1juGW5I1pGgAJiGqa2iNOmL\ntY0lYeAjLh7OHFDrqJs2iNWQss+EYHBQQFawITRfTWt8zp0ZuzqXW1/+Ymap\na7H+HDyiE6GkrhYSswHNkfH7wJLZ8iq8p8aImtDFFPz5xmgTpy84wGzJCHD3\nnMOihOwkYBxxF3h4YIdxs6MlJYZVwjgJKQPUr8aVlmEv/1VOXa104v+kyJ25\nqJwwSzXW6m7HRC0JRGxY/WjH2U1nXXhwUe20/qQxoi9EcwCw9XZBDOZKQtKz\nZn/SXX1YSwUvzVwgC4uCpbhKtmRHq2xbn1YKuVFGlj+jDkyACUIXeZNOUw4y\nNzaR44TBsfNSWSTF9U85ZLZTItTH5LvAqTPA96tWXhP4EuKcd6bp/V/qxpjY\nwei7dyrkIERN4Tu+L8pZW0X2DA5atqF/1CD6wwUoCfeU2LkFzI2/uup4qtRw\nbsH3kFW1LYOd1Mf2wWzfzBkJY5Q4n6i9YJTW4T1TRM6jsneSDwjgwFiIZF5h\nDLLmUzgLdFTt2DyynkcQlQHrlI7VaS8+S6ByX7c2OP5J11zsyhuIJ/jtQbo9\nlifYkq+Dys26pGq8rtc2bO5otrMF8qVO/KJtntIqLcPQMZDZULzACcTBqV5g\nSczV\r\n=IH3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cabcfac3d090c6e80528fdd2319937b81180eb4e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.38_1614027277660_0.15276461220868587","host":"s3://npm-registry-packages"}},"2.1.6-unstable.39":{"name":"aws-amplify-vue","version":"2.1.6-unstable.39","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.39","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"daef9ce99633703203fc37b1a597c5869b0ca427","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.39.tgz","fileCount":47,"integrity":"sha512-/XsewaLZ4hBbzfVJuFul+6bOBjMnduyTtHLhNM4/kASCOUCTzw3lg6OAHAYPSlopyOeY6aCvbCBZcY2xzFT6rQ==","signatures":[{"sig":"MEYCIQDF+NrHTCsUuMbRpk/kfMuKPJ3Nq9nlPvYS/9ILazdixAIhANzgnIqGP075uKx3USgAE5xXMtL+pdnmIXbT3jRSC3uP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNCJlCRA9TVsSAnZWagAAd0YQAJR5yceojay0KdnyLrWU\nQDe6xzodcpu/OJI6Xnua+1/DdFXJ/8S/CjKOlBBRiO/JzN9IEST2kf8651eJ\nFa90+OBMzX/qK/nJEYczGxNn+iw5eccfWBRIIuHP4CGAGqZXbihCp2qWZDOp\ncXp9+9Z1FXqFySOMNnL6iVIkh7qvGlR6LlCLt6oytL9p9AqOk6T/vrQAv5Qx\nWAr4miqtz0CVM9dBe95DfcFeXMI7eWxG2G4AwTMdKgFXZKQ3zdYRrFKkSURd\nsDt2IB+AktfsFlYKoD9jYv16k8MG9Y/5/UPpxgzufIzoop8Dhd4kXIgeSd0u\ngK1+cLbR2JqsmioXGDNdy51fG2mBmu2hK1VZ2VSElcdSHo0KyyVR11Rd95iu\nsRlO21S997gve2UVE/WsCQOL4VlBtS8VuAqfWL4/EHyICfE9kqNBvTg71NE6\nkrDqIUq+QQjxGadGQCD5Ls8OF6Y7D0VnOmuRruW8DvS6ZS24pbnxQCy1bvNp\nVuL/Aftr4dOqmW1oIKAdWbxBUFITsrWROp9ZjBIRR+FQ0v5CmoOdRPJWPq1c\nXuZhUq7UU2utAmiFxuzze/mz0Zq4RCCV9bIuPYiQJ6gIRCZwwUQ/1pm1QvPb\nYkr/seO5Yix5RTYJXzxbN8m0Q8ZeQXml5LQ5Ak+caMLwHhl+20WbIq9L879i\nxx/s\r\n=fvSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"59e6396cf7f0424b3befa1888ea937f96ef5ce60","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.39_1614029412846_0.8236528038556867","host":"s3://npm-registry-packages"}},"2.1.6-unstable.40":{"name":"aws-amplify-vue","version":"2.1.6-unstable.40","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.40","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"e4e40aab0fd0509d46d7ce878688641802f7a5c0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.40.tgz","fileCount":47,"integrity":"sha512-jPwlZMYBmXqxGi0chWpkebrIXbR+tZ0fny8K2hzgt2a0RemyJjIy+KImp9JxshYwShNayonCNF704qC97bfR3A==","signatures":[{"sig":"MEUCIQDpKcQ+yXxxvkhub53w3yaiwbY4WleAutHzRbB3q61b3gIgX2FhgpCPJYv9oPC7pp7W24LUzgm9A4RQuu+cWTaj2wU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNCm3CRA9TVsSAnZWagAAkrcP/jO4tzSZd0LTVLIE+lPW\nc/j1PXsXeMbVeB8Xi94C/ASXQCgZNyXu7h2bVcqQ/rlDFucAjQzb6jrmq6E8\ni5gxy57ftrFIsJZYhWdNEUVv3Mrnh/tG6jddmGm+8r8Q4NLTuwqKpB8fiql9\nvuGmEv8BE6iiWZV/JjWPgNKXZMYy42/Jeu00lHVnP70ynciWHVxnjgO7Uhq9\nCvlFQ2Fz/XHMkS6FdZKY24LSzBZupvDgzN14KpP7Z1YXFPt9pHNqLHSSr7Cg\nQURi//XVEMsoOnKJJ8M8lEYqlYCcCdENHEJ1LBfiGE5yZHoOBR7h60VJzLKh\nlDc0i/xHmhxqbd8hhYJrROM6X/3tgAHasAtxPStNwhRomGytLX5oFFab0McE\nbCDlJxssHPwZ87OhUO127/UU89FAlI242+fO5wZFgPvi4LXbNyN342n3yfAK\n4CLcmexAM1o5xhi1sj+NdEMVcpwv7VKkrzOGcdfvA2XP20DiapnPPVWcblwK\ntB3dUkVWpEQeCNriykx82mZ/aX+HXnMDXIUTV9iVp/054bXpxZnZC48liYZJ\n9mWbgS8AgQzz6ZPvP7r/Qmbf2/s8x5nIct5t8hs8aLbCxsWTt3wrsy4fMFhL\nyfAFhd31UXkZ4EsBb2pvcD4gLc7lruBSAICriQ1BBVsYKHeJvk7DNa0xRcbb\no/7U\r\n=PfHu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ac0ef4b994a863fac3b5899fe7190c20a070fa16","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.40_1614031286398_0.11218195524776231","host":"s3://npm-registry-packages"}},"2.1.4-sdk-bump.35":{"name":"aws-amplify-vue","version":"2.1.4-sdk-bump.35","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-sdk-bump.35","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"7b54c272624ed8eff804bc342be509ee37990cec","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-sdk-bump.35.tgz","fileCount":47,"integrity":"sha512-Cu11xWXMEBu+13hdXqFwpL9SLV6QiyoqNL37zmjbdJDXya9dU/3Ts48zhs5AXyRn0nwFvvUxAgNu40fN32rMYQ==","signatures":[{"sig":"MEYCIQDT9SKeO6R/QAaMQ9Z3TR9W9qGLg3P77eZLH32fqllGPAIhAILhXvNUEOj7lojEdGMMDVttkYwEczZ98xIQzZTvad9X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNr40CRA9TVsSAnZWagAAdygP/28jK+WhLu67p0DX4KVJ\nqJct3d2+3AFwhc1jMAo20g9kZfA8B11MZMvWulsj89g0IpRMu8QMPcRD0VR1\nckXZkHAkmhaW3VwxN3L7n5k778zoXXgKVnAwn0m+gSJeuICSv9+Jp+7MmFJb\nF6Ywmi6UuzBMgoG6wKWujvRVlg8Bj/HP975FlHFNTQ5o0TrujWJIdskkCokp\nj13zKnJkVNh0QmaByjRA5M+n/dXF6FmhE6bYr6ABgg1ukw8f/K4uNYp4gxY3\nkWBMhrnZYOtmhuD3S6OwifTfmBDHUiTdbrNWxDpR0CqbgBYejtoGH25e+jyx\nYpmQ+zf0eH6XxhW4BOclIq/HJO9O0AKfsvg2vpm4JWA3yQqA3MAMZhU9SrDU\nDynQQChncRJTqNrmYAhAzO0nUuOmT5IyB9QA47JIt5lnU0HLZPAT1M3zIWD7\nP/WN6bZYT6gx901muZqRUHLmp8E0oXJr7fxxouJAjGvT2MF7icLpt1tPoLTn\npNlsriOvqiVPF2uGttIgxDEs+xFjvPrkt2wfYT9aTHrtYxP6eo0oGVzQ4KFp\nRbL0bMDG9twgPibH2nLF5SWn0Z+3+Uy5DVzxCs4A5rW2CIJFBhe1++kUGoHC\njFVIMG419w/v5Ppqmz26rY4jxufdQ0aMvi2ELpnbFDGiTs5g5PScpts9EFVG\nlE/l\r\n=Iths\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"34d054085527e60a63bf0d125f1d46b20497f4df","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-sdk-bump.35_1614200371664_0.7849482798350476","host":"s3://npm-registry-packages"}},"2.1.4-sdk-bump.37":{"name":"aws-amplify-vue","version":"2.1.4-sdk-bump.37","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-sdk-bump.37","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"779add8d899576c1eebf1c695ea36971dcea35e1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-sdk-bump.37.tgz","fileCount":47,"integrity":"sha512-6RIvP2z9323+nidWVLndOrxpSHdnMyCRC2FEk5i5iMTJ2aRgPQNPwRhS1ntE5SzINozus7SZdVYRHHsjvPmPTA==","signatures":[{"sig":"MEYCIQDu+IOo8GVUpAcKYf6dYfl5DtMaFmemPLAu3MEAP+FUzgIhALTc2rss3ok4RxOvkaP+7ftSmT457kkY1b9Hj92fzFD1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOAOPCRA9TVsSAnZWagAAriIP/iL1goywyK/h0vDd5nMk\nSj6t4JhLVXjlQikPU/EODSnRfr9NSV2mwwQcsFpMXSTNMYvewWd/pJm1cHCz\nQTjclWA01/MxnXcTGqAmIj6ib7awbUHQ9iM07zQzVzilIphooVR7+gzvDtvg\niH4PniKTfa0lJXpAO3mVk3Dx9O4XWF7w4U/YkzX+14D9HMQgAXjuCg9avm6U\nniFZMKM/qEmxtCcfedjhn75Kz4NSWI6oDeNfgdZmb/tVIThKs0ZZVtgJsrHG\nDMdz5Nd06ViDIL2M+aoL3kyaZ7AD+Ka0lLJRAmkpHY/eh/DEzODU333tYyG9\n1p0cB/b6KJzg6fPsR8SDkF4M9pcPINwh5Kk+ceYtx45yIxzdFDENeg5B7p/j\n6sVqYIbOyODj4MtKRcFDFL6KzE74g132V4KdSBs1qVfo9bARRzlozfQjG/4C\n+j22wtbgHFTUqKW6rdLYEei6JFQR/ww+orWtWZH6bJ2juXXtlf5spcDcIKwL\nMVdje/2ctx/n6vNqGzW8wtDNSSO+CjR3R0oJEHYNS/dneuiTy9Z0q1tRxqm6\nnjTQMT85gI60mbWOeKquToirjhoLhF1UIRudbV0vQNslMwvGzNcc1oXkkJHx\nSGy8jqkkiBbJIV+lH0iL+xKsI6P1Kq5NuFROQ5FKJTwo5H9Yb7JlqOToaiMT\naNGc\r\n=xP+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2139dbd3f0b9adb1ae078306eb39fbfd40ef985e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-sdk-bump.37_1614283662522_0.7319647729675849","host":"s3://npm-registry-packages"}},"2.1.6-unstable.41":{"name":"aws-amplify-vue","version":"2.1.6-unstable.41","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.41","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"276f44922f6e5817978101517d6d86f6ab21eda8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.41.tgz","fileCount":47,"integrity":"sha512-jGDZ4DO1CTo8gOI8ab4iHZwEW5ssCxuhG9FSXz1E1WcdAM14sC0hSiTXGfitv1z+HYqDRQ3q2+TG3KSDyx89dQ==","signatures":[{"sig":"MEQCIDs4s61XSJ963FbdJ41ktvPL0IsJWyHHnJqyFxjCelTeAiBB5YqXvMjVjGtVjdesWj0BM7L9h+unDn8qP8C0Eft0Xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOBS4CRA9TVsSAnZWagAACecQAJOEDUmz89DJ8c/kJSgH\n8q40d17K7dsS3ENAJVTLKS4zpKocTUnIulLIa/fCZZow0t3vY8V8TIYB6NzP\npDFALzQltnXIYVXw5xN5UEQ6XDaC0ijU+mcJuQD+7zYQ8jCVHmedxnA/FPLC\nzvwyGATnsyuu0l3V986B2N50L+wXPQO/gpERmTLBoqGyhVqVxciOhdwjLq1m\nw2Bx2QBs+dOyMs83Xg1G3fcNu/59WV/bXcR9nvQIQcQ/3G4klN/8gXlpdeLD\n87WpyLclHD5AaJ+3D0IDjEmfuZOYBy8tial9M3iF173fwoup96/ni0n3/2SN\n7krHoQYl36ln3hnxq+ki6Ch+Lt/wWoj4augBlEU13woAdyqamUrSYlqLQC4y\nypnDu4Fgu4/DAL9YaW9u9G7ZDFGz4nWaf2yE609rLxeAk6wsymI1yAM6yID0\na2xELd8dna/59m6+iM3KgSMyC1W5DZuO5wGy32fAvxtV/6T5TZ5VD2lMg9uv\ntxNiOoNVxa8RMaW65kYz2Oa9a+sXx7673nKn3TI8GzkzBeC7GzdbYtVJ5auZ\n+awW+XI8Y8hzN+rsHvytjrn/6XhbxCNY6ulllKs/HM0Ksvc4YKYnOe2eexVf\nFA2KUwW8wt7PTqDLS2ZEQYpLWyx7PYQLXrQ2j2Go9ucvfgGqk5u4+2yJ6RUy\ndoNE\r\n=19uh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0eec66d7c58b22a0a83322ebc7f62a4dce2ec9d0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.41_1614288055687_0.94893546675175","host":"s3://npm-registry-packages"}},"2.1.6-unstable.45":{"name":"aws-amplify-vue","version":"2.1.6-unstable.45","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.45","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"e996538112b7e1aa30e189d50c1e2bef1c2548fc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.45.tgz","fileCount":47,"integrity":"sha512-yMIKBE8uoDn6uvOrj3VFPAQmGgC0AidzPYmkLLNwMHCs3R1ZA8Tc2C2/gQZifXSGils643S2848/2Ci4YHeV9Q==","signatures":[{"sig":"MEYCIQC3hDLU6zH6KQM9+4nF42fk453W8q07lUi6AY1XmVML9AIhAOKxCGwVvPrtYGwSiYBMJ04Ijv+YHY70cOnA11lVy8AM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPUJ/CRA9TVsSAnZWagAAo30QAJ4qUloBBw/kK60+RAp3\ninOAfg+NzKjbUrGMKW0WRxYNTVCnwjRTe/Y0rZCzQm+MAw3jQXHCUt1BCJwr\nZVb3wkZWzOD1Xhzuc7uU0wccRX8Jsm+iYOh3F7o/xtYrTVdTZ4uZj+Y2kHnq\nbPTcl0EOIGVGSW3uyZ15R2DgnLmqEZqRpSoXwTAS/Gx4UDcm4Jpw11j+uIwr\nIRphDASBi4xsF6zk2/uKEeNhLHc9uoxYx1KtCM3Tj7WXasnzjfi+vIRClLMW\noBLew5A0VE5C0G5tZsmpFZqL3wJEcdBduCBW0PjuelbgU/TKDVWt8voEJPMe\ngg3/nLznQxePvuSUW8ALJAv4DOzOcCGaV0i/lMIjmgJDAQZzbfzUXQtdkyFp\n+MYYe0Et3ZUFTF39QlgINRf797IxuMth6PiS9GnE20+1x0AMQOZxkD+EVML8\nveoKLIdBa0aPmCR3u3E9ohlXUuRXNAUAVJISXixX7SdQ+wOr9rBz3S+ZnZjT\ntvWFHZzBdU92chheI5XbavEiYQpVeQ5TrCI4RBWMTWTGIuVgnvzO87HJU82P\n3t/cdOD74xUvhxxdTtdkjH1v8lN9hYh29dbHMcgupphabHCjD37ehr6mXaF2\nqShzWbKrV60c5hrnr1sD4Z65jSrWi+JmpagJHhhTfQJWJ+3vDfCswXUKrAzY\nA5d0\r\n=rD71\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c664a14e5a5e490c793bd00d67c8e8e5096b0a06","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.45_1614627455325_0.9193164860227407","host":"s3://npm-registry-packages"}},"2.1.4-native.20":{"name":"aws-amplify-vue","version":"2.1.4-native.20","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-native.20","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"f8e88349d722fa455791e2a6b67686da4d6f0668","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-native.20.tgz","fileCount":47,"integrity":"sha512-vNqV0o+Cb2AslX/1VjEFIuowmDTMkrIWmj/D9tirZiQ3MvbO4GKOQj3QyjViMmTrtRSGqnabVH8cZwPWGv7hyA==","signatures":[{"sig":"MEQCIAwPFvLyw0BUVY63CfMokCz6x8BrRF9GeLmooRSOklbAAiBas+Olesh3GWZDdtXU3s3S2gfcVBu603Y3XTO1T0KOIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2954645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPplqCRA9TVsSAnZWagAAo5UQAJ02qoLPxea6eduunF1s\nc6LRCoHwk2I9vd/4c+bP3I7CJEFeeVyq2qcHFe7Qo0qpbiI7xYbfEmtwvyH7\nkniodKN0iiac03oktNlwWo1vS+ZzoHLPjj9VmjZUrzRBxb6c6JeKyj4Vezti\nX1iVGT5qW1GGpV5hu4T6sc+fHxJiUXImWFLgnrqdr6UWIZLuJ+4+xpwMwxPB\nmOOabrWS21JWpIUrhIleeJOzEkwPs6oJAaltzi+7pYcGqBBkb+CtRNz8Rut+\nVLAlanZwWvfQPaaOx2IiC1nK97fYzN88v0Lu3uBRjMTsmH/FMj2raMCG8TWP\naiLNU0hSJ7JeuCjDcgzB/gPVDm4Ng/D9YZRpWtnjabH+ijGgmPAmxJ0fR4SP\n06k4iXdkVt+V5KwXMEwqhIcM7Bbt/gFMlKqZ1jx8IBNydV9sNuGzPl09Vi60\nwJergDT3GlouevpWppcT4Uer1iLm4Sa9h2Yb3BCTXereq79qQnNfiV11v/Gf\neYONTnINNHLyldSzbfbjc8qjapvWJv8ZVDdiHb89l6Rd3PEwZjnCVOTg8WHt\nfxdEbQwOiNDLm39jomZBLvWF/1eMdhKGUcIJuIoaJYspqi30GAZTeEmkAEjh\nxzx10LPXAcOxxqnPHh5ZBKcCZJZEr4aYGy+1LtpiiU3F7hrXYdHihhSQxi7m\nJLMp\r\n=VnPF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d8cfa80ba34b9b8c961706fb4538ea9b6de307bb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-native.20_1614715241874_0.23598288772704357","host":"s3://npm-registry-packages"}},"2.1.6-unstable.63":{"name":"aws-amplify-vue","version":"2.1.6-unstable.63","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.63","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"a73e73d807c83f3c4fb19a1b60105048b9759295","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.63.tgz","fileCount":47,"integrity":"sha512-zK6Onh+2xDoPn5xH1C2MAUoWS/q2T8xn934KTdqcZuGGvH4mp+zZjDWUivylwVcISygVTc/PL4bl0v5fZ+9s8g==","signatures":[{"sig":"MEUCICgmgDzJyJ0MxfvfRbLdR7nTev4HYGvQRSoWQUFUW1j8AiEAhjZQJSEJoj309nyeSXRFQTkfkCDDGyNEeMp3fd6N9SM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk32CRA9TVsSAnZWagAA/UQP+QEfmcsgAxH67VISo0LG\neR+hnk8laRHAHU32itOk4w3OJVcHTjKdI/8z9V40Zaj4ytkiouxTLtyo27Pf\n2FAtLOnCbG9mLkTrYZUiZX+HcfXFWNsY0F6hFh+ZY8tukIWld5S5vMyx0cjw\nUpROfwtvKVkwvfyqhRHW5XrJDALeWWoOowDDtLBGNwTmzsEutJ56xN5qtHxr\nD7aPAsGUsg5+cPGWP1UwZG34RPspl6LOgaIv4olzrxYtIgD+DRH3ELkZKToZ\nH5ZMEUrGWGBHv3RstU7Oll131qVeWEIuGYNS/YzdVjSnNBtqrF14s4OkpJ+6\nTmlnPOjm6G7a7tl2Bdk5HPlSO0njqv5kA2qD2pLZ7LCTlqcTQpFR1OvDidPM\nTdy/E1UCByUznL3JUyu+ATHuIS6t1c3f5jTyO2WnBkwDedOxAqL0XrDPjtHM\nXaHa624zpuWLWUsuxpW/kwzfTwf/YyOQMd8KFN5NyIuuqBKhwI9zoQF2MxmD\nDGvLvABjNMY/aLkTlVfzVXiKAd8lz/y5r2REOkUCDNcdoVy2Aero3mdzt4Ti\nkMWfX5Vq6GaCCj4fPObjNb7uL9gPDjML9AmAI67uH0dDEb2j84UacnyX0NFH\n1N+zyuWtNZlS2hHRAHyoqmpfT5WZoWobW7LYiwx9n/xVfIplc4gIlDAWe/AH\nZBRQ\r\n=jR3a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"85d4dcf80eb341b5d40905954ee71b07532326cf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.63_1615482358216_0.1588115478988521","host":"s3://npm-registry-packages"}},"2.1.6-unstable.64":{"name":"aws-amplify-vue","version":"2.1.6-unstable.64","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.64","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"3132078de35001365ffda7b50939525aff39e6b6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.64.tgz","fileCount":47,"integrity":"sha512-S/FjwcEAJ3lfzEO+ma9oNY6oaS/2+UqNm0BtibZo/0Yu5Jkb3lYX+3PRJh6R9WhpmKAOXaxcxH7oxTaMYpkNSQ==","signatures":[{"sig":"MEYCIQClJo9pmIlkVtTA0f51WkzkAQIZ8Gq20KXfC+nR2FE1rAIhAOtg7vm1Ox+Vus4/qm2cf96XR3TmB/V0fYjQM9UIVfFS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn0zCRA9TVsSAnZWagAAMioP/2NRbcG2GQebb7KRlQE6\nkicJuJN0phzPhTliAUUR16jFwZBpLWVGd4E4/lkKWnjvyvjUDbYBfjMA7NGD\nCfvUDeLUwykKGNDYipssqgjLtbmkF0WQ+/Tr44lgH80X2TeBTu8hEix7bc7S\nftteKJqKwpLYC67OFVBwIkvEjlmmMQ0QpEpCYvvNOtn1JuhkIvtRynoD69f8\n3vegqSr71x8g3ziklxm2xpTWV2CFx30apUTJMQfmNTFTUV/pyws+C4EeHvA6\nmy3ReVNuiVzHb0UsKhxZ3zRWgzNMgrapvv9Efbq9qJ9luxGIwog8+30GQf3z\nwx9zt4o1D6yY8DFxNVO7+sNZB0AyBFylVbW841uhsB5ewrJMdVzWMalPYVQ9\nA1cxBVHNrBETONa2uKjAoimf4WEeRLxkFgNrSfnWL0mMJuXli/pbn1drTUuu\npRfZgABzyR25ficVoeHkvqKTLI/mEwGMscJX0Nt1Z8066Qfb283G3pBzDo0W\nH/kuGImPQ0TBz2rQHeYCim06W9yRxocjnag8B/ZOmb8ijFi0+TfPXTm4R8Pe\n6E8kiOy4kFMcaWvQcureWdz+zy2vTNoPUz0nvsRNMo6CzwetHxAzy/MEOG+5\ncwGz3ot1scugEyHKy+rMMk2TBuxmQ5n++BkBgay9mCnwUA8nNd4E1D+78hri\ng7R4\r\n=w+XL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5a6cecdc2143d89c094a402592c4c32b9830f8aa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.64_1615494450673_0.4292212630953509","host":"s3://npm-registry-packages"}},"2.1.6-unstable.65":{"name":"aws-amplify-vue","version":"2.1.6-unstable.65","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.65","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"0d64f2c693568ed341059ecaf4a0bee496e5130f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.65.tgz","fileCount":47,"integrity":"sha512-Rv7hUh6v1tfXkXLpUiXvMtFU3i10TwkuhX8wwPLOliM3ouWEl5eBq6aN+jeVRaSS0zFyBoCJa344OGmnMJs83w==","signatures":[{"sig":"MEQCIHCO4jGYExltVDGhuq60c66Ub3oK/zHra8+oJqPUr37NAiBmTkcjp+Cff7h2HurZ0+XLMSob5ke7yUNKGNNkW/NWuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrAwCRA9TVsSAnZWagAA/fwP/03Npa0vTzjFeG3sARia\nFCDUX7L578sM5eYUmQymX8v9sRBy8HGSpN0hwvVCcoQkIA9jr2CFP8gXaj1t\nRR9LR1KhIul96ptpX7acpBHdKKO5N3NWf/y2uv1xqtJxynI1DEy3xqt53pX3\nWsqY7MUwnYPIpZfa63cCWJXucnjVJsKTiQ31BME8TzIXXWxnmiuJbZOsxEeI\nizxqx9zuiWZOW+abQQmJgkiEfdQaWwpixhuMgPFO7qo3TQ9SGHPRSURX/uzG\nb+/Hq5Vjo7JfJOJSmxsT+g5RI0i2kaHB646z9HPN4FiRunECA5wJsyyxzwFi\n8GGaWkOo1HYAesMF1jeWgKqlXg4CAoSngzsDjbnsgNqBgLow3AuwKGr2rYTj\nlCr38IBTBBOjIP5PqRsmJDBVts/ew4zvRj9oWam+LH7WIym4SbYrpKltYDHX\nc2LxGrmqrZ8jYAaoLIjUHwaPoH7SbSruJuqczU3chaQVBLurgb1/OGbETq0s\nJxWRMDiAYEoC/UkNSXR6+jfHduNJTDP+v+tWF1/+8NzLlsa2qKnrPTQtyEy4\n7pzCGVjJvN0Z8ZZGK3SsYN9lnZRUJaU65ydLcnR67Z51MCvysIUnvsVSLVvZ\ncyDZa6Nehkt5CWwLfsqDVSE8lZQ9QTmNN8u8XnU7xyOdt2cCuo0xQRMMS7/N\nO0QV\r\n=h3iO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5cce7e66ddc5de1ffa190710a7d5847851ec83e5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.65_1615507503589_0.22484190701179863","host":"s3://npm-registry-packages"}},"2.1.6-unstable.66":{"name":"aws-amplify-vue","version":"2.1.6-unstable.66","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.66","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"24a71b46e28090fe6b491f15d1f2fa25ad7d3268","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.66.tgz","fileCount":47,"integrity":"sha512-SzGmNACr+3cL1toKGTEclm2wyz1DoHH/MhRcMe8fqBGcN1whjj+c/VRC2tSV1H7w47gSbMyZjqw3+AcEaSeIPA==","signatures":[{"sig":"MEYCIQCyqmMI1rjSg8M2PSL7D/YC1M32AtX7Q1GahcKAx0B3mwIhANm46F4iMiQ99dQdPdARVxJtNv142DkSBJasaURtycEb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrXdCRA9TVsSAnZWagAATd8P/33PrG7lZ/fxQ+xAr30S\ng8132zfKLiXgwt+gl8jEMnxzB9EBVHB1esX+ZhSh3IR+hbVM92ysjb/IT7tn\nALYQ+i/+yFjboHzrzFFf2rIelvvA59A8U3uLbX9ZnvCskfKPQhDE0CS5pj4c\nErMS9Vz14UNQS6vywgSM2vWT7TY9qfQs+aDofmBVH0Cw7a1vUd/p029Y1Xrk\nbH3QJfRm1CMPj2/ip57kdZCbqUSG9Bk1hgtrkFOJpYcbQmDEHNRy+YS/A8wP\nfWU6tA/IcYtxF/g0RPIJwCWP8PTRZU3VdchySRWiwIJKZmzl4RGhNASEMZMM\neY+jP13oX6t5kVJbyYBT0nIP9l8VCXxSh3SNYK7cuzFXadGeNiFEgYJ3RMx1\nHHIrnLXn/I2EVdlaLE5DmRnKIMOSgNYRNbxp1C+/cz/MuoI/8YUHVYppLKlp\ns0ASUUbt1ZXxZnbKDCqCBvkXCGNio4MSIUtKKwdZfpp+VDp32TjkAJBVCvk0\nRJ3o5EvLS8cnpw0NYbQ8fAs+13mag7oE/UbKEs7qz7pLJscF8WeBy92y9y2w\nqyMt8NVtjoV56byHaUwoXbSocjjpLg3D5xJ9iOpGC4RiXgzIiG4g2XU2ieyx\nW4ssGbwcvufcX8vbHkPlVnBbLvcjWLCol3QEjaoIwC5CXh74xkIf461/SO6e\nuZx5\r\n=tmAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7c8eb925feddf01ece0f145a7a9a58ace024fab2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.66_1615508956589_0.6966243638111151","host":"s3://npm-registry-packages"}},"2.1.6-unstable.67":{"name":"aws-amplify-vue","version":"2.1.6-unstable.67","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.67","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"aeeab1481119a37a1702ea9c72e2332d22388b18","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.67.tgz","fileCount":47,"integrity":"sha512-SZ3mVlIWT/ji0UFrGf2K1J92d/t55TevM3NhKXwRxAT0Tfi3CtUSoVjG9rFy7y+Dn3sXN+h8tP1moI02+oFO3g==","signatures":[{"sig":"MEUCIQCLfQGy3Z9m0yaWczBHDkp9CU2MPHXThJ+ktPTHxoHyaQIgQjGUtlyg7HQP7sZxBbyUCamigFEN6XYt1JECD/Cki4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgS6DmCRA9TVsSAnZWagAAszgP/1QS6My1pCEomfNvPOoT\nih2R0iumP+yMS5BhmNsF8taLMDoMMCJ7ts7sdctgIriYgM5EXXYkWJyuiCZ/\nb+S4oGMOaPGnr2fp5CCEQV/n8mD1ugxZrimSus2qc0dB7YdAVzlyQjxzJE/i\nl5kLbM1BGnN2hPE20HulCFH2QbruNIdCbNRklm4susTVNHorQFvrkK7XysX6\nN6e9ToqtoPqgq2rWuM0p8/QOQCXd0a1PqAFWvX/AzR/qr4PNydoFwYWQqbpo\nkHoPMTGoEMpiWJN8jlg6QN8+psOUnEMobTp4pRCdVqJsNcnijPIHHHeN15Jr\nfH+Dmxph2T5jXF5KKR1ME4mA+Cb0h3ZihHmjBrjWfs9lzhwnXvKge94jLJ/B\nEyYWIifWIIY2/TAQygzhFMSIRLuNYXZcujTda+LbqTLgu97FYj8qb45oMTYO\n6YnwlW5rc+m+tO/f0I30Urxuv72+Q1VSK5VzWN1s8S2fqek32SU9MiV6DjNA\n9sTeA07B4J7ko4gJRhxvyhlbYgzbhySmyMiSJ3ZbtW14AYIG/LMnniBMRMjP\nS0U3rz9GwMxAh6VWCsLrYmC0cdXCOlI34CdGR6MwcXxFzzgJHmKbxZDDNW/9\n84t62OQnPxIYqc7177/hYdiwINeshJLQtTOSs6i9FgpPs7jvqg6GIBjC98CD\nVBND\r\n=RHbR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4b371125fa60362b2e4a648e0cb18b8f8a853956","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.67_1615569125611_0.04753416514419584","host":"s3://npm-registry-packages"}},"2.1.6-unstable.71":{"name":"aws-amplify-vue","version":"2.1.6-unstable.71","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.71","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"276972c977b52f43ffdfbb616dcd7311cb8a1023","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.71.tgz","fileCount":47,"integrity":"sha512-h5j45i9w4y/lxFzd/mM5AwSqh1ZVccr1eM0ZtGpdnsO7rQXixxVoXCPpAt1pyLYuJmh7juNPM7TADEM6jWPuXA==","signatures":[{"sig":"MEQCIFV5Szith5Zu/HaRz5nj8asCXjc/Mt6ZO2Q/X4l2p+yXAiBkyrpFYTXdzg+BbpkTwPecAsEyIbWv7X6L3ZO5D4ePQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUP+eCRA9TVsSAnZWagAAcsIP/iIgXSf3ZWHfKcG/zPSJ\niYERgAi19E4iJZuLoVqCh6ETnS5FE8GDfWnKnqUJC8SlQQMEQJ4kJf9gdZfp\nh6PGoGIZv5w1t8jgnwDRCLpPgvAxLFqVisko2nK9DPSN9HjMo2RaIAXyxVxA\nyQXvdBHP5Bdj/KCH/QoMP3Fhm5l25T6atvF8sP03zbwNEqU0zc2FwfFmqA8m\nEl95yglKA/5xpXciGjLCwNS/2lMMYvRaf0uq9/HKCL9g18y4v9Yaxfchnn5V\nU2Gx+wRLFXFeMLXTsk9KFY2hfDzDZR/XDDBxqMViX7cG4rJFwiI+qtWtzrxS\n3G0TDDB2MV5luC/q7+e6NpeL2H8MFruDBe6/k22N9wgg+aYQhzAaeEc2VHFq\nRxWO3RhxwgXT52ICSdVrJlwxbnN4mkuADeQF5bJQUMosNll6e4OjsgsuwhbF\nTdoiDVo8JNB7JEBDevnn2UT0JN94a8bA4P1oJMzdH0xbr5cNuQDtUR5ww1He\ndnpycnZDCl9DCEyOT2BtAFezD7F6KEG9wh+vstHL7xX8sXu00NH8uNbOKt4f\n4N/8VeOHHEwAPccdk23al05Bw2De5nZ3d5qpk5eyuR2zH/Ezexu3gTNismqU\neFkWv2pVSuazyS27mvVaZgSWle9WZy0Yz+Y0Qa89adwA70+8gU3JjX1f+jqp\nHJDD\r\n=vU/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2e0dc61fa9e4399351a59a7e8fe801027b6587d5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.71_1615921053664_0.1867053853172802","host":"s3://npm-registry-packages"}},"2.1.6-unstable.73":{"name":"aws-amplify-vue","version":"2.1.6-unstable.73","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.73","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"b99fa38f7dca493c563c4d126e3f15b31d15b0e1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.73.tgz","fileCount":47,"integrity":"sha512-b1c5i6mDUmAHpyP4/exGo+URIatK4bMYn2UOFICBflSFP6VhJfJFtMo5WdtfRSsJmxjtuBC+SIjCeNP+fuJlTQ==","signatures":[{"sig":"MEQCIBm9RZMU2L0R2Wg9Z07WSuFMbreplx/8ELetpZzkjD36AiBFFwDVgWq7NQSRTTXH0HaU9o3iPn55I1/Buu5xNkvP6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUlVFCRA9TVsSAnZWagAAQawP/3Ryd9H7KwMUDYJTiJ7Y\nf0ruHaDpr0aHN6w4QDzyms+AIyCOvUTZPg8qKvu+fENguP9P2nUkajTjmFdH\n3h7XSja68BBUwDhMz3NJxxlUu+mJGd4pX2OL68YZ53VUroymbYX0RdJKxkqR\netQin80szCbC4xUrRnZsCpxG9dGY4yPmrZj6sYqMQ47NZ9YY6AkIus83f6c8\nri96R00Yx3RiNY2fVSl3rB8MVl105RmfKwERUgSSyQgwDLKXTW5/QeZYnswT\nR0yxw4rw/Iaw8gQvdGO4QP2DSWJDFgaNc4jBqxH2wA5NvPKfKdq5nNrNOwH2\ndkr7ivJlKxK1rzsA1cD8ZfsExGyCJr1v8dFfmsP/qfzfjkds3EMw/KdEJ4Nr\nAQ2d/BlweOPY3WJJXx7hi/1k35XCEDDcamAfBaTf5gpsUGu32pc1p1NxoKYu\ne7pjbBzJ32ShS6PWwgTS1UJd8eo7ll2B9jWWZY3HJTRIGOKeM3ggn5F7hvBq\n/02wJARgsTpPLoGUyW740nIjjAsMXTddmFw3QgQ1MIHDEobBfjbORhdbR2Bi\neB592+ajWRx+2BbEf/uWbP8uMQts92U73NQg4qDiKnjfXy3PqxjsaWgTZnTZ\nyg8+B6GeUfGRYoTHcQOPnqNmLhjkDJN3NMXCzEH2o/NT1e6TbUXgFv2wt9Dq\nZNiI\r\n=ePeV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0d123c6beeff755d7f01eafe18c44d7c4fc0fd6e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.73_1616008517163_0.6382686789141612","host":"s3://npm-registry-packages"}},"2.1.6-unstable.77":{"name":"aws-amplify-vue","version":"2.1.6-unstable.77","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.77","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"cf5f2a4983911ab6289b94312606e0cccb042fa7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.77.tgz","fileCount":47,"integrity":"sha512-D6/bw774vSIEqRif+GHi9Elg3Zc7Ky3fZ/KcXi4M4GFOtUXb4XwsM1OsCjGFwuOt8yNXNJjGuGxhYIfKbGA7YQ==","signatures":[{"sig":"MEQCIE/P4lPnBEIWFKqml/vUAMkIXDeDHEFbj6XDZpaUZDn8AiB1gFvJNuZ+RWRm8zVeVxp/RJ/Y74de/IWo3n6obUWoCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRRECRA9TVsSAnZWagAAbDQP/0KKR5LeI7NeunMAREWv\n26z4TktnNLSOTaqpF3pNfRRiMEKHPCvraIwk0PijUD9AfPZEwUuXAm+KGaKb\nBgu5MBa2QIcBclTBOZKCACxzJ4nq9ZAYOHLbVkJIeTuF9G2bqYmcdJAf2Bre\n0//Gj3VT/J9NyyKe+utj0OT9PR1haZvS4n6O8KqRAn+f4OXIVPxJ7jxEVVPz\nX0zTkwQzsgi8Ks0Z4uir+QfPakt0DUpR5Wy1X5IKIj2B6AZ/TMFiagNcE5th\nlhrQFoKLadqQveH+kZeS++O/njgCB29KlZMJ4yBVVEzb6L5IjA6Tt+P/zs37\nxQ6FwMXUD4DGWDZJagaL127iDNPVZ8hatYDn1xVDiZDMNhlcnxyA7+HHZC2K\nPkd81E6O6OiYiezZkpMVzCMgmMl5QocsYO58P5xGdOByZ+SVjuEbzR6BG0zW\nzAmcYHPenr/3cWOIijIE6gdgCeFbrRacq1O6vKYGYvdRGtJ61XFGWGY08xJd\nrltctWL1e528XmLtlnF/KwFWO8ul4pBIy7WkqymOxMmfDx67myBMVD24wmXk\nR8AsWiscgGYbf/Y2WKda40A09cfJxFX2khkaw+w5D5orThYHZMWi5S3ZK/cI\n9BwlzJlN2wx82vxCc+JHVngkzFBFixeif22dvXp5a08rz8LdF94TaMgG7N2z\n3gvB\r\n=MKJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"92d8d800256119d1ba84bb90097f91a983b1e5c0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.77_1616188483946_0.9101839343751228","host":"s3://npm-registry-packages"}},"2.1.6-unstable.78":{"name":"aws-amplify-vue","version":"2.1.6-unstable.78","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.78","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"39c58c4913b74f46e2d2f201fe62c00bfaf79699","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.78.tgz","fileCount":47,"integrity":"sha512-ld9F2hXAP0sRoA3JhjFpGPZrL+Et94D8LPJy2o7Uptqyhfbibpbmk6y8bMhO/BPlLRpC2fOeMDYLlShE4zT/3w==","signatures":[{"sig":"MEQCIDJbi4vztgg4E00+D7B+0dZ6rGMHhZWuLiF0KT/ummZ5AiAs3vkZhcwvGrLE1UCiayb7Z4I1GkFx31UcRKZIlKwKjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRaoCRA9TVsSAnZWagAAOF0P/Rf/aCLYfUumfldzyQ7V\nYPu1wIqSR50R3zNXAEg753z2UYIBHFxudxpS7aT3KNVMVBnTvONiHma9XoPH\n8ir7HSTOgy/ZeXbwBIEDgga2sHzCNWxF9gITtBl+7lcjFOkPRMpkVuBNmnqz\nwuaeFzCfoBjkCcou1r36YKoqwagkkZZSSox/gTLgK/j0Vg1ZreTtRsk31q/F\nKOBGPemsEuNVd8ByxHzbMVMbV+GSBFUHLOG70c+we33t64oAkVRPfnrE3H8M\n7ZcXMnpiT2zqr21L9KyS73sE//MGj2qxv42CsDoj5kNh37y2kmfsoa244POt\nTnOkRsq3l8ly/AVR17yelHPVuHc4+wPRom59JmBc0Eo7jHDl2nDkhosWWKOK\nP8zkRCzO2QyttKOUhkZ0KADJqN3EyA1g+l8WKF4/VjN4MftEueJrUWPbhpiw\n0IhEB4H4IrapIhBd0ntYiMiXYrqBNNbx1LH1c/WgWin3nj51I88rYWwC1n9c\nrLeEiS8FC0HBaE6umoPpqs/OW8+slUYTean8qsNCjIrLSLepyPWSwBdXR13k\nCPFBBfkMNep+JF2Jy5YWLH64oAuw2D2lWoSndlqz4H/Ny3ruPHLCJHu8snPb\n57WQUd/Wx8IBzfSxQnLaVJojCqAViiymv88kDe9qP/y3HrXJ4Mm0zqfRMIf7\ntLVY\r\n=xZvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5af2e1a93c681572da2deb39d7e8d2939d26cf83","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.78_1616189096059_0.5133162904694397","host":"s3://npm-registry-packages"}},"2.1.6-unstable.79":{"name":"aws-amplify-vue","version":"2.1.6-unstable.79","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.79","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"f80bdde1de24b7b3482ddaa1c34db4b14c5f4001","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.79.tgz","fileCount":47,"integrity":"sha512-U5mRTPvomRGaykJ9FxkvbvXfFe6UGtMbkUq8jWecYWtj+pt8/29yiPpok1tHxzAfYMSc5KBnv5YVI3YiJIBjwQ==","signatures":[{"sig":"MEUCIGCLDUSxQ/MfJwZj5ocEFXwqnJATab8NjuCuE/bTSQigAiEA9yAd8qwWPv5qrSE49g5FsUxRZoq9Mb2X4SUPfwrNnHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWlKpCRA9TVsSAnZWagAAzykP/Apo5jhJS2eCQYebQBR6\nkuHU1egImqVfH1nPeyl3Dr+gUqTLlGElycHAtOULN7iR9j5XFPtaqmFeMZFh\nAy0goT8tDZ/FvbM7t9JJyxW8iPkuI5gEBkHDPT5SKXH5k5y+wA0/0HtJoSA1\ngviVzwCX94wV4TCtMbEAav75aQtdGXxQxNIh08XYKC27HVZJLwzsjEXFarRA\nEIvWxhRalVUXUIXkTUpxbH4KMPtM0fT9wxchRrvasvQzV8GFT97Vl4iHrgrt\nu/13FS5bqcF9RkEGwt9LRwU8Sd9DzNGrkwd1ZCMzWXMXnzQuiSlpxMaTjwhD\nl6rtF5/5hXWKPUHyGx0ImWKtM6lhWCNVPjUnqfczxfM5fHq2YiQFUlq9UENS\n2zvNQG2UgtZhQ5SV3Unx37RQ5/rSk2uh5MSWEVU/xBmVzmpD2XsFMgunZw64\nMpkJDjoxvTZ0rRntcWauXZBItqkLvPmC1MYQw495U1kHNZQYUN/ceMuiMDWB\namBJGKUKndUEd6WPsDUMdXRIvrIFZxdeelwGaFFwDKlvvLyOn1oBoqeKD0yY\nVCq65Bz1vXdse0364B5AvOf8Q625KVJpo2Oj2uTP+ObOd9cG7F8wnTR8b5ka\n9q5l0dCjBZxvNuXthJIledMG+XaHVAYSznZW7j25hFDteJe9Ri+CBI1HvID+\nREUR\r\n=4vLD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dd98afb272e0ffe39c1b9e6a9ca08e6b15ae53fb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.79_1616532137028_0.5019369789118464","host":"s3://npm-registry-packages"}},"2.1.6-unstable.80":{"name":"aws-amplify-vue","version":"2.1.6-unstable.80","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.80","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"b71fc35d0fb33586498a1ff340914bcd651a2aaf","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.80.tgz","fileCount":47,"integrity":"sha512-wtatiIuYz2dorjKepNJiUY3Pk/nDqhLVvRLpG3S7RTJL0v8YglHhJl5t2zWQdKRcWMREpL8tgy9QDqkp2t+Z0g==","signatures":[{"sig":"MEUCIQD9EAfXchuqrDEp07/66bfQtDmNLD9/sC3JHLHJA5dmEQIgU5OEoMULxeqbbKdj689D1/EHC4ZMkhDFJ5+J0hc0ouE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5RMCRA9TVsSAnZWagAA4j8P/2ZbdrUv/51OHX9gfuKu\nuFdGs4l4wsegHxLGDQdZAGr8e7Mgq92JA7qNsAmJqP5AMMyhchLh39zMtBKH\ngfHSA8zKa/6ZK5su5XdU5Fz7bcePqicVXqc62BSlvGOml2m5/ynKgzqYXFi0\nzRV4ujaa27b0t8vR+0x0YB1ELwSINMPaCl3HBFYVEWdPHnG0fiqwBhE0y2V5\n9vRzromEoJW/7DILcuxq4SEI5rGvdpnSenkzesG5CT+vhZPWF2OanpHnsgmG\nkqmf2lxoZcs9V25lfM8SYuhEOk2AuG6u6Oa5yYiNSpQSmz4Rst8ww2HINIgC\no+B4qUTFDNff/yKyNmNiRTpPoQmteDLw2f6xb6RNzM8Qyit+vnkiG4Y6s7SL\nCFUvHndc0ciOTWyb+EgLshVrRUJQsAGQycGKYY5ylwaXkjAUVKBvrlRfBms/\n3XEWMCbBz4HQToEFdyrm0I6WYkGC6LEgaf5L0R8J4hfQO/NUAefI2Q+nx9ob\nwe5IlD6xRowUeGqsnrZl6R66utdU/dNB5mAe5oFlOCpIYOkIMOcOMlcHqNkD\nJbGNx20CV9hem36PS6Lgdb2hJfrwx4LMJ+APpy7MHA8TZITTjh1iV1vBPRMG\nh8lHe3O1t2kCcH+WJhW6mqA357R3Gx8vp5pBkzqaR5RAzJCl/TW5N59DY1uG\nEpdt\r\n=H6uO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0e8968f9125b1b5f76389abe3d77986c1f65e32f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.80_1616614475879_0.9964110854112176","host":"s3://npm-registry-packages"}},"2.1.6-unstable.81":{"name":"aws-amplify-vue","version":"2.1.6-unstable.81","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.81","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"6b5c0c3e879b550dc3491d987feb964a90722c9e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.81.tgz","fileCount":47,"integrity":"sha512-A8OwXtGyjfzz3INXanxccJoIzrDMrfI1LexTAHdda9QiC/kcE0+l12QV8CVWsThDLv2RPqCISX6XilF7wZEuPg==","signatures":[{"sig":"MEUCIQCct6EoVy53Q59+RMfJdFcf/4oYvBo4wdAXep9BOKqC4wIgc7EQFwJJod6G4t4ASdrlfWU9/sxPWiwKnZy5rbGKK/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW8p3CRA9TVsSAnZWagAAqbIP/3yR18wkzjL8JwuvPZmO\nW1NeFTa/3gBeUgXiy0P9pQOPqzTk7ebpj+edj7KJvr7HEYcq4HDTsUSmxi1o\nX7RIzejXmskC6qqegRsvh2eycADozuEc1ebTvBgvTasePFKXSFFJa9ICZHt8\nEs/q0yTBekHX8ap5sj3k2x2sx04ZcSOMZk6+R4/mGv85qb6x8pjYVmgafTmd\nqW8hAhXHFwU9LgfczJP8Ohxmo2GYjxqfmBMPi+Fb8wPxbyOo4UIeYZpmBVnA\n7BMsoKkNkx0qctP3Y1KApBg530Kjubhqs7XVz3YnCORNet7hV30FDt+dzT4t\n7PvicBpzuWx6iKNb2wNvn0VAf7QlBI/mbruwVjVdQh2yFQdVoPMYhbBqgwpo\ni16FUpOquqNKZT3o/aYlyxxcGVtWdI+7I/5xfQ9n+jWyC+99c9ApUwLffbWP\nqArAo+clM3lVBQaBD52tdaCZd6ecpaNWtBsatjq4VFHkskdUK+Titpgyjtfl\n7WwznGtV0n760ha8sm3lNARAjM4LXkMt/P0udKffFpa+uv/zN3q9qPujjD77\n8eEn6rOfKq1iZBN5BuZnpg4ktNbb0E5dqxFDYcOWTtoQxomOTOm3/vvyjAH8\n/dcC9c5qMH7oAKfgV4/1aIElQ4ylG44fx9LKap7VBlqNaGuRqUSt6kCwfAt7\nHZqG\r\n=DEJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"63dd9c37aefa0c5f8ea3ae219e65c2bba6d3a25f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.81_1616628343339_0.9930108135173663","host":"s3://npm-registry-packages"}},"2.1.6-unstable.82":{"name":"aws-amplify-vue","version":"2.1.6-unstable.82","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.82","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"7e9af9004f45eec688927cd4cc79e001f1d98698","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.82.tgz","fileCount":47,"integrity":"sha512-W+fr12Q5wMX8akSDPaTi8dYoQ/xnSBGxmgfPcssGFn+Ye+AvzzpQMcMrdsorE8lK5DFYV7RiJWVI9/SJzH4hmA==","signatures":[{"sig":"MEUCIDFVKjDl/J9sbaEKdaGv4RHbZID5kcrk71NX7dV7+eRcAiEA68l7pPvdIYT6U3ZHKomOuXsYknD2qCCnfmy6OjXTu5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXL7lCRA9TVsSAnZWagAAtYoQAIF/0Ct1yBEh9/XDmdAJ\nT/X1sKAXUCAFT5n+Mt602rhhwaHaA1dTH6iQiKQ+bskmsbQpZ34gNYoRordJ\nanA8wZ4b+2mjtcKa9jXwfRlRJhaNhf51+OIsC/H0VDk2T7eli96II4PgnuMI\ngHJ9Xje78xKi7jjxPeCKnE3ztnUhe1fCvD9T/D8biW9WbPL1QCdwLhoQNvw7\nYa8sRVhpyQBuhLMEpr5MIzZkkiRxn07/JCLV/HkOWHtYr/2VZfUnQM0RDYad\niTeY53mEEMk9lgniyLgxFmfvTeZXq5CYToket5OV1o+Az4GVAt6qEeu48tfs\nqsiBRXbxCq9Rj6ID67BZ6C/RAUV1Bn+2UbH4XhVMyzZrW0rLGmeYAyZEspEI\nGos4Pqs1F1h85/wb1Kj2I6f5rWCabrpS8o6RlriNLajfEQJodhmjViKtiJNB\nT85qoriB7ThxhCay1P1JSDJiptHR20aJauReV4eUWCPZsZf6FjlqsfvS85Qv\nl1KrHJFUoR1bLES48Eet+6unSTc7hXnFqEXagvvZVO9KQD5jFnXuu1TPDwVd\ncxJj1ZG0+l5wzh1wvg5JEUbXOQcITfLiGUxDZWARmkV6nvWRyvuQtsqjnuqA\nSqiryDUrdwmyUIwehxiPvm1mluLPDOer+rnxjAi6jY+XhSIiondKfwcrTtwv\n4hs+\r\n=41c6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"638c94de30df179ef5f0d03ac8c97cecb683bb53","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.82_1616690916995_0.09677163666870614","host":"s3://npm-registry-packages"}},"2.1.6-unstable.83":{"name":"aws-amplify-vue","version":"2.1.6-unstable.83","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.83","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"132ab4f04df440d548cc6e5f265d1b1e40f4b049","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.83.tgz","fileCount":47,"integrity":"sha512-cQmtJjpgfTToKU3SOkonQnF3FvD7lyGyAA4kMhdQxrkpzn6sdqYqPsbMzin+qe8qOHzKpTFk3CS5Fudz7IebKw==","signatures":[{"sig":"MEUCIQDY4lAoHyzYdn+kHbMw4s4u1IiV/9mWFo1Ga03m/NHSKAIga/G0GbL93tbkTZuUIQyWxsDY48kbwG7z+MFQvC3eU84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMwTCRA9TVsSAnZWagAA+7sP/RYr9T6fmRgMsH66AZtj\nUxWik+t6bC0N115TGgHh72Tm1EbuR9Ibi6b2vcsGH7o4502W+zMIfIq5SQxY\n2lDp9/SmJoNZVCzHcsKA0wwtmBmptpkPcTdwk51Jc8XigW8YQhx1i+LlR3qS\nAQCTT6qvU6P7KKrIXI3D7MT5F7tmfk9viNSdtLW411MTvADkbTjMCh/k6LIK\n7g518L2rCy4cFVqyxRvPjw5CFiHjuE0b9ZL7TlJ/lt3Gn2W/6V33A9Ayztat\nad+SY/rq58prEyEcPjgJBUTa7OFy9bkhB7/ezokv2Im1vqUq08o6Iu/H/Mfm\n/b8OFSl1YDA4m1oVF0LSLf8X3B9vFJHPzLcEx9BxV90XnQ481SzvQeupi9es\n3UGyrQYZVxHoiyyQMWVfAPjoljew4Ek16xAjdJ5UJ+y7VjxIsvnTMVC+CDlP\nqHtyvWCgJajjL5GqXFLQ6Zz4BFfihZT2SZjdxK/9LqMFRdWlV8FRxZxN7Fiu\nVipecg4FcvDuo0tvjiWERl+U87nKoJdN4jBTHxNlsYfY1k+j4Bw8cKoM6Dpr\nzMsrdfmbxsjx595hPuxcN/HqbuJP7MhZSvVuQUisqFuszkUWDer0iehH7knx\n+jrxvrlj4nMjuBQ5gGMDpHa3AZm7mofRN9CvobRiu0s0LWU7KufjAxlHVuQk\n5QFV\r\n=xmZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"efd2e41d13fa6417ecddf153d7d0461060e45621","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.83_1616694290982_0.686372802345038","host":"s3://npm-registry-packages"}},"2.1.6-unstable.87":{"name":"aws-amplify-vue","version":"2.1.6-unstable.87","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.87","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"e2c550bb6564f942acc9045c970475fff37958aa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.87.tgz","fileCount":47,"integrity":"sha512-fDsOwK2jil4W6WQef4FHu7cJDJQ9MZNUX/l6kfdheAZyvUAl3+hop+qNlwGF1qKgxd8cTONots+/+UswB0V+lA==","signatures":[{"sig":"MEUCIFo0S6+YEugZAdYg7KPICsbYPUdE1ZtRQgrCK266UBSeAiEA3M5IaIFE7OJ/KWPuu3XELOj1Vd6ceapAxf/KQW2zznw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXgFtCRA9TVsSAnZWagAAWXcP/Rm07gIH9dbqEjYvPy+/\nI8jCUeNY6vpHlQr1M2Mn/6Oq9/1//1f0Ns3j+OJ7LOgTeC9cWdVF5eGjWbIY\nJEX9DnLGv6fTXuQ+6BvJO3cra6blOpq+Bxq5pxkZ2ifWfXN0W1bZ11CwXKcC\nF5JOhqbT9BuL4OJ1/Fpmhpca6PLKolJNU3DADk7KrxVzg/VWQKhta5+/FWaL\nmSYWEw8Useji2lEA+MAHDKQW4yVxZU4g741iERw1IUP4kEmj5iUTKoVNfEqV\nShIYn3l99DxBx7xXVKb+8LNVcwLFAlYvfzESRkS7VciBdtpb3qgrSOV2uiVB\nnrmlCvVFK5AhgJRHvkLLijtNlL0YkynzgZ3GffPvLG1xTDNSInfYCdDDtyVE\n3hExNQvQW3znWmxbLtPRrkUfPP+62TrGn1e3NpfypdIBXFqWyCTViJn5R/ek\n/7gkffC8uvLrAYHBTHHakkmAG4NtLOLHSCAupbMFGPaiScHmRGNhw0A1ZKSL\nM0+sWqy2zDpoipXjj55/2VESsu/+NE9xRMQNAbicwSentot0uchK02FQ0+hv\n4zGsthWtWrrK109os24LnFBowRwmKEsWtop3NMQ2sP0tttmiyGPd0uLK5osy\naqvpS/3BFdymLq3w/koB8tEPjgWYpA4IbIgenihz+WL4HcBnF1FI0JyRfPki\ncdiM\r\n=Gl/d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6e56127f8528ed5852e45401b01188153a12c469","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.87_1616773484853_0.655512126219455","host":"s3://npm-registry-packages"}},"2.1.6-unstable.88":{"name":"aws-amplify-vue","version":"2.1.6-unstable.88","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.88","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"25c859535b08ce6366c38e3164cc024bd5624e4e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.88.tgz","fileCount":47,"integrity":"sha512-SD7wZyVTSlakWEJFPQRJyPlBxlJrgdzvHJLLj7sU8F95qhByajPnuUWSr5dxBB23zqAYC2UZWzI4Wp16WK6FUw==","signatures":[{"sig":"MEQCIAGdWw2XbEcl9hsISjQnS0l8+1T6gIthmLMuM4dfYvv9AiBxudoNozivYSHNWwNo7YDPb2AI3smot4rRXR5ePWj/6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYlD1CRA9TVsSAnZWagAAeyUP/igwW1VHq/nhsjzbbsyY\nPP955TZIVEbY1KNiswgV7+dc6EHMscu0veMlqUxVIDH7uFK4DGPLazgeHMQc\nRT2ORYGLa7M2HHOUaAydHljzLdAsg7FfPibkBDjqnYEp8DqACKo/xWkoITrm\nupOKUxc60slU1phojAMPset5WjFat36AmxayhzDfs5rCh+3jfhiivCCOMxOD\nx1KY7dQ76xXG3uU5/II+L4vik24AGRMVZ/x9GDML8A8VNcWrAGpgdA9Bg+xW\n4m9HCOsidcDQJ5cnOm0dB+FHFMVQEdlhvval0juKkhQ6u1M2FZU+CqN8XkPb\noRgS7ZKAnrJ3ipPyihYMB5y/A+DxSwXyayITU+t2jlVJCfbgsIKeFleUWMfF\nB7ZswuI5RhiPbvFKdZf0V/GVFCxDrMJhM+jYMMtuRX6pY4/DOjmOVD53Z2u+\nIdQZClJa2rxs4z6pkKVUJz6pUpdQfXpIPpjjXpjF1YyuJiZYwb1AGaiW+8Cf\nJ8IQqnMC3mCNHQlVyrd1vkpXrPhBcHgTRZR7+skSVQv0mjEBZwDDtU0ZElMm\nk+jMKfpjxhU9giBWA6nOuIvQTbu4gSQFvM/Cxd8DlgpFbvAtf0uG0dO2Wj6l\nq0fkrN6nyhqH0oTlZJEd+l/Xy8vratMhKFChDo9XWuvBWtpjgyH3g4Re1TDK\nGlkv\r\n=+JC+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1f25f238ef5efe66e714e59042d58fd2a5334534","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.88_1617055988591_0.34132578805708214","host":"s3://npm-registry-packages"}},"2.1.6-unstable.89":{"name":"aws-amplify-vue","version":"2.1.6-unstable.89","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.89","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"elorzafe","email":"elorzafe@amazon.com"},{"name":"kaustavghosh06","email":"kaustav.ghosh19@gmail.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"ericclemmons","email":"eric@smarterspam.com"},{"name":"phani-srikar","email":"phanisrikar93ume@gmail.com"},{"name":"sammartinez","email":"sammartinez19@gmail.com"}],"dist":{"shasum":"9333fdb6d02d0113b2b559dd0eb6017b8d92970f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.89.tgz","fileCount":47,"integrity":"sha512-30IHjEojhu2SdXo6Ki5Yc/ptMeO45MndvKvaPAIMtQIRtI47mnLCr+fNnxGG4+nNYZ8VpxwnJpAxgvLrrL7tRQ==","signatures":[{"sig":"MEQCIFqCMhjHkxsHr/khUZk7C8EdYFRBe24L5hAKZNFawEnPAiAj6uKH1B0hCkN5nj62jd36TEpHDr43497IejovTDQ0DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOVQCRA9TVsSAnZWagAAKDkP/jwA8C1xmvAJ0CVxs61Y\nSE2qEPlHQZFz9VRxEi1I3uaaD46NHs87IgNedYyFcVszK5xwKkPzTV5fF2N/\nzBj21cXa3Gk4w3qeiehSY4J3k4xiWJNUl7tt2lpMvoL1NQ6Botz6gpptnKFe\noeXcD3/329zI9vN0x8WfprW0chAXYALu6129DyNNenkax4Zr9Dab0g5/0hqA\njSG9fJjkT7YPG3p5DPW1bMZCoYEOkzAgojyyoeX2aXFTl2ahXVCW2XDsOnol\nGDt+7M8+OUO0rH5NLgJYPuox/d3sqOwFd3LjMVg65VJexFJHQAnPywPsCxNe\nzHOoAx3/cNgLDDb0aH+y6dEP7m7HQCmvO33wf24iioadu9ubqEjNbpeoT/CP\nnMsu1HqSHX3LPsPoHUOSNr1ubhdMB5cq5I8JEvd4mpsg7zdj5yXm5BKD89f7\nRfl4AxA+9cFr6etDaghClhr1FmAj/Qq+r99aj0SOxn5dyZKsf3b5WBZ2sWSh\nCC+D8UzGWNfpaPTD+jlM36a8v1T9g+2b2AhQ0Fo99dBTSwFRHvzMee0x/O20\nX6l8onT0aPTT2MbVzTeVO/yoex16F9musEs9AOTq/f0D9uywFUu/2bKxUkWA\n5mFURtuOWSpI5O7Y240GkHYEXUoNz3dQl53ED6TNb4PCpUKOQB+NL7aoXeDj\nSB4e\r\n=J4DR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"99d3c55e7da590342bc4689dd1fd00ecd5b8b7ec","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.89_1617225039540_0.9398542934850673","host":"s3://npm-registry-packages"}},"2.1.6-unstable.90":{"name":"aws-amplify-vue","version":"2.1.6-unstable.90","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.90","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"27f8c11d487c6cc59e68d9987a0336ef9fd4abc3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.90.tgz","fileCount":47,"integrity":"sha512-taDHb+KAyeZC6rimgbbDws958JVq7Lb19DJexgI2yBOcV8awsgzpj7sJiHpqVhNwSsItO59C3AHP/LSy5xl7tg==","signatures":[{"sig":"MEQCIBu3N83P1hX0whQzOSEl21B94ccxFZ48/CGmqRFYx2SkAiBybu9CaMzlCK07FfHkGhgEn3a1c6OUgedkPqRjDBKlqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ0O9CRA9TVsSAnZWagAA6UoP/jfT1Ze8GbigwLXdOCHS\nMI9OdLEDFy/iVNxsvzRF3GMQabB7cToQ7C8Y+MbraEgcnE0oK24FWxXqLITQ\ncHmkKF4KVxkKka4R1NsjaxviZyq9f3/9WylXg2ASmyrLzOLjTeio5rLXCX2R\nVO6E0HYCBgTugQb6U0q/qAT4HqMDBowZwChsvPPot0iMz5fheouyUEzRAZkc\nz1FcLeAOVkXxJ9CzXwV+3et2ygMOChDEQKcF91prb9zkPjelOKcr6/K4g/Ec\nSEquni9usRfVD4V1t/q+oyc2CP22CrJljbsUMZfbCSnBqOB7cEXPaaWBxF4P\nlOr9CjskhgLXm/5AGYAqAzh6hFUO6lduM/hUJd3AhosSmMpH1VKo3ovzzyNa\nWcQHEZmB5iyb7F5VBb4DJDzlb/qiqRz0ytg80cGMb+h5SRPffkdl7Vj52TRa\n05rLmJ1u1YHednm2qS7q85NQnL5apqMiL2SxZhZ7MJUOBVcYgwSc1d8KSFD5\nq6+brCUTsa+Rd9ern6fxbJY9V6QfYE1eYLus7qfmihrnynnuvnAAlLUmYtkm\nA6urHCUbXhQj5z/3ChUpYLCD3+ULvBgNwnEQ8PkC/AUP9adarSIthDXWgCjD\nHVoYqbPqnTsdUHeblrpaxAKLwjZnJqnl/ISOySkdgYltTSKUgujYaJie5zuw\nUpld\r\n=vtCl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9fe6b7fa58aadb061a742b32c6a9cc1fd76dae6d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.90_1617380284797_0.4612755558872792","host":"s3://npm-registry-packages"}},"2.1.6-unstable.91":{"name":"aws-amplify-vue","version":"2.1.6-unstable.91","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.91","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"230b43755922b2222a90a132470d7d0299f221cc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.91.tgz","fileCount":47,"integrity":"sha512-dD92LZrrYn0qD3rRL91h01ls3fax6UwXqB5HD+ccKglKs5L45Vd5qPBk1Tojua0niyn1QIJQmrtF76G398V3sw==","signatures":[{"sig":"MEUCIG2X64op/XZgCjn5J0kvsG3OHsHrQ+Slq1QHznVri92aAiEAqzKZnKdNS04mXjtAge+DlBsru0SBL2FRN57Rq3J1CTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ2bbCRA9TVsSAnZWagAAR2YP/1aVqBCRhIIU1UXTQfqP\nTs6DwqbQc+W03z+YsTAl9mWGY/IF4EZHsNBQOIVcEQvep+UxanyJMqbzo9/U\nyclbZWs3qZ3iMlUkWi3A59/Gpy4ZVoVEexjGV6aAODzSFOyZXX8XeJWP9e3F\nFw9DjNgN2ZQYLQxWecSrIYG8EQswhXGrxh0+kiuKd/+HNWZDRCmCSyq/6e4V\nZ0a80ZYOyu4vNHTzIHRnGH1GiB1RL165jiKj8CwvlyQvythX8FGJY39vmQJ3\nbKWxhBNdqIOrlEF9i46J5GdqZEjkAyFXXd439GKKb6Irlg4yAC92YsI4ABCG\nAPy5tJdIRY8GRhlHQa+SFojQc+mO34n8vQqIDcDwMFhOX5jigPEH2q4AehrT\nBC/ItAKTV5LdCTuo5XmMgr34jrVmJYijmWXRWf2NmN8eseUV/nngefls8KmC\nAGW79fPxVcuI6N1cNiMPNh6ihV5INXU4j2/Czp1eRBjyruj5t6FjMhdrcXnC\nGR5lKLA3Sj/77MB7XIm+p4wLWH/tX2thR31+8XTzgQtoZiHQan2nyXi9cHDM\nfWr/ci2F7aMNd9aOxHOfrLbOtWeHuOm4bFFtJrG1KrLdi7G88AJjqKttD6ff\n4y6Z2cECsYBOGVuEpga7uuc3SrvaVznGgCaG3DwxiFyRpc4wCFRXO7xFzn9J\nOKGD\r\n=vPI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"df95ea3724eb6406f64b03f25086cd3e8644cb5f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.91_1617389275130_0.01797691025665693","host":"s3://npm-registry-packages"}},"2.1.6-unstable.93":{"name":"aws-amplify-vue","version":"2.1.6-unstable.93","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.93","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"e48f9289171fadfba9889aa3cb49b2b7d69b78cc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.93.tgz","fileCount":47,"integrity":"sha512-H3c9LPIO6r4zFydiN1+Di90BKym+7Zf473tGaJd6b+NyLzVAbF2fMcX+G5QMGyX4Cyoi941hhWynZLAH7R8g+g==","signatures":[{"sig":"MEUCIH91M7M6UH4DPBd8bZAs6bBva9zAIBr3a/7BcR+cdlvTAiEAkMW6KxUxW95zE94NphvWSn2FH59phAKnBT50kR4OvwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga2tVCRA9TVsSAnZWagAAkAsP/jPr00bC4SXlv485I3Dx\nDbEE5fPo+UfF9MVVUZp226RDGN70JYAtrSBf4ERuSzZCtumbso7Fh1NSlQfc\nueW6e79Z/Nh4GMCT3l34OQbC137k7mhz5H40v4FrC64RSs2vXAvYYnzah3u3\nzo95vZkmCZTUK3sh6W5OsVWyYv+hQghvzLw+U8GJibDsy28xbX0Ov/24/MZX\nnRLdowUv872kBP4SwsliG642km3R3wjrf1OEERDVwQh4GH4fz5/JTqYV25WK\nIJ8JqLh7LN1yeYSi5RPZInCNUt4AJu7teb0b7sjA7539AjIKUJJSX78iA83V\nsnCdrtU3DKUJTUYAAs36HhoCOxGWHyu4WBYccHGSCuJwc8zoPYfVKyVdLWD9\neytlvRwwAEKsyL0fWoAJtNLJ86LPQxxUV61+Qx7OZceZlLZvMfHZIK/uBsDQ\npl//af+kbR/imL3j9pbVbeRco/c947IXINoYTnnMnXKz5UUN1hcamw+dN9Df\nqTXGSKf8ZZVpsMdE11EGQOM57cWL1QKiHKzwQvQbwf/+/UQOZtcv6Amu2+uI\njgqHFkVwQJuaSly2Xw9+xVfj0vSe4vX+2+cSX+P04JA8XpwkbJHJTs6ljqpw\nwbpUNOg54iw+aZ4kEAqJ9VJAVvqZSywWfJSuI8TgGk00YOQQdDfvKhxLKk2z\nJOp8\r\n=Pzd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dee1971285682170dc1828204273d34a69145aa3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.93_1617652564614_0.6737577897683433","host":"s3://npm-registry-packages"}},"2.1.6-unstable.94":{"name":"aws-amplify-vue","version":"2.1.6-unstable.94","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.94","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"37c9f5c284b37d400f67c90e079f3e8f298b430b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.94.tgz","fileCount":47,"integrity":"sha512-G/QjG/Xlz/X2U/uocPYKFVnazqcbmQarsW53v07ZcCOkFnsmj9/2pYNYN6DvIhs2fW19qXP7Lev+wwXl4LO39g==","signatures":[{"sig":"MEUCIAMVtakruWGhtKL0hCYZOgwFxTngVE+Xw1nMciTqyWv0AiEAyXODrFvm5EPQv7VCsgdfxYZJT4nBktuo+OG4Ra8KxSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga3wPCRA9TVsSAnZWagAARWYP/j1g/zKPkDAAwoWGVqMY\nIPtT3NDRMuMYF5zjID+G9s7QWKDde0B4GgGsja1cRgNy5bWGCmJrZenqohON\nU1U/+bO2MrchFFP55nWsjIqA755X3ajmTtBBq12tVlLep8NrDqp16NWJuFEm\nF4q9iQBzuAbOFcnDGGrVfmbh2wkKrJq9zMT+xswvFkthSFF879vhUeJ5ZXlG\nVSC7KxZ+uKNHwveVVm/TLcwEFazBavUnoUSGNSGkyZkTYeWc3iyTXziDD8Em\nlgEsCw2elUvYCl9D3J0wycHNfjfKJttLefAvTwnDcrgWkRmPiaZ2W/hbfPRO\nztbStCE64tnrco0iLrGyhi394ooy4Oi4rgTIPiHHA4qV+y+bKSuyvaoL85TH\nZ42CQGjdsIPKMBiDO8BVZU2rga8nwSik8/21LvdwE8t/oFgvTPtFSXQDHGI0\ndlT6qg4oPR6XTKdPvy8LeEuk+RoXiM5pd7eF3x6diWYAtu3UqhXLuQhMUo22\n+RnLE8sX9oaMQH7jhsSK9sj8eNE7+ZLkhoOuu8canRoroT2sk2gOzyrVa3Zr\nlo15kdoHLY8+XFRmDejCunjiGF7AOFHQvuu71l0WJ9F7MZAquhUW1oXLQFy1\nF2KCUZrckauD+8dZbj6iLM0R+chr4PUVT+rpxdW1DgCXozEBkGqy5xsBcLWb\n26mg\r\n=TeDq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5a8ea9c5b736e49d0cbfa06e0f0e9405a942c48d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.94_1617656846715_0.8410196240563701","host":"s3://npm-registry-packages"}},"2.1.6-unstable.95":{"name":"aws-amplify-vue","version":"2.1.6-unstable.95","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.95","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"24612cc6346ab84a080bcff8614982a3ec96cf8f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.95.tgz","fileCount":47,"integrity":"sha512-Nd8HEWJK2dnN37Tya0P83M0IJG8tJAYPL0oqP1kbaY3HEDokymDXgVeVkISp4w7dB1/Dd9DgpIi2zo7BrBvYHg==","signatures":[{"sig":"MEUCIQDsRekTYKiFtNTC7jlR6j4CcPYp3+JKgqXqI12Suer4/wIgJqzSdMJSMFI7sbk6S/LORVEjKpX86RcaQ3rybO0CDzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbMclCRA9TVsSAnZWagAAJr0P/2b96SykMOSB8aVqqXBR\nSCUpzqofaB7+NTUQrKyXYfoDLw0dH410nknYaMsNxo7Y4g1Zy3N3O3IHkcZm\n0oLUfexDaVwvKd7WQcTcUVwq3Vp+Nu7FbfjqBQDaP/1Lbw6VFTqlJWnfwpXf\nvBZ9Pi6AyIvXptCQhHjhbQbvjjBoW+3M16BRquNzpNQKzRJEld2TyAyvkASh\nA3Yp2tVeNpH9VcnjoZRCyJoZm9+tUCs0qwwDHv2TF0/C/C5bcxOdTiOj/eDd\nOMcJfdPW2WJ4uKGk/B0hdsPSIo7TzEq4RJPiMccfHLQ3FqYTunhz6SN7Tp2l\n91nOuIc3+PAJWLV54J3miIFNeyb1zZm2SGlgj1QUUOfmEUfxotxfGDPebz1o\nOgD7DHYkxxpGvKP69puzy6GM9eOMCnVIR15bLfxSVxGR2xiYnaWUb+pb8dSo\ne2bhWEKGHAwS2r1DV37qLjtPEOD4p/kEyJheQNYQHfwADhJZHo9+9vvTVUs5\nIfIuAsd0pLXtpnlTvXYzW6T8lm7HsBYdwRYmYG4Vci1sDyhJ+9Rx6UlmJK9G\n769j1tHsQjG+ampp6f9VdMg+iUWRfQcG8BI+rkzViX7wHbaALn4YfnRG0ZGy\nCXN9JO6wbtrP6AXg6LvW3blo3Q1tyGHeLRpaqa72X9HSqmrX6g675hljq0Pr\nFPIR\r\n=GacI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5b1d1f4dcb30ca90a9382a05bd1863f857a7c982","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.95_1617741605220_0.7658702741164971","host":"s3://npm-registry-packages"}},"2.1.6-unstable.96":{"name":"aws-amplify-vue","version":"2.1.6-unstable.96","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.96","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"e4ff6485b61cbad175e915b893a2b81e3c824a5a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.96.tgz","fileCount":47,"integrity":"sha512-Y1Bx+KUtlRxZ1LCusd6c0GivyfuOU6oy2ZpuofN4AAxpB3BG4W0tDP/cF+fY0D8f9SaNPzlkQnzXjtNLmE/S0g==","signatures":[{"sig":"MEUCIQDiqZ1RlI2ihiIkCXaQyHy1c0KT495A+Hu9VBd2VLcOTwIgXIojmQJCswH0Le9XEN4VWEi9N/LTiTO16aoYHUrAco0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgb0CRA9TVsSAnZWagAA+B0P/icKL2A9PMIPOFxrRiDn\nYBydGqijH6VA41DrRSaUkgi+JcW1KJlfShEpSTkNYTNumMfsvaMZuiajIs/D\n7xo3Y541nZUZRnENdOZQlf2rwp7Um7aoOkloccquc9DcEfPr3FiBWLqdS5KN\n+ukV0tS3B08MPau/xde8K4RP6/qbPqLo6gWo5qj6gw3Vqg7MQFou9QPw3b2m\nbQQOx/DQrw/Ofzyino0DDnVfjWmWFFNuyxh3I0lZPen/GBiN1p3bGdgjgYu1\nkI+k3BOiuhCdSHIbC8mGxLPlVWLdCxdhYU+/bsCIoSnRu4tm97eaA442laki\nFkEYIiYlZIAQsMW1ZDXsK/aQgiUBuQyOoRUBEtl9X1O+goUdXCGgdPiTLSsj\nfy+I5TB6NTdspiK1Nq0jtVmD85jVS64wf18qqx4IspAmHoEQ6WDe78ggQxZq\n2ldDzHx99j2rQHthoTBfU9IMpgY6KIUWAM1B7E5SRdXNRABWtvtq9618YG2g\nW39E3u+R6AGGTROexAu+3flTdPuwocxCLkVKXSoUVBPMioUWJuAHGilCT02A\nWgugyawhQKt0qyKuY+ijg6fPu/Fw95IBAIjH/QCCvjvwyaQ+KXRoZp5Mwjm8\nLfcjYUwvN30WOv3Z1LCYaFUa7CnKAyKw1qNRfWeuYlfe+BOflwMM6mgcrjef\nlDht\r\n=NC87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fb28a36efc3a02aa7d677839ab2a1866a00e8f98","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.96_1617823476434_0.4849534856611628","host":"s3://npm-registry-packages"}},"2.1.6-unstable.97":{"name":"aws-amplify-vue","version":"2.1.6-unstable.97","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.97","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"ff68aef22a8a4ead975ccf79f0ee819e7861add2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.97.tgz","fileCount":47,"integrity":"sha512-m0R8BHe0VdDMB9TFbcjKfxBPTmzM7pD/c9cUkvMKinutJoNWS3Rq1vvEXODkUHIxwI0wvnWve47Vv9vt6ii1MQ==","signatures":[{"sig":"MEUCIDVdRhhgwhgRFRhjqowJEpTSsvqj2Q5ICTeUC2XBa1P0AiEA4NYf5ECclzhXg39tsQvT28CluZNHeoxpZbu1dcNX4w0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcHhZCRA9TVsSAnZWagAAWkIP/2O8M1n0BNCaLFJN2dnj\niD0pQkHPq3/X7PL80RLnG/oQSH6MKZNQZp/tpg4m1MBoRxNsE5jMjeVT2KRI\nEPphfHZQAGXdxanLgFiDOlACR4A9w6aFGYpqB7P+5xWX654WmPzs0TbKD2vA\nhtP9HIyxq82bQtbrdYoNQDi/xxNgcv+extj9dCCiu4QZ5l9T8nIC/Zl1HynW\n0fCZFhxrvQZWrssrzKwuEkW8TKrgDJZJ5hC4wDXXZqGa95ZmXXVW9OnCBH0i\n8YqFelNgpRiWszlrgMfA0bzMrXh2uBE5nSrn+A6CleT3su0RB6At/DfkiuUz\ngVjOC0xcsTkurn2w47T9rLrf0xDdWJef2xUgMCip+Sow9rq3j6otwW1PNe64\nLEQ/hiWTe/TeZhaZhGaiLLWh97eZIWspVMbX6zM5MyO31t8c9+8BxKMVD/jN\nAki4RA0xJXZ+AjXVwqS9pCbAt628+nZJx8aeXqi5WyLrqAOoin7/mficO/4I\n2Dv9XlD/sG6wWmP6PlcREd7DGjgkhvq+7qOfzIJetTdjxqVNHA4QqWYFrjH8\nyhSYeKxHASN7TLSGDiUiH0pfuVFxB+6YiSSN86DfqgesOmbN4G6eEuHM2Sop\nQC6cY8b+L8Da5FPNUdMAHiThhJhMNKq7UFUNMDBuCFJC2VDJ5PQfvBarIPa1\nT97N\r\n=6vpn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bfd40cf4edafa654bc3abddb526ca276b1a90063","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.97_1617983576909_0.28262425080034714","host":"s3://npm-registry-packages"}},"2.1.6-unstable.98":{"name":"aws-amplify-vue","version":"2.1.6-unstable.98","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.98","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"5aad3538205455b354334f6198245c442a547824","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.98.tgz","fileCount":47,"integrity":"sha512-UliUDkBP5W1xJ+LKfdp9AKyvLWKzfP3VqbWSlw/FBmScsdvT4mLPrKAWqr6W8WvFlS8jxUYWPlmaEkeAeGXkPw==","signatures":[{"sig":"MEUCIGVtjjdo9v0VkpCsf9NP9wQIF51wngOK7x/mb1HmPr9ZAiEA1Ep761UyGjkNJremXFjXrNqr3YewWqj4gp322TXPrko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdL4+CRA9TVsSAnZWagAAUfgP/2jSKTXuziZ+RvKe2agH\n+SCuxyVnhLd5zRhzrsKkA+td8ChABsOZ0pOwsdC7BhDm+MqY2aXCrzIPP+Ic\nldELtdfDq+UvDDpevjnFWo/UGSchBs7LEbFQ/qWqXYeYoKKHC2tsHWrhqNxe\nZfQi6q8WdL5ZSyNXgW5K5s/zOrnZ/ySQ5hEhmu2inSJeRR34WfbQe/7LVwBR\nDjPSUE80KRUxm4uaY+x+IJJtDebSAjhrtSeGjUGUg10ADFTu93I+wEi1EPOv\nStwhFLmbZAtcdgvzLwJiyAKg+hOeQBuw6Oy3GRrc/QLCcOhsGD45ljpQnNq1\nlG6Ek/kq28KWLoOjcNQJ/rFmZj4iJ9PX+joPqohTvUbxHNE50gvneqYU+2I7\n5S6FvrGQZ4EW1ltdbENEGXygMdenLFxk3gVo029N1rjeqf99HwNrJxAcFwnP\nIM8BllmEa3C4AcBrIiDpYscRVttXFNFjH4aIsNhcMFvkyaddjgNmRumhl6eu\nkMCXCVen1cbPENWEFLSlX+BoJFaxokjNjfMm8Bt8Hm2GR6Kqg3flWIevorqV\n4OWVfLmhsDmaCRcY9UZEYeF6nIEbiDuM1aZ+EQsUFheoevQZEqkIuvS2ihV+\nz+OLyWERMsJwbuboaWppQc4ydpAa9YW1g9JOWIVTCtL+uF17tQEYI7OAFnzc\nQjtb\r\n=HaE0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b93211e4a424aebb705c66d215beab05ec0004ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.98_1618263613979_0.09004205444105118","host":"s3://npm-registry-packages"}},"2.1.6-unstable.99":{"name":"aws-amplify-vue","version":"2.1.6-unstable.99","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.99","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"e509b2104070c8ddfc9bbd0334e95b85ce8afdd4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.99.tgz","fileCount":47,"integrity":"sha512-J3L6J/caW8gkmhf9CkCsxMB6wozyJVUal0SZILrrdr1wp3C1GcHapZnMzPMtAgfu0Tyov5N2Hc0C6yVJmX0tiw==","signatures":[{"sig":"MEYCIQC4ed3eGu527eTMZeTz6jC2bYYQbwN0IiDQYN6vKyR+5AIhAKU3Q2TmmXC91dejc02h1j2SfLpw33H3bfYioWuc3ZOW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdRbwCRA9TVsSAnZWagAAki8P/0anvd5r0kfowsPOxiCU\ngaz/fN8kzAVX6cUyB7fgvB/NrOQwtd2FOYA9SeExWVZp3jWVfLuuFviKqmIF\nh0xtj0Q6TziiMjCqsccn8Bvo2TvRwU2nq2qK4EdwC89OD53vZu1rfh+oKtge\n+wJP9GhHlF/2gPWnb3zVfpAf8Pfhy+8Mr1XszgHz+P6lfSQSdvJVpX0XwfFX\naLwk1cLzqpIU7AI3eKtwPMzyeWzZght6+U3hW0ccrx8PArbQ3JEpITFr82M8\nJJ6lkjQg9q6T4mZXo2w1isngWF2ulA74SeHk/LkpT8r4eisiqXEVJ1MaDGIv\n+4oBnqeYAgHNZtPVdXtB74gWRO9ZpXIBZI7MEsLyyIKvDO1jx7+o7l3S+Di0\nySvrlnPB8CKH76BiYr+f1pIvjiax4vQX4TwyM18R9/xbH/KSM7B8Ef5OZAVS\nzH078YjYS22jaiRoQ5RBGxlxcWo4wqBX6LCWKTZULgIvqewjO5UFRKk/Jd4w\n1VtlvoBE7SXTqEpNyF43k8R8rZtzAPzaaMD/sv9GSLCgvnGJFFmCD8L5TsYC\noTCPDBmJm1ZJ3pJ7o7ZLQACpeOplWGbWeNpnElhaMx/FulnLFpkxRiMB/TA0\nlmS0fFRZZ6YnOwJ0hcyr6vpCVkmm4sNrQnFgjXLAGQ4UQ17m1PJDJSb84W0v\nQT6j\r\n=wU/0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c4ccc17db78521d8650fe91fc77587d9ddfbe162","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.99_1618286319865_0.12018011160517883","host":"s3://npm-registry-packages"}},"2.1.6-unstable.100":{"name":"aws-amplify-vue","version":"2.1.6-unstable.100","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.100","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"db85a71b1c8e93e0fce94c882146c29bf44915e7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.100.tgz","fileCount":47,"integrity":"sha512-huti+e9G+3LLEFo3WJ72ZRIY2J8djG4xAKP486m/OeWO14dpJFJ/Cq7psyK76kVDl0QmjCFHmkqoo4Tf/SekdQ==","signatures":[{"sig":"MEUCICq5nrrlpL6gfqGeTMTfJhPkk/RZHTs0WJGrIL3hjrsNAiEApU92AnoO2A9nnrEx7uOpueKzFZHQGi88Hd/z+BCurbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdeCPCRA9TVsSAnZWagAA2t4P/3+rp5IOR8/qnWiT3mkX\noVjM0wnIo3bED/R03mJz8UYHHRPBPqaP1xFWDIJM/Xk49bv4yklXrJdzB16N\nFvBFWBthqDWGU38G5MPDq1Rs1LKcHpewFzf0YrU3Q/l3zhWM1KNbwOXDa3wm\nsQh8HhRViEFF4InRXSrwzcaktApNEuE/iwNBCenuoOfwWQFprJIPcR0DpAYc\nB7PorvDFNGZm4j8V572Cfhu+OGaLjg24QDJ1EWL58uGJbSb1pZcOREDi8uTD\nhgZMBsbF3yiRYvQZcbzrVoEjuSkAE76U3ryB1xvmmLyYVg5sQ2MDPRtNVZ12\nsnz0ltvSgebTo7kOQyEMzqQ1uMqFeZQsi5yhOcSyY/xMkVlBjaYiiTQViesY\nLutzcVvL2lcIrLeDnNynjP4OxBgT9E0HBvzJ3w6TehmSfTJtflirWMaQTrIy\nzRalmMB6niqZCsh5fPkxgchBIu2MI3JVm+Inn1D8S0//tAF5O8ptwAA577XB\nGqJw0tk8v2nSGjdY8emwBd2/MIKc1/ta7aHnRsLgGQf4+mRZzKCkgjjLojoa\npwZCBuk4B43jJUyL81kwJT1RXy7PCNDn88w3C9rTzPbRXplH+O8kDemog3Ft\nmfaQTeIT8Qt0RW1A1MymXRQmtdTrzwbk5DmXnz3lIDGTd0K02ULEZjjXemg7\nI3qF\r\n=BUFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6d0b67c4ee4e2275707f462a315b9c8ea536b91d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.100_1618337935138_0.1271254516067417","host":"s3://npm-registry-packages"}},"2.1.6-unstable.101":{"name":"aws-amplify-vue","version":"2.1.6-unstable.101","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.101","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"d971fb0d2a0946e239191a2c0b22be25ffb87be2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.101.tgz","fileCount":47,"integrity":"sha512-JL6tlRgwpx6FjewHbqJRWruuUw0jObqByhSjhxcgSZuV3d2Tq4iECWbjxBpygxh6n9zShgySYWQW2RbWyirAzg==","signatures":[{"sig":"MEUCIBGRXAXmHVitRpL+874jERQuSVA8622xIZ3YB+/GQe6FAiEAxBMETFlM/pokeh3XwquCsZDAiF1SIPH1KvurSqhoXZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0ZnCRA9TVsSAnZWagAAxvoQAIZJlN4437p+6v5K77k0\nMD8jmMIFR4XOKb7duw5g1qBezgWVsMs881cauFbEIji4cHTR389KZuN5ESVR\nkQfYCvQ2/mI625jzy9CL3DBdXVDLkOUSwrKypOzOsDyNyjk4jqJjgBL801wh\ne58efP0pOVFeCafffbpyBL+xIeVMy8C4FNPDM8uXa5LWmqBCdyOEs49monBm\nTSsfG/HzJ+6ENcSFYksxm5zy3qN/YolY9ACkYoE1/aJR5x9mU6z0IRLblgVR\nSrzGS9FwYP85YCtwUgiwvV/ZamXBLWFunbEQQyexYmpBcZtqNs1/066m+aHZ\nuTj1SJUIFzWqVzlPdajJAKl5w4VKezth39x0LlvQn8Cb3blxGnjBe7XONlab\n/A3/fSlgyIlwzDDunYbVKGPjp68TD0MbLC+n0YXREoFClisIEmNMZevqQLSy\nnzSjYhIT0NbJLpl/LLEHS8kpI5YVHQ882UCAHBbSh6BMNxAmLrWbTWYJFEd6\nsYkuuASD1XEnR0cKSYI6faCmyRZ481h0fuZIB10OMzbkIQhPcpJby9C6OWam\nhQupqHg3vOCBZa51h18NHNsVzwsEDuArYYcOu5+zLhwSTYyjRcyb5pNG8RGF\nWYwXG/9U3hDPJWVm4lRyGFd/OVxZOiTWybWr++a5N6UZ0niYFP2iAI1DaAds\napgt\r\n=kR52\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2a72b802c9c383d4691ec8ecf992c239d443b232","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.101_1618429543043_0.6755848995454006","host":"s3://npm-registry-packages"}},"2.1.6-unstable.102":{"name":"aws-amplify-vue","version":"2.1.6-unstable.102","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.102","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"044c060cca4e7ce284fbfc521c68fa3c8d084874","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.102.tgz","fileCount":47,"integrity":"sha512-iFcl0M6qdMGz6HWHHCDEllJOcTltT7Gpy+8v3a99u3CxLlzU9NELUvdQRgqqW2WHhY9BuccUNLnOMUgRd6TT8Q==","signatures":[{"sig":"MEUCIB8waHV5cdZQ9cl82R14cJPLyiDOhujOVh3Tj/Ee87IzAiEAwdlLm8fZCu1wUdUWFzgbyLG7XUt1DXVCJ1Jy605FS/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd6lcCRA9TVsSAnZWagAAb1MP/3gK95oO4pNDueQOmzzC\nZeo9ADRpWMxJJMePDTCdPKi2AnY7i7/h4Uc1OR3IquF5yug7lFK46ZuK1FEm\nhYS2xUJ2OAmPXZoKHY/JLfNSALyJ0Qz2QdqK38QL8IutmH4Ak6ka8lq9cZno\nBraMnC0O4WpqnrsKJw6/kyCICOWeEb7hQ0abRR66yBMgjLWZELzxbgPNbYy9\njTfydvxKhex/4KSEjzv3X282nIVPABbIoyavFgp8zBBTstkvDaiQ5xlsl0ct\nHgvAIIdbUNphcuxvElCuFqGrxapQUObzw/b9MgzwEahN1tlofjCnFTXLnQL3\nrvWo70XRUUK4WHoSaFi2ZfSUfcoYhtfESzP9hDt+6pgVdArUQiU91tGVBjHu\nPH4gW0/KVIRYdytKaI+VP9NvmkLBbQ0E9HLwH2Ld3u1MBDtKMo9+iT+Xl2dW\nMpNAqZjvnCuVrVbsvXxT87/xRi1QXjpiLvlcgpc+dAx6XOn+e4wRIzPjFKSE\ntnjPtmMQODiCmZzL6aILsv1d+CnNzxT9JpdSJ1/r3oSAOmUv4CZzDQsbDpjx\nOwqe9+V5TRi3LHeIiY15c5scYR6X+JMP4lGI7xWuvJvyzBt5GKut20sds2F/\nsj23WqvZnuvX+HAZdqM5y2jWEte2j0EPNR4WmJJUlLowIbdgWTIq3NRch9uU\nuYL0\r\n=6ia4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c1ce5ac25cf79cfe649ed5676ef62ef7f283febe","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.102_1618454876042_0.9640000848959582","host":"s3://npm-registry-packages"}},"2.1.6-unstable.103":{"name":"aws-amplify-vue","version":"2.1.6-unstable.103","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.103","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"586f7eed645975fb274419e6c4751632590ede70","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.103.tgz","fileCount":47,"integrity":"sha512-S5HLqvl4kJlN0Cj7XShbXJCu16mGja3gY0VxsvnJa57B05mrqNkg62WF6G/cCFNqQm8Ab/gpgHuKYoI0NTO2Vw==","signatures":[{"sig":"MEYCIQDbGTUq590sPHPgRTLhzCORosGl0Ok7MJHDXm4CzsAxMQIhAPm+tIfFMS86ocQ1mig1iA4+TJm1ELV4NrMVVgEmtNAF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd6o3CRA9TVsSAnZWagAA5KsP/jxnpSE2si3fe/u3KFlm\nEwBKUP1dQFounxGsOAyzlZQOA7ACi5LDaZWbSZ6Q0B/RJfanhUy0VIrierXt\nguka+a/GrpOTnpbwPm3N/tE6Zw+k/9OIVFlSYnGaUgPRI0dPZs7NAOOho05K\nSparuujujvE6vRgivQQP4Gwb3cf20419qguSfipH17zfDq7aieGqe0MfAaUT\nHJw3be1rHeD80oJR0FxevKmXzcWR2CNm0ctZNGnZtLEvrpC8sqHiIz4WRDaG\n4WBIpg6ocboM4Tu22zMNX7yyEGvxws4W5kFMXIpgTkJCwJ/RwHZVldVGdOzu\nFwrZV5XtFAIbz26HaG5fGmaa73TEMGDDJ/rtH6Y4n5m1Qbu1xcigO+gZ7uMq\n0IlKatwQ4OFEzBXh8FZpuxiVDYRt3hUP6HHI8LZ6w7q/5WN3+yykA2L+v4hG\nxkS5J6VuTCLWrldK4vvqYoahBp+tl6pMkmavu9gsIsQdl7JJMjwqGVI7QmVq\n65r22Vf7n67oXxuTSQQZy92TeCLYEbiTn9eLqs5C7pr1tO5xwOSdLq+IcF6/\nsi+tWrvPGEluE5wWWCYwBq+qUmkjgnXMrx0ElygA3YJLenfuJZHGy/vGyNDC\nmmFYpgS5jX1xD6+apxIeTz5HuxdIQBKbkGOZV8MzMne3RB/6ZfV8VfHBTQNY\n+z65\r\n=Y8lZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a15b8f044597da68442e4c51e67c35772aed1d7c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.103_1618455095360_0.5829433053315758","host":"s3://npm-registry-packages"}},"2.1.6-unstable.104":{"name":"aws-amplify-vue","version":"2.1.6-unstable.104","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.104","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"d46d0960a54cf03c67056ae71fe9900cbf793648","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.104.tgz","fileCount":47,"integrity":"sha512-cz6wfeKY3AIbtjdmQRdjluWn4hXIitnZdsR/V3OA8THDTs0Q8XTmOoB/jnB7Y9cKH0flIY3dtRhYdU72+q8inw==","signatures":[{"sig":"MEUCIFtA0/KH1ONav7YSlE2Hj5ONAKkDu+5raRmdkgGXoZ9uAiEA5FexFq8TGDf2eEtYXlw2B9AWnltr58MIc7vuth291jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeImKCRA9TVsSAnZWagAAJd8P/j56BjxuyP95BwBLU38J\nZYDY+R9+UoNst4SdAI16D19+pJuSUnrcTdK4ZtEJGl87ojjZTEjiGN/6XAz7\n9dJ491CCqAM4Jn2YReDsyM+OXPStxpj/+9fxtl7g4lvKZVmBxAdL5zOfPvFa\no94uHHtWZMNQ3Dn0o7NRcg+Nlk8HXt8Yl0s0nqLeslRxX1NwGyojxuKh9WVG\nve5kmZ1RAALAkoWQnVOfxeNpC9qAerG+Ildsnjfqp+mqPAtwOkZNPchvSubw\nQ6PMBUeX9PEhUZm4pE9Ir24OPH9FIohz0sZsH/GPWJ/59k6Kgl011cT4Vy0N\n+KMnSgWL658/3KLW1UNJGKkV+gktk3pqKQNgcnR1WtuJ6hndIget4WwJSR6R\nf0e/td4b9EUMYniVA4UFDXie16nl1ZMVB7SCRsuNuL569kuWtHcHYP8XmnKw\nMOBfsowWqNs+7L25/wiJWhtgpb/5H91DdHizi4Wd1rW5Voy0CGUxAUL58KPV\nsen0vr0icPYkWeftTETOwG4BV22j6lSLBYAl9z8JOv/KaGqpQDHbH3ySUMXC\n6WBfN6et9j4edHgQKoK4kMmO+eQTPpf+aQ6R3VKtHyNsalOqSP6JdZno2QCU\nSl78znj6rY8O531dKreZuayuRg5MYcglm0aX8xaNVHAgAL0HM/0GvF9dzhFw\n7CQI\r\n=cZNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a664adb550e35e6bd59f0b9b68935527302a4ac3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.104_1618512265673_0.44735053753575693","host":"s3://npm-registry-packages"}},"2.1.6-unstable.105":{"name":"aws-amplify-vue","version":"2.1.6-unstable.105","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.105","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"dedc4180f7695c0f9696dadedc20b36a92d19db4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.105.tgz","fileCount":47,"integrity":"sha512-Ek05w/WkJeSHivM+KW0o4vv1GAHhwUwdfJ/aUvIG4FMfToA3Ty/Xp8cC8AqYTbG4zUIevUdURlXwhQ4N1L79Kw==","signatures":[{"sig":"MEYCIQDXrYLvnd1pKNmBQPYlWj/1BACBROo5DHdFQaCjEoH0xwIhANo4tFtKw41dgMhHcXxQ+DrqdjWdegHII2fA1qCWqu3V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI4oCRA9TVsSAnZWagAAy8UP/0L665z9NCLvOBL8ZLVH\nDMh4O5K23XAuweZDpTH4ZDzzLY5FU6uO6AXo06NIMlKlSMezU5Z/S2HtBEsh\n1nbZSmPFQEak7oZJp6wnQTsSA27gbWxNuM0ozPhP3LF6/lalvAYL8evix+7o\n8vLOcJ6DIkKr6t21hlgeIizVM7U29aKtUjPKWD9/sW3bpSQvYlcsh469nI59\nryAZ7L07A6MtIPvR/6VIMaFTfrODQD5ozyueG2pNv/9YotvGhGNpcWLuJgmQ\n5CvnY/hl4Y/h518HkxT0pFWvzBwLMQZ7iPzR3eP+kwU2/tbAe1bFpTOKoGI3\ne8IuCAVaCQC6FoYWEIM3MroIyUD0JwE9s7V+0kEMtRmaHw7uy4E1aB7CWJs6\nRlBYfmCadEdjdAg8H3/h3UwuH0BqGEsgH3PhWIAbxRvjJNvk8oB6qR9icFgc\no/xcK4j87W93meayTzQjiAwb6JfgPG8UAVlJ9pZ2nYqDzS19rNgrw9DQSKHB\nQTCYTxTKNLa8WG3lYA1xNk1CGidlTPYTIivi7cazECmK0bSGMsfSIALPOuHg\nFz2oOc5zo1Xj1GWgqGpN8emYmPQK9QWHwlceOf1aDNAMFl5Y3COFXrzpQASq\nHGhYz+zQu4qR3Cf9K/FEI80A6WoQ6RVXU2zcinPxgticXPqlSxxCt9CNY7ZE\nW/q0\r\n=unKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d84cf34d32e077554951e2fd7a383c6cfe3f536c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.105_1618513448464_0.5786685221301788","host":"s3://npm-registry-packages"}},"2.1.6-unstable.109":{"name":"aws-amplify-vue","version":"2.1.6-unstable.109","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.109","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"adc645dcefc42ce2db00973aa2df42e8510b795c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.109.tgz","fileCount":47,"integrity":"sha512-oR8kEqH5Y4riXO4YnySEbvnzFQ5/wyXjkslGzNGF+hs/KX0GxDHKZOwBmG+XXtRQ8zFxYEM45I+19yQz3PIg4A==","signatures":[{"sig":"MEUCIQDWsMYoGM/uTeuNqbcnF4keDPCwZsc0mG5Na1I0PhvRogIgcoQAWwg3/wjHZPeCl8gbIrPRa7nrLNm4YYcu5Vcx8Cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2956293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfgoSCRA9TVsSAnZWagAAhs8P/iL3qMjj7FGykt2mZmy9\nHuycAbzGr1c79clGJ3TqFRY+ZePY65+ui7QG/tFiRt5ImoQLuDiPZHmuNwCy\nI4IIP5byQX3Yt4Z8vivXjOdqvAYsPzZL5QOXdkKCfZNahpmv+7gMHfcTC2EX\nO1P3IPay4izxRi8kVdKTLAI7j3xBAvnZb3Ofeo3kyNf8uqWFp4oXbLGxF53Q\nfnb8ya76syfp2a0ZfevN93W+FSZzZvLClcukMlMsjcTdeto0Ly7id1zHnHbj\nngqgz7NyJ8CM+9CMmG5MolpgST8CSaHPUMLQo9UUxkdFGBJh1zDbZvtZkGpn\nRARJfWIweFYum6amF0Ou14ctKpg5pzV1UWHVVYUJrxpB6jmNQbtPRNgQ7AQH\nOFQ3rZ+YBRZwM6pMHhOJKO7bg13UUQ+FGq74Nf4jLsVnHp8Crwb28jlHd/rr\nOi7TDCDQzCZFu2ce2rFWLMxRWYOfhYJlBojIlog1oELtupRF2+PR4oaeUdVe\nBnpgzcTYGVIWYChc6kama3j9SDD1eH7jx0f9IZES3731ixW+ZrhagGcXwx9c\nBx/LCCqMmNwdykmg33As4u/4U+8SS0HtEI5cRFEDe/hiRZZymZz4jEbRLbRl\nlwYS+L4QTIB1leQHuf2YMPdNWXHtW/RVCYwJvfZKG+6c1VsgxLCfwtMwRP0o\nHX2X\r\n=QCVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"28e89f4acd8d209fa3003e5333ab1a386ec4171f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.109_1618872850160_0.42197556215409016","host":"s3://npm-registry-packages"}},"2.1.6-unstable.110":{"name":"aws-amplify-vue","version":"2.1.6-unstable.110","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.110","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"ef0176455d7fa5bf53b88db8d8f7c6578ee26c4e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.110.tgz","fileCount":47,"integrity":"sha512-ApKTXvD0euDzCpNdkGJ22MvfNvpQz7wJIVWlk5629u01v5oFXVX0FghWw1Wycj00d1VsGFImUUiFYYezKO9TrQ==","signatures":[{"sig":"MEUCIQDTr6SQ61XMzMaEYYCKmE+53UMVNZqViTji/qIRzOhsIQIgBs/Krr6zkZ/Yj1gbq8tziXx9B309xdUkZFUYRrtcn04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggylKCRA9TVsSAnZWagAAbx0QAINcQhbGwEz6dXOvObZi\n/EiSqNT81rSYoh/uKyNoos+ZNbRzKIqxDq6DlS30Lv09hb79HGxG3ElpY+Pl\nVut0VZ8W4KxEdayFQ26PPiPYPKk4U0qh3kXq9U1U3JNGxCU0Ui9tJGyIYtfP\nOcNs/MBdG9wPsCli4rYvDcIcPrKNhLp8L3fsda02amEEUyOajB2OneApcoSK\n/fGP2gullWokgHkCU3DRlTaoeq8L3kGPXL5iBVsvFpRf9Eo2RfbpE1zvPgIf\nfI07BUTXbSXV+TjLpYhhqcJVz+MvIBiaudq13AMIZXxH/fu5dtKIVLMX2qWu\nRe2qOBMChixBhxplDy4u2CxgWKyhLEJNsp8CibM7x5uOxYumI5lqZmcl9VQT\n5z9K9C96Wvf+2sMfbTOh8H7htzva/Q8D4O2VntiwhHU8DVryfvauSYva/g7i\n9ovb2VpV7QhCaDb/pA3TE5sJMB3VcvPahOZ/X4UlULYnftVWAwHpkTyHP02j\nVJg5ROVKn276ZZYjKXY3hVWGTJ6GEchCqecRFzGYLpkrRBwLIaGlAKMERHT5\nnoyq5DpGJujpigP1C+TqwlaGJBM6zn1ny2zN8ebTh4Dh1/SH9huBf1NI6+gQ\ndJw6dIvwCPrQnCbYmtqKeBLSym3Vlw+AOwAu1uz2y1r5BY4QGTSx1NGP0NNN\ndlCy\r\n=fodM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"630d711fbcc1b339d1ae1169a6972e4f96aaf108","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.110_1619208521446_0.6310234724805217","host":"s3://npm-registry-packages"}},"2.1.6-unstable.111":{"name":"aws-amplify-vue","version":"2.1.6-unstable.111","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.111","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"7d0cbc85072214b4060f1733070b43337e44c1b6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.111.tgz","fileCount":47,"integrity":"sha512-umJsfX5r6+0iSAfhq+U74dXBUBhfEZ3RR71+K9a5RuYTfyycZ6Jpm90oQHWCwgC/Xbm1sKkGc88HqPHQI1hw7g==","signatures":[{"sig":"MEYCIQC/0iVQ7s1ibq4zVAdtbn5nVPPYDX2EFYGdXTcRqhfqigIhAK3eXGgWC9S8BHacHwa8yt1sAQfhT54883V9ur8PIXb5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1ukCRA9TVsSAnZWagAARrcP/3aHZ1ioG4H+wo+xgDOZ\nSH1AlUzybfDecZm1KjHKqVGJz/81Y1+kl0l/sENb5qTvz3gacR50l2HyiMkX\nswmdCsBGvDoQzIt5MsheThMUjaQDkcOqOuxYwrP05ylz5BQz4fSzVvHdk7g4\n4tcx/vXBedI4NuoC7FnPUUDdIDetfLPPTLvKxPi/EHk3o2lWNqpSj9jubnRX\nyWOLizeqZKWpJh2+zxFSPq8Co/nj3tczmmcwast26tiuhflpegcxSQukS1ms\nCyHmd/iP1BEXw4C4+IMBX0hxUCoXqQQmU1YQUb/sAxeyXGdmxekSoyuHIJzI\nTvSx02zulNlZ88hTp+2E7BTuQ+p/Vs8TdVBGsMC2oOFGYwi/UiK0qDLaeiE2\nRQuwgiFBe010P3igdtd88+rCMs8ZHqLX05lnrEZwYj6ei/sRgxwHzpCQxRZz\nFIeVrEdDnJyUngFyqYVd1bTOw/OSXaIlPhzGsCOigglSH8kqAZ8CUuVBQQ1w\n0Sbrjy3A87E+nVi5b6tXgq34+SD/1Rozn4nQGOUZwJTWe1jFKVHkyLpoO/I3\nfKibVys4qnKSBIFdz7YGSQV/CMSdsVK1CpNEB+igsizbhTtz7Hq6FJEdPlyv\n3AJZCcRWc8ZpIVqQTjvkah7BcM7xkoVqFLEcnr2t8oueq6kKdphpG9bay4dq\nXjtA\r\n=38+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"53175248fa73d43860974dcd565b6681882e7a45","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.111_1619221411477_0.4319825532505317","host":"s3://npm-registry-packages"}},"2.1.6-unstable.112":{"name":"aws-amplify-vue","version":"2.1.6-unstable.112","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.112","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"6382a3702926f6576474f957e08dbbe12c0ea3e5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.112.tgz","fileCount":47,"integrity":"sha512-8M8MeHlXdAJUhRUfDSCfolhYTOCdCoktref/9qfEfO4rYdr+I13ccoNT7JEDDc9JZjoczlBGUDY8wIQz6UlZ3Q==","signatures":[{"sig":"MEYCIQDlYvumXO7rCCJI6sYgb4nJh/egd2svGNHAyXGljeZvSwIhAKvk7G91hrcIxmh3fU5Dez8MXQdF9OwdHRpzhCMbW7Gj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghwpzCRA9TVsSAnZWagAAJlUP/0q8swGkLpnli0LvvVqV\nZmJnYQR+hQwXmgf4addhBIfnAOOxW0wJDD4i/bEJmtVFn8Sa2PPvMEh/niGX\nEqJASLuQlhsaJk4zXeWTudzhWNarYjb+HebWVqdvhqJaC8/tl+QKnJImYQ9m\nIjBiy2JUsmfG+QszKJU0tAHEOqg5Eo3iupbtoLbKmQk8h7v4rkycWDrYkOcn\n8NhHaXQrUSxFleNne6g1zbl2EicrWbCPg8Vm7LYX5+ByCtw5XgVM1R8OM6Ql\na3Q+iH7b361UrkfOKEQZs6hPR6gD1atlnPrHQC6bTSXGnIhrBIcaI+DJs8kK\nK2AxD/GlziORJXmISoyVd+PGYgZQpiIar+C8G0nxEic8cijxXrg8tYEE7AL8\n5oZ1E5kPjFJZkzKnLlUAbg4e6nnav6qJgfKwxc5eesbJYLjNH1ToiMs7/FEG\n+Uxu3zntnE/YhAivdyK/BQl4CwqaO1A//bEwH7NR0qRSc9UurUg3F1bgXn0d\nMwUpUHSnPLlqm5Ir594RHXJRzCKEZMy6SrlizAMJQ1wPv7Kp4nbwvgC5k8+F\nN64p9thdMCAspV0lvGbHCifVFYWx/9HNBtMqOCz0gDcPkeuXBlTCs8HPfa1e\nQj0o88AavHu6dOJz20vOhfPx/zog53l9/GRvyOHA/saOlmykkmmHsRshICsf\nznmm\r\n=sQcU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"364ef56f1a65e95f03d223b492763cf06e48e338","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.112_1619462770638_0.9776322126704049","host":"s3://npm-registry-packages"}},"2.1.6-unstable.113":{"name":"aws-amplify-vue","version":"2.1.6-unstable.113","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.113","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"2c938ed391052771e92aed57dbe854443477f265","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.113.tgz","fileCount":47,"integrity":"sha512-XRPJpB2/LwlFRrweSTMACw85PlKWBJCM4Ai+/tpGOs1UbE1OSyFseAnQn8z8mfh84cbk+5nieBan1hWkpSy7dg==","signatures":[{"sig":"MEUCIEbOFySrle09HpwUHeozkDYZM1OVxiUNs/TnMCtlYHk7AiEA7cIYGYHGPUIaKU3QEeQInGhl81DzR2d1t42qS1JrahE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxfcCRA9TVsSAnZWagAAwrUP/RqwYDIiPHGw/fGKwU4/\nX21gqJa3SEl4xKnC3FUQhbO1C6errtBnbaT0pW3zGfDHQ/KbspOxkPFHDJhM\ncbOIQp3EYQKvRZo4064ZM7AQ/xBg2HC+GlCB3yabfqx9nX0tlxRyl8lSC+Ns\nQ3B/ZJkBO1g+i4UBViVcXZRcRzc2DM1EpcESRxHNdbPdPUfzAKVExhujk1O7\n3vMzuWbr5EXi40YpsgTXqbGfZ4UXzN1P9cK42awkkDI5bBZnBqvv1bCn5JVI\nVYMGMeFp37BxffPQV4nC0SGeOsM8XTxSx4eXSg4ZCTYhO90yohYd5U7qmt7k\noOVoZ+mjypIXIUEufe/tukGNBqu51wH7Df9Tjb1EZb1hQ8KSB8ZSp3WoReop\nAwpBQDtYeWzK6dQlKD1fqR7ZfTbWzG+l5bEMFUndP1pOmloojuzVYMB2aIv8\nLS1QDKTAHbezZnl0O8fqj+QH8QDldjCYa1pISzvU8TA7843GA3oBll2rM0tg\nJy9PsaYmHOcg2yH1G820ZIzBN+dX/GC+PbO23e1V8QQhzPvxDdvyuUectFxW\nUspEc8W6S3nmKoXOoty1Ygy6kmnrJvqqPbyNPzRTfQ/rXoXWEggOueppICFg\nXMurz27c2DO1PyCgak6gDZZ72yCRb9atri5Cuz2AxqdLp8ZqSk97B3H+6wdf\nk8VB\r\n=wVvP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2d4052da555709fe0f759fecb2df4b4b9604461c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.113_1619466204373_0.6889669163994128","host":"s3://npm-registry-packages"}},"2.1.6-unstable.114":{"name":"aws-amplify-vue","version":"2.1.6-unstable.114","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.114","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"f561b2add092c797bfb0719f6fe01968332254df","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.114.tgz","fileCount":47,"integrity":"sha512-SzGZJ5R3Of3v1D8uhrWkn7Ux1NdKCEGgVl9w6S5dOCT8BFE1V6h5mC2IVhfnbVaexriRHcuot+uRvLHzmZeTKw==","signatures":[{"sig":"MEYCIQD1v3CN5xIcj7dVUCcVv7c7D8xlrVgu9hN/HgWM5z2yiAIhANGinNtEFceyU4K++trZ2s4RKOrcnQ0iUQEi8gZsiSwA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghx+QCRA9TVsSAnZWagAAoZkP/RRIxLLWbSOQBqoy7vPv\nh4DOVoccs88DxyVHeYaQaKKQ26R5t4o4bpLqf1glX42uDWBYTZjW3zABliKt\nQ9V9ODgaAQ5/hcTHXVUZlJ0LScM8nNB6/N//uSPjYYzeVhL4Ixl7BCt1qn4I\nyYtyHZe+X/8q8yKYXtxA+ojpQB9Zct+UgvW5nsJAdJiWEttw/QMYNZ0ZjQUX\njVJ326q21uKKrZHz8cSOYLkrdzvhry7QYHUaR1C5YpZxj1UWwOAqpR5cLbYt\nioniXPPedhT3mw62joNPyK53QWyLLjCjS//sJJ/VX0RZ49jIYWpUXUDg5t38\nRdewQ/4CaR/bIjRq6wAChUIJ7DLH9+Zc1Ia+wFIGxPwnfDQBNvwFOUBkx0oy\nY8FrrSUuN/5ghoejtYWGcNAB1Z2Oc/qzm8NpCYI37jbTZ1SWEmVayCGm5Aid\nLUqtLtjSd/+Bx5YMZ4kQxsJsnBQyPNknHXWT3izVmr6tNy6CEJrFfkyd4/HO\nvA+BXrODuaMuUH24OqfzMVyISntDKEby29KCV3L4GA6ecscQM1+5tO9Q4X8n\n27ErUJL4Pr+AnasZN8qWxpgrBaVAcFnp3+CKKHplDialK0B6CFJ8GiAw6Fyc\naaLzCuBPiDNqiPfvvnwZjv5/xE2Ey3w5LQ39u2jHLTs9eyRJVYwpkZI/j8TZ\nyLQR\r\n=HBoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"70fcf949e09842c196249a7e8283a2745819500b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.114_1619468176078_0.8191338748731583","host":"s3://npm-registry-packages"}},"2.1.6-unstable.115":{"name":"aws-amplify-vue","version":"2.1.6-unstable.115","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.115","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"44d3bea7c56bc2f07322d926081c761b56a3e320","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.115.tgz","fileCount":47,"integrity":"sha512-QkWHlgoLTlv5iISRhpVo/86dYDBN0RWUC+z9wryQHfiusjKPVkKgIVl4xTzhbm2UwIf69iLfCJVenHDczdHsgQ==","signatures":[{"sig":"MEYCIQDBdk4WYb3l5z1ov0ytc8ChkeqR5WBk/cS34OO19mYG6gIhANVGYN/yA5Pa9LV2gIGR3EwmZrOZXR4BRCH3zTQ0gCq1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghyXTCRA9TVsSAnZWagAAGZkP/1rgjci+2FKkQAIDV+PZ\nHoPE/v7pW+avkuoL8WGcJuVVzz841wgAl4rJuvFbXNG4D9nnsXkhqBYnj+xk\n8Q/A+6ohISoqfn3dTx/OtpkI1kxtFYznZMLM+aRHoei+H1v4s1Tm+MVFC8zY\nFh2vSmD2YzHR7oxc11jeBy6u7LxCtTH57IYcmBViHbgbJizqmCFywN2R9ch6\nMH6ASpCznKzbK01F34TOiZUP2AYRqAhM6ie917aMs+TcYLRxibVwPiTE3yhl\nALe2UBolbMK+S7Lx0a17S/fzDZALiE7nwGJsINyoi97aexVA3HuptFDT3i+F\nxFBYPKPnSMVLeHgtseDx6uTyz/wv2VgKwdgqGcuVQ7mjjsZLGvljO/+wKzQR\nYIItBiO4OegXZFU2KsH5Prfd3slABefsQJk6z1iAF3UxmGE2mAqtv41+7z6x\nkY7ryxAdwK+MZsXwRaDSO2uYvOQqBsi3kd7nOD7gN/hLt3hLqO0r7HuSFQc3\nRYbrff9QWXPW1ztXzrJJsNPdA4Syn3lPaZQt3ayCRmdlSOnzgvGDgOhNuvyx\neWh7/y8Bod8euIHo2q26uDDABxcijiuHaG/aB0HIQO1tlNWg/oMHv1J5mRv0\nVJHDpffuV7ZudgYD1DE2A3dPUzFdAi8vPA4gVysahVoQRa3JCW013lNf/PvK\nOQB0\r\n=dI3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8411513f63ab884bcfb8534aeda82b31fb579d15","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.115_1619469779354_0.5790042076124029","host":"s3://npm-registry-packages"}},"2.1.6-unstable.117":{"name":"aws-amplify-vue","version":"2.1.6-unstable.117","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.117","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"41e2f69b7d6bdbad7de426aa5166e155865ef077","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.117.tgz","fileCount":47,"integrity":"sha512-TwMXRNdhemml7ECY3ugOUyPyecC1fK7A6wcY47fvJMSLelRwreQ/b6RLugG7E+0e7JNofK/kBVuA0ov/Gdi31g==","signatures":[{"sig":"MEQCIAxJHMXy2szX283iJ5IrpltDSX1DuPsjIt4/uPqX9mwGAiAhi9ySby0vpaa0tLZ5LUV2rFKdAtGnVSXCA2z2nh/8Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiK/0CRA9TVsSAnZWagAAtjsP/iXidPRz8xU0wc80TtWg\nOwtFDm5/ut4VddpdVELYkrYnLnVHEM8ib8qL+whJkhDGIkbb4mp5wyndDYxo\nxvCHS8boU6MFWPDdiW4+6NXR2JihoxAOwnHNdvc2Hl9uiWOMl5yQl0WY5uh2\nn6b977e6wcIcDG3YmmjRzawsWi1PD0aj7S1KdUhjCjaRBjwJvq9uVYEQFTXk\n84CpSf+0H6Uxoulk3Ho9ZNaTGKw45Sp5SqMC6Xci9T/SwIVRjKa3hfUkq/vA\nz1+bca6Oe6qZKwaG6POU+YeUc2abu1pGR6BAr9wgbQbZ5VqtzOQ9sBEURRU7\n2E4Ej6JiDtcGlVp9gOGF5KtqRZQH3cQHGlBNxund8SdD0b3tUYZ9sIOBTE1B\ndxjT9Wt+ohTePNt7xs0K12rx6o5cFMoYtXKc9OzP0TnDefqsbKuVWJxx+GLQ\n5gEv7bPxXJrqbjczqZTXKAdkLV3ThyR43VqCt7pcCLcaf8sQMQjoUnSGMNaX\nCJc+G1dIZbewN+Re0afuOY2ubJffgkA1wPhobcXCPq2x2thMRq6XS/qSWpx/\no/Q13zLcRD0InmaK2Tvx25QrJtWiFIW91KlT2/DXzPA8X05vLZ3/7YsDiu0Y\nycuZ1s8qpXFnR8VvFsRoCEpSjkcaLH4GpmqR9qw2Ozl81gwNceIE9cV78Xl5\n/n6M\r\n=qnpf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bb1b01aaa64364c183db4ef938d61526499c2c3c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.117_1619570675580_0.2224401758825374","host":"s3://npm-registry-packages"}},"2.1.6-unstable.118":{"name":"aws-amplify-vue","version":"2.1.6-unstable.118","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.118","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1344c26b4409eed05c1c8edf672527a6354ce6cd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.118.tgz","fileCount":47,"integrity":"sha512-cQN01IwX8FkE1wzv1j6evabNI9lbaHgKDez274Rbji3no0/sbdONeRtJW5q+UbL6+C/Dg0yh3UYAsKWrMF5GKg==","signatures":[{"sig":"MEUCIQC6gi6uYSVLRLuoz1PfpgitcqXEDCHqhe89gdzWX72OVQIgYFvm7qbyH1FY6TtgGluD1SZV1/Yt0HT7G7+Oxyk56f0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgib08CRA9TVsSAnZWagAA0g0QAJv8t4eszQk0krF1ccit\n5eiidChWYFRY19F/dI4h0hzMtg5//+MEPxvu4UmrZ/Tn7lHUGBVYAbBV/rhA\nz8ZUQKuXK6XSOO0/Y6ep0HKe0XoEQpGUm9VPk/m08dAM84Zmb0Jj2pHGSNaK\nLQ8wgjJqsAe7WKADGUGDHoUoLGaCEVhYY1D25SWpGPGBtvtJHxtaL6dKhaxA\nK9XvIVOWOXoCi26XyCvhi0LsdYEvjFQJE+dbrZ3I/etIafKv+BeErsaLi1QL\nyRf0XN4grgInwMK6P7i6LaCgHjJAOVe2Au1yjZW90EUjN/KpH/ul/DRjrkDg\nMECSvj0V5AqPphRiY8huf+14mZjNw8/+nQn08UxOpsW3azCWed4f7ui+ME7N\n3WA77FfcNMm8MW6K2miDKujH2Njkl1RfuqCmLJo+mXRjMxcj+xwQJkyzit5x\n+LJTHbKtzq72zQqKY8cKkXaDsAJvnbxHSY4XDFK8aNS15o1jmcu6dbNWMCtm\nxOfZbcmZ342bp1XcBap0jnuLkcL+jb83UnaMM890n9507ChuSoWetjru42jv\nrpKlOghDGREh780w0Osi9QXTnaBNjb3UWd495QIfvq1Ao+InrtI1me7M/Ktu\nzzNpy1VjP4rcUaySpwpNo/ePhrgcoihryNBBzj+S1vXcVQ6s2J1lCy0pbNn8\nUBfi\r\n=oPDP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"14db4a0dd99694823b4fe8c94c4df92a4329178c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.118_1619639611760_0.6704652432940326","host":"s3://npm-registry-packages"}},"2.1.6-unstable.119":{"name":"aws-amplify-vue","version":"2.1.6-unstable.119","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.119","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"c53b4861e2ab8252f5c590e15ad143232670a78b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.119.tgz","fileCount":47,"integrity":"sha512-9otW7jm59PxDwI2q8vEOWXRYhbbbvJFRc/q+M54e9EWvgDRKhJnucatmis0C5QZWMR66aR3Mt4GZJQurU+TvCw==","signatures":[{"sig":"MEQCIEn7eTVHgY5287l1qyFSDQjp3Gf6ez+ZQqrw8AE6D5vhAiB64muvVbqtCvUVDrGgZZfPgY/DLlBMXY/8NXK7x9x5HA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgicIGCRA9TVsSAnZWagAAnlQP/2F2Jea8ZEgIsYUj4hUC\nyGbLRMbTDRV+76C34o+LGtI7WUZZECmvX7Cj5f1sAs+PDpNn+bVTvmyySQ1S\n79nyLEvwtE3BBdKQuySyC8b50mvbl+jPkcWwej1fU5tvYltOWbgfqnsxuNVY\nPsTRcV2o4NW8OW4+bCXjDv1Nw8ejk9QzLzYD98itLfurc/IvfNXmDAw7YsHe\n9SdKu8XfPsHadfnHuaSCQW6aQABcvhV7POgomRE0GfEv5gdppuMLiRVDDobT\nL3h52AUPUgaJRIZ3gtWf/b850hZFcNtU2CH1LYef4EM9hSg3hPi1VD/cl8y6\nyxNW2+zrmB/7QN24A/D3HPnSWsefDmGvnhhhKF3RjSQ6E9Zci04m0xXeXMm9\nTMwW5WF++CDBrHVyUA/AJmOXkcFUKsJEQWG8rM+NG98mj+ZnKimLfUYCGxky\nP/P6n38GBvdIp9I7sWAmOFRO8XQnWHnWgzJKBVo2Q6HwORY153OuykrNcDjn\nHZzQMac1D8eioI1pRghHay12zuf0clPbAckL6Vz3LKm/RbRpu1HJ8V8pRGUB\n1Ss32qo+RB7Jdc7i3OEy6Wt10li8dHMMyO+mwwYLO5NGrJigTnjk5loUDYvw\nsIRzBkzdzNVcbpsUmnF0/+sI3VnDAQggZq50bPdEkiuZSaju7AAmia2t3nJ3\nsqik\r\n=75/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0d94c972a1b3d63dd224adffe2f4c7f5ffa73d1a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.119_1619640837998_0.11570544357345636","host":"s3://npm-registry-packages"}},"2.1.6-unstable.120":{"name":"aws-amplify-vue","version":"2.1.6-unstable.120","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.120","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"b0f9454c47041c7134f42144281bd5c5ea94023d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.120.tgz","fileCount":47,"integrity":"sha512-utni2p64dCaZSrDgILtfx2zjjDZ+VxJW1VNeaIcTLpG9uUfvQchBJjPZ+UiNyDa5Bu8IlPwEm4zS6DyBGrj3VQ==","signatures":[{"sig":"MEQCIHT/ejdYTVn3+0DtmhC3kTC9Uy7T3osBp3eJdCcb0r9eAiBoiJw4l3L3NutdrkwuimWnxKTuubRojjsedDFMpPyqmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgica5CRA9TVsSAnZWagAAem0P/3pIjkl+LaupUmffW2/u\nL71o7GRE4YyxXMkydZ7UbVUb2J1WIe4ZDRwSHTHOLxkLAZGDg7MW3afBImIb\nO2pfM5V7SCsqQy3ibp01EAbcn5/LWiVZNfcUcoiE64tLEZAYPY1tdOToW8wE\noN6E/VE384X2ti8KNyYNzI41pLQhGgkbRC3aRSbmdxvdbFxSAzkWCda8rHm1\nyjcN78BPrNtyyIgkcFNva1+xEP5geOoYsf14n5QGDgJCC2YaqW4RGAR1pa5X\ntYrAbkivfdIIxQSFJX+b4qjothKSJht9iKkWAd2vbphiKYXpC2cs6O61JhM9\nqyMduvABq5oQzBMGdkCne6xRK2QvX1/kl0ryIL5HjqR2/Wh9CTm+tGc0tRiW\nT75gPSrrAVqiS56Ve6EM47rokgT4lNsaBOi5FALSuE2LZZoutNTbhHTrhjyX\n/ORQIP0fUBfys4CUG+Z4fdTZXTERb+nt5c3jEXcP7RAHk1jXItGM01/0A5XQ\nGRLiZ4fHPh11xyINU/d9meNYgKDyFl/JXhgHW58JVYnYrDydLytdlxYSFX9+\nDjrISUreHLSe/DkYNwrS2rWxIAteHVId9C4+ObOr1INhSuBiWb6PImTkiiAH\nlFTuY0c19pAjExrR0TyvLRfhqk1NPK3Q50lBnKAOr++LjayWDIEtIpcgVjDZ\nOl7O\r\n=IRWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"83e8ea36a8bfd6847e8e158506ae0d19acbc1a4f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.120_1619642041329_0.7431630914152383","host":"s3://npm-registry-packages"}},"2.1.6-unstable.121":{"name":"aws-amplify-vue","version":"2.1.6-unstable.121","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.121","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"dbd5fe52a0de8c5c14a7a66eb624da06df62fe3a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.121.tgz","fileCount":47,"integrity":"sha512-BSDAxwY1smRg+pf2ufukl2S6u97UczDdVPGxkiu2tksLNQZUb2uvN42P5219DUnako3JVjvZco1BTAYyTl6B2A==","signatures":[{"sig":"MEQCIFDtN3Q9T4vkiECrYkBUDMQoFYFZgmTjRBsod2O5TvLEAiAjRY2L2u08Kx55eNdYxoDQQ6uaI3YB51ca0gUFfzHN3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiw/cCRA9TVsSAnZWagAA1gsP/RdYbleVsf/HosfRzOMZ\nEhh3avOrKxE6UevYFE0wXsZeyNytNMDC7f2lnF0KEYk4NWj8Xhg4LtplkDPJ\nry/JERSGsphXYe7uiRB5AXffo9LZZYJMDKoschJK6TpCXEKK8hhy/8m6pBYW\n8ciDPwZrU4mvlaKVOaT2R87dGtUy5wX9B8Bo8WawQezO6l96HUtEGcu3sZaz\nokOnsBgNB4oikeWmFgFGcnDX/anAHOljgHz8daHjkwH79z4aeLyitDHn4gaY\nMc3/GZUzW+3y41LtmX6DWErd284zDBHu741b0ZBlU+8vnODuKVBG5++Edpnw\n66Cl99RNiiH5SHiOUVbJHf1AXyWefphpEsHTtIASMSvm2PkMZdtvN8tMSI43\nEis0llcg+Z3g5+Mj23PdbvrML2E7zfniuBiWBF0+jmS3Fz+LvU6hMFPmThzL\niCR5k0d3kuBUGoMRD4/XfUvaedmxpYkugO9MZpLizzv2mikhh9oXyz1G544O\nqMYqhkgxaX6rAzd4efvg6nk6SFaK/YgBwb3J6yKLMIgiTzrHFaOGq4xyRT7G\ncjg9awyW0zJZQ9uO0D2eAZzzm71nprrnwgdGxIdHS58QgIXN+1ka7pLZXUZV\n6o0rKwFT5FpMj9zTYxVshXyB0vvJsy1H3SxPqK0pBgBsQE8lPdItiRmZtlVo\nOycW\r\n=AB63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"028e4ee1f7a660ae811b0e1ee846c978958719ae","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.121_1619726299596_0.3278067224321837","host":"s3://npm-registry-packages"}},"2.1.6-unstable.122":{"name":"aws-amplify-vue","version":"2.1.6-unstable.122","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.122","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"9b2dc309df6b40df4ee3ce677839d29aa04fee22","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.122.tgz","fileCount":47,"integrity":"sha512-c5UIC8oZ9T5jrPU9Qt/qQ2Bc6pYfCUo6dStIqFJKb2Xr/o5yswitkSmRDKFS2NnrSt1aJmRyLT32866FgoQdtw==","signatures":[{"sig":"MEUCIBC6YmyDwN/HVW4v0jNNxB6L1j6QsZRbjq6k0fgxIGRcAiEA3bbs531pjPqjN97JgDxP5ZGYb36ua0tcnbMgqzEucdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyOECRA9TVsSAnZWagAAWSYP/iBbpb2WvLp23xe5iATl\nzLLHTFaGmrHwZb0O69t024fPQBMZsMKIpE4JYxljYvWOZpEFFyFaxUFi7VkZ\n6+hDD7MLz9Wp1z2vi7NUiKH3mLNZ8xCV9e9EMWUeL1jugS82eCaSKanRajcc\nyBPUaslzlbonkpbpbG0Zk7TamI+n5dJf+9MjorTW1O66ii2xxo1BOtvisYGX\nrswMb5mFTEtoq6hSIMlbfaoXFDKRnAUODa7nwoL60iP+c2AwhZyZPsU2ryJV\nI0mwx1I/qsOkvdMZ5c79esElhrzrFt2Fe6YXIlo1L05Gu2mbKC1GMPUzVQvq\neodDWrMB1BWpsyfaR3LHlOGynS0j3pEDbr3zQtj4zuI99EztaNsGIKRlViRB\nTuKaoZuYFsqAS1VBzEkJb58wRAj9u6MKn6JF+fpkU5kI6fuLBEFxsSMqusXJ\nw8iKDyR2YpscVEHPrcK98pUyLvApXL13TAfaE0zmxqEkmxkTKwd6NRsYIqL1\noNHAfwqFa5rvry7sOGUAS29Aoux/F/hRcb7lzJJAfVkaFbom+ZjoqiFbd29/\nIvMKiSFtqEbYFSubXNoeEL8rMEQkC9ZtyBp9KLbu+8Nww4B/Z50ubuQDe55L\nSQanWRiC2MHFdYvSTUEM3Rzu0nxuYiipA2MSrxD3+7qEFAh8ZBz0cXKZ4iTa\nBxlo\r\n=dIZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0d254c2d7afee56b8ce2f7bc3ecaf9b405de62ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.122_1619731331942_0.7350482015427455","host":"s3://npm-registry-packages"}},"2.1.6-unstable.123":{"name":"aws-amplify-vue","version":"2.1.6-unstable.123","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.123","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"a07db0a32638c5e0b58abaa8880d62e8cf8d6338","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.123.tgz","fileCount":47,"integrity":"sha512-7wWRbRvVN5YYjLNLQt9UIxHnGYQAPHaOfZss9ssGP402sqKKPaX1i123VbyYylNNik3ILimz0K4LgjgtuDSbZQ==","signatures":[{"sig":"MEQCIA28RXxXHx4NH0/197uGhGAXqgR55VobrTGzSmuzlmd8AiAiXkJ35WH0cP4NaC7siu4uX/RUu2Goou4xyT8Le6SM+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjB6ZCRA9TVsSAnZWagAANakQAISPSlD1HPazYK/y2Bkq\ndM6h6B6sgjPpspKvF4+J09j+uBLe3Sg70WsE7MECz9FL4BtASOKzBSw2C70a\nWuwDlIiZCUhUvO33LPlmw5sZS/26gFEM7y7Z3RuzLmT3EseJQLrFxtwBmK7M\nyFuze8gPLqxya8XUfNRMlcXei9nsYV3YnTOZ8ecPqOQ3ncrjB9zim0er+gQl\nrKgz2ZgUknd9jVgOMAzWVUOqel3Uh4spRMqHmFgmlDUFD7R0Jr2mrf4+kaR6\nlXi4saYSKaAJGM78J7ZnJW4sFKCG07I8sA3+Ml9x9o98HBOyVCheB2OxoKbx\nLnuAPvdys+rHXqyieTDtRP7aNOL5AlpC6LNrhT07NC6hTCEFzzUyycT3wDYB\n0N2fno51mbBy1TJuzchyiUCDKvvk2ZgavPO8I8r5yZenk79PHK2itAOEH00/\ncfOY9n8dUofVaKUNnIStRVgUwgovc9OKWDKep/Y1Iyi8wkW30tjJeRaIFCJs\nn9qrJfMyV1sIvGSktaUP7TWtQy1dssFgF37dSxcFHO+hoa/XmTOrKJXSz1I4\njPRn+3fyQChyNxRv/7hjqfUo4KvOHe8/n8+ecusFfMNH5/H6p2r3gneRjn3R\n2UjkQd+Gxj0T7oWDWCJyVsYAky1Ucmtot0K4ojm1dtPQ7/TMPLN3R6i/xTHz\nyOX8\r\n=kFFI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1d8ba06468b70908a68316962d4205a882bdf077","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.123_1619795609159_0.6887848789854947","host":"s3://npm-registry-packages"}},"2.1.6-unstable.124":{"name":"aws-amplify-vue","version":"2.1.6-unstable.124","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.124","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"2cd1b8d61bbac31d4c87534032ea4c370e7ad91f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.124.tgz","fileCount":47,"integrity":"sha512-PvkPJ1kbGxGVy8jYiAqMn+xuNVaFGIURqyQKsJmEr+vdaYRCbEvdpm89N+3riifqZvzcrmR/gGyVPwAEjLQQmQ==","signatures":[{"sig":"MEUCIQCsZwcOg7pgVLZmikf15IGeLJVR4B2n2WK8imDwZ2ZHvQIgXJy96/kKSc3BnUaK+sg9ZcMrSu+MQPqsA75e+kjDHE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJIrCRA9TVsSAnZWagAAJKIP/AxT0YaXsdGiISjjU9pX\ni+nENINcn+jcyCptLHdXJvg/Q3xx5NQPpPr2iuNvzzg3ClyiqMlBBGHVHZBL\n9D+HxVfdhDoGYyPBMb2h4jiju7Z8Yv5WxtgIH4QtAsbCpClbDvEP9b1AswwZ\n5MgbJQiIanSpafWF3p/Fho4B+CBzO1AN5i3PCRuvnarCvc7BWwWOihFyPVN9\nxqxKPIpFRk8CEB3OzJGti1j2NPiSSMo5t1lqOJ769Z3iC0agpWnP5CQaU+uK\nKmBVPD45w0nEDaE9FyW+lP25DodSd7hJT9WTCiWxolNmEo5vjrXOYO3qOO/z\nqOywRPHO0ypTj004sGkVSKi79mqrQa4u0+ZMq+9wEKlmDN56edewZsVeKjTP\njMUb1XdrJdT38rfNb3q8t0KMDkx+TBraFHbM9JVPkltiGBf8MQ6L/lcdoQ8j\npbksdDP5TwXJ3fhC5XwxCJsaQWu8glhx+i4/6U/UMaLBKBxnTcaH3nD+HWXb\n8NxS0gz6j+/thGZi5fvaIxpUq4g/K20Sy9OdT1qF/QzlV0bci+x5QajPZ5Y6\nCuhqTX0jvMyT8mNjRqMYWx90BAgEXfGv6a8aY7W0MZqwIL5W6+mKIa/uFn1C\nX/m+n8ZkKu9x5TO3LGbV5T0IIn68Zd1nqSFdoIih6R5dyXe1q3OChqY0vJ2W\npWqi\r\n=Vklb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"918797e66ac68e2f10a7ab4ae9457e73688c028e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.124_1619825195456_0.2422268392167204","host":"s3://npm-registry-packages"}},"2.1.6-unstable.125":{"name":"aws-amplify-vue","version":"2.1.6-unstable.125","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.125","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"615057b3e2170be10973d8d38a3b8936d5a8297b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.125.tgz","fileCount":47,"integrity":"sha512-e3wQTTFIO0cGw1ApDcciN+nS7lFF0298hXMT+kmrpdLjM1Ca8GydBg66zX9zDsFIrkghlfj0nmQzpAY6IAg80g==","signatures":[{"sig":"MEYCIQD47whcvX1MkBv1rC+z4GvyD+Fffb7aRWu/34qBv2OzVQIhAJ7zhFuJxGJfdu6tSggi7H3mGR97fhpIfU5LxnRnkGQi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkDK/CRA9TVsSAnZWagAAvi4P/i8DSyFBt3zHUESPyCg1\nNQS+GZI6QCZXVOm6rXsUvDObt8N9BYwGwvvhUPwicdiC5Gaqnl8DMJ1aqjY4\nnreXjPtgOatIGFtVTdte/ikquJvEFXpn8K36JGSc5n7Yz/R217v5OihPRzmR\ntdX4fczdlkOZSzoJNRCygkp4c4x4Li60U39+xmnXwFwYE5m2fj/jXTUvZgBd\nlFK95S4lWPSxZmC2lnh8A81P7SbQ5XRUn+g/2GY91hv1aTGE2OCC3OY4qRH0\npSQym6JG1nIWXAy7iOOREClOAB+be1gxFI2XE0AhVqWmGnTPplj8Ck4aAm2L\nkZL9bncf785qjaYpjBof4Z7aQe+JBuuG088nuAIvEmHzNU4Q8u0TCVV0zlwv\nvJElm2CWlwLfeHt323icxCl/Zg+S04GfNrs8WUPnMzKFYhkaJLku9O5moIJs\na2C41VTftXUD8zsyJr7ONEKqV1W2WeMukWqeRr+Y5jqX9+u5jCSkz71L7mpn\nSXwhYySiD8yONKUMedKkBXQYyBV3y4EMkUAorc4QVFRNiuJr5I+GVwTgwgLZ\n+d890YFq7HOqjCXqutqtco9O+56dml8NdrhnmA68DKRJPFXgUT2VKK7VZ3RB\n29Ad8niWAiMZQeA4bkWWUf8DEzTxBYBPg7hvsMlSGa4y9Nq7BVoTMga1jYyd\nJdpX\r\n=1Sml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d16a8fbc5862281121812b1f8fc7af8bb001190d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.125_1620062911020_0.6504587937523882","host":"s3://npm-registry-packages"}},"2.1.6-unstable.126":{"name":"aws-amplify-vue","version":"2.1.6-unstable.126","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.126","maintainers":[{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"dd541e1d979b6be6585e4f534cd002c8d13e0ec1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.126.tgz","fileCount":47,"integrity":"sha512-Uw/VmgH/mm7ZWZoG+kdWq3Q5f7UHXuc4hoxHt8ZORyGu/3l3kERaSn64qOvt3aNyLccdlKoCDLe2/5kszwmWcQ==","signatures":[{"sig":"MEUCIQDL3t3uYj5RjaxtG+cp4rT8h51oSxnVozVXfEyZgqBSHAIgSwRf/m3is4mpr0RyRo0gl2aSBW0bDHNPy+Sz4EU2CfU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFafCRA9TVsSAnZWagAA/lYQAIKcQ+2fxOE3JZ+BHZb6\n+FeC5Swbj3pN94fcuFGUKIRsDmCiwX0QivyNRoA5v5xAA5aHxawylQDhlRyr\nzTd5YhYfgmFE4ec3GnrvLJPI5hU4RCoUwsQLPEzWAD4hRlh7fYZUNuYG98di\n77+pJ8hYMNQOsgYEHr6XQi0F/3UlHRyuL0lez9yVACDPEF6KCbkNc+71VIsQ\no9bYReGSUKiesG6XpiXK4U7SrYSZ9m3FwlvLqqLm/74dlR+KWbFwWluuIu9+\nbKTvrS3ROuBDeLbVJJf+QpBZ6Sr8l3AYQ/hfA0wFx6w83gbV7nLMeKJVf/+V\nPE0JmrUmJLEjQS/P1Co/UCrgW+EAKrpLn2XzLCeBIt8DTQ0AV998gUMYdmyX\nFQlxSk2OvkUEfrueitX+iT3ddRoCPFmKXdBHFt9+zj3vTfOCJZsYOmxhGlY5\nYKyE1a6vpl3llVq9Q4a51Ft7DLT++u4IluknoEl9TB7mi5EjnaHCwp0PF0C6\nLAM6uot2hVvqGfgBSjf/BIW0tuf5+K4ksDYYajEc50Y/Kfn0otajhDg7wjs8\nka5jJGN60sQpaiRcbce5yKYL3vsroMsQJJI1AGd9kX3JOkj9qcY1g6eQ8Jv0\niOBAyz+jGTxNXn7e8FzqU3mVMezFYK3tb3TndiJyE7W2kGMvH1pOAvKk9N4n\nEtTW\r\n=owHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"98839741055ef9934565d49599e74c78e3812bba","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.126_1620072095200_0.7191380761394772","host":"s3://npm-registry-packages"}},"2.1.6-unstable.127":{"name":"aws-amplify-vue","version":"2.1.6-unstable.127","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.127","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"9240ecb6a5e7e9d513791acff1c29404aa454318","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.127.tgz","fileCount":47,"integrity":"sha512-lZFnPCnDeIrFFJlkaAf42d75t48ACdl1Y2OvDm58KG5CxPjgkcYwYvIZ1wb1CqMt4IhXB4GnbQ2SorGG0yGCIA==","signatures":[{"sig":"MEQCIDrwj21AQHmCJjKuThV3XFHnh2EBCUAqNWzUx50V1PXzAiBk0acNKExo9tZULcWITgNcakXg0GPHuuI4uTiwXTE2/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkVQ7CRA9TVsSAnZWagAA08EP/RxBrYdRlzroBAPjy1mj\nJPBpiUDyRt8htVE0DIJJ980rxdRwRN52MEfd6mXu5JuyUbkmWwZjEwwOGnx5\nV+9cQEkR3gx3TjnZ+H9tf5W/LN8SQ+0//pNM8D7SIuAeHelexI8QtcRL3aQ2\nbhNjqLC2z6Pg1hEGHxfil7/sX5nk+4ph4qygLn2mLDg4HzOBB3lUxq6JZJ43\nqfRA47282w+kEMfC/7ClBnwE+hSCcoF4blajU4SyJoyPuZADu6QV2sQM1NNv\nW6xeBjZs7cKSOWvuCyo2vj0QeWVviEmyz9lIBepgohycNuLkO9HPXjr6yezx\nyYFc5YDeSMzoH13f+M1fyI0+JIHw2kbODOGZ3IxGgDJ/GBGe1nPnCBm+c1ma\nRWN+t/S+JAZ4td3VBrM34FT1/tDOA6z5X+oxVOAtmwwWnahUXp3xXzFCq0iv\n3ZM9fPMN6QLpOoY/Uyp2SRdLKWGvEhJo/OlsJfWBVskb+VTJKisqDwlmZQb4\nHRmsqyN3iBLGQ7kXGtJMvBX3by31hHwshviYDVrA2i3H+L/9ZB0Z6RGPGVH7\n6NYmOl1RKoR8dbZb1O+CbQBPIDNj37PkbsGmxCFR6tzx5xLTpQb5bdBHbb9+\nVI3WFIT7WVeBAuKys/qLwz4n2/jX4C0kZhEAW1zdc8pHulaeFCMtLRD/KTgj\np1pQ\r\n=Wvph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"89a225059f6c0232aca3e1f3659348a984a5f277","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.127_1620137019065_0.8617861718742892","host":"s3://npm-registry-packages"}},"2.1.6-unstable.128":{"name":"aws-amplify-vue","version":"2.1.6-unstable.128","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.128","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"a65b20e712e986c50075f42c785f3ef472897e13","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.128.tgz","fileCount":47,"integrity":"sha512-01QZarikLkoo32QNsqJMeXPI4X3VgZpqw/stZ4dxGv9rlC6iJ/jybwaQLpn0qqfpOzCf+PhjYe4TljBbWa+Zrg==","signatures":[{"sig":"MEUCIQCrVMqUsgnnSfx2ZsIw4dMQ0RSNVLXcQwNlQXAtwrThEAIgaQ1dtMb9VQOYD/6dxBpf4EZlntk2daO9gPVGJ1l/DGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkVnRCRA9TVsSAnZWagAAoLIQAKRQvUMrpnuES/NmrRlb\nTghhKusost6StIA4ojcxw7MupLE4kBg0u37P5uk+hZe9sYbWLfn+hxl575F+\n0/RtbuBaR/R1eoiOsz9BefsAX+DwUdomh9joaTT9ICV1HRqkqMgzELXREVrD\n3ovN4zgHTLV1lmTEuAaxA3+f2d80PxDCBTU7IOHsDxBR9X5oZnT1whvWe+Y2\nr/+pTciEd49tli99IPWMth4yKaNR1XFI/+4UzAejJ9xug+KtmNCEQHje+qsQ\nD/swDevYAYqTB74nFPT2TXBnTVbr+xrmDuOAQD7HTxwJrSukVc/VK2f3JXya\nhqT0m24S2JqFdSN/dN74kzv+zfvjjLha4odB11sCSwF4LEuCpKlmpEI8F53M\nW/3033POp5Y2mkpddEDqlTfjsxX77KqKB4gsBHYNOVQQkrtJDphwXBbf2rYh\nxR0F5BjtBTj9a6js++Qr4TY+a23k5lRQoZd74Q+7SxfJfYrvCjyS7lYFktVz\n/VcEcAIzIBBh+uklz/E+5zdr5539mwFXuRtZlIBMICpQVjRvMIE9jk3lOMsO\nVtTOOMRiD/y1F/q14TmsxYDlb+vXFE442MY5i2TOQScpxzdtko+jHCudIXcA\n7wIMsbh589KhmCZZouvpKxcoHMK+bUAhBD9fNb24l47QNSw3QSA7S/3S8feK\nJH5A\r\n=V5Sg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"75a793527f26cf1d1bd9ce52d16885619d03397d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.128_1620138449316_0.765171263158575","host":"s3://npm-registry-packages"}},"2.1.6-unstable.131":{"name":"aws-amplify-vue","version":"2.1.6-unstable.131","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.131","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"dd9881fd544fc9a57dad799718cc8e7bbdc9b535","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.131.tgz","fileCount":47,"integrity":"sha512-5iOBqfrZIT2zuCmz7FSXcVcEFSGyOGOxQzHFGe/MdeiEhDvmdV2GVMoFZw1C4xPrLO/oupTynfEWWCpHO8csPg==","signatures":[{"sig":"MEUCIQCOI5f04ijEms0WolW8uzlHQ23et8/29TeRYnqlLJz3jQIgYx03ewHhAd7t7ef06y+X7ONRTdozaQ/oJyLpt+voQPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgky+pCRA9TVsSAnZWagAAhqwP/35mqaZvgrHq3dqAHpBx\ns7WvqF62DgNbth4t7bSTg7UahdMfx1Cf6/JOBHXX/GX5ErwZclv6hnDIGXTt\nY684nmiRe1WFF632BM6AtCsYu7h7vVt1lwAzgj9Dn1jegqNYP+I5qGqze+sE\nvcQbMT4YtdKPYn07cRF0gJavCyGDNdzX3ocUoDyqoqNtXqOJMrsF61j9Mgma\ntGyGS3Sb63I8D34zmNeVp0kyODZ5DXss/vNH6GVzJDyyWRqpjup8TkL3dVlo\nS4dryxwoisFvWUiwR6+IkJ5PEoypVbvfXYA1LG6uYmEuVtetIO95+UQ+XAwa\n87Iu97pbAmgt89FxRF2BpshjBCK5Omk7Lhl9+GOJ8V50ZHiYvq1C6i8yhzbM\ndhv45KViMR1iwnBIHElclFZDOPsVbLA5N1iOCO4Xhd7bJNaNcbrviDCz0r/W\n2HGIVf90fcqxQXtS8UrCRXNlLSHaaV2TxJjFalK0fXeShI59S5a2WC+ZeXlS\nnsUHrTNJB2covPP2BzNRnAZEfXcuLWAweLgK3IH8w/UhrJoMJRJsNiQeVJO4\nL4+JL3w02WcOtz9wkdeoDrVkR2cAFHN37nbMu537xxmWoZOt36N/GJ164kVX\ntkg0DMWPZqSVENJ25o/zyhdkSQRGRWgFOnqD8bYsvXtsBshBXPTBtcdhQb1S\naZvM\r\n=J0+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"403de44496d17614a542fbcb98bab8b99898bab6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.131_1620258728689_0.2682930367857266","host":"s3://npm-registry-packages"}},"2.1.6-unstable.132":{"name":"aws-amplify-vue","version":"2.1.6-unstable.132","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.132","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"be0244f9e3bc8f3d1f3e649449a659703463ff87","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.132.tgz","fileCount":47,"integrity":"sha512-AtCj3kP0dNGJesz9l+/whmm3eyuworyYcW7JSduthG2cvDnElmz+GROD9csPnrot6n50wt78YXnK4nkJxX6gEw==","signatures":[{"sig":"MEQCIGR9ufHOJfioG8MWoeXZWZJ7mp9aq6tvT+v94tVhcmnPAiAORqyRxh7aL8rsTW1p2DoAzshT4hC2gbWwo5d/e9q3bQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglA4oCRA9TVsSAnZWagAAkX0P/AyW/gt97UQnqLQ8Eih8\nAkgZR4faCHP9wJOzcB/2jdTQARgAu1Tv0+0xelbfXrQRwdF7VPdyuw6bFSDW\nnZZyJ1+y8E/tv/7zGmBEsgs1dcQivjmqKRTycemFnnhI3U0h0iCV2TbupH91\nBnMlCpbEn+upH/k5at28QRRH31sN5wQ3qbYiQbHDNDESwQBCjcBtL2j5Acrk\npmyQBiB0xN26nMzo1n5CCzRMKBxz6+N9RcnfwBmJ0pyzkqNjpYeitot/S25E\nunaU0AwS59YMR8prhDkhpIfFfTbdG59VNm4LHVeL5V5KQVvO9RzljIyZ8+Jf\nPzk3X1QD6WzFXq6J3rQQLIottz3aalppddS8J6hbIvq9lbF1j9Jwz2MDSdUc\nxorHcBirRiFhJtRZe0zFdfib9itm8rHFiGMobombA6T1ThqIXuW56o/N+ada\nE99NPzaavFR/k0SzMjop8JkMTaBPvvESOP7FsUPArlOGc6RJhTJ4oqM4sMYu\nT42LuSS8NmKqdHkaBXHwzu2Z0ZiojzXNwxDOALMhgIw9tJeSCwlLsd6ZRGJk\ny6mF5WabLmQfJlG7CPmBdQ6bQLBUIebIsyO5VkQrS8Po3+eBnZb1wVVFvJVM\neOxn6UoeW0RToUib1rYsstB8qdvTn2j+pr/NQUQCVsJDOH3ZNC923gzLzl3j\nKaMF\r\n=N8cV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d3462aab1dd4916dd757bc1c80f9a944e0bb82dd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.132_1620315687877_0.3671227113938196","host":"s3://npm-registry-packages"}},"2.1.6-unstable.136":{"name":"aws-amplify-vue","version":"2.1.6-unstable.136","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.136","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"8860875178f6a9f26227a61ebd054187fe182f69","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.136.tgz","fileCount":47,"integrity":"sha512-tzv/wwR5E6fsNq/gDNHOj6JIyFKfLMEnkF7vk4e/RoEObfBzf0DJf+49rtvm04AVEsAPUx129H8f/kthlA1Fcg==","signatures":[{"sig":"MEUCIQCWT47y7aJGvWCo8IUDy0d//IYhMPfk/OFM/+mFmNQ8+wIgJDYBA8/6QVhS92QwCY9DgIdmXr8IoFiwYpXTejq1kLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglI6OCRA9TVsSAnZWagAA1ykP/iWbxaesRvsaGNkconUZ\nvApCzevE++tOwFVH2EGAuDrgLE25lRYfIiddiCt1R9Sv4wI+srSpuVkuqw0I\nS40xbO1toqNVE57iRQ5435tmsdnhacCaTOf1nbT3BAejFCvEZ/P4GB7AONd/\nVi9TYkMQQnzo5PZwLW3lar/wz2Xbox5ONokSDYs/vubuAdafL0bL1LJgiqwG\nksczvmVfsHnx53OtS6Ao9/Afgf6Fj488Y3KrDWdmjgw/WnbyGA1FVEG8U9UR\nm+EHn9Z9R38BxUtukEvgEsu7Ah+vq8A/pzpKlMtIqZYz/cLsew+k/kJMr+tl\n3VvifguHuPbGnzCSxBCmh3P6wvH1ko58SlOwEgMqsciMipoSdROirOWenazF\nQfPAVZ3Yk8qrD7PO11z+jkTC1oydfVGLDi6/4qLGa/8GOhQp+xY8MX8DAUGo\ndWeSJxxxf467acUbQmFdashOxntmgDBXwlOOEMV+VRAe6T8fKiuZTo1TeQQe\nT8hI+lv/gRCc2bPV8UUnxk3tk+CNzeleMhm3DSJ/E73ECv4+8NL17eyGeOO0\n0JH4qoYE0KHB0Tl/hctugNXSFrlBaQUShMuPhViWPUbkCfJYZYuY146mLaSK\nuhQs/+yPuIB0ncbW+pPQ2tU+1TKjauHeykl0kYdjBnfGZTpO/ujNqZeP1XW2\nu0Z+\r\n=GrWY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fd27546b20aa37283c155cb489789847273fa782","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.136_1620348558342_0.6613287280682718","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.60":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.60","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.60","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"7a91a2de0e3f8884887646dde8cacb8bcbff9799","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.60.tgz","fileCount":47,"integrity":"sha512-ItDrfrg35TdVJD/oASDmx+UiYd7/K0bpGmcY9r9GBpypO88ghmUIuxnWtgCpInCjHDgidYEMDVTSypCB+S9yIw==","signatures":[{"sig":"MEYCIQDx1mv0v2czmzWOnAhL8YnwbZkHTjaKNo3c6dWf0M+kpwIhAIrTtFmjm/C2acrh/rowA1ZKh6K1A/yhEaPlCoRdBPg5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglZDTCRA9TVsSAnZWagAAamsP/3Y3E0NzJEOZ9UbO2CF2\nFnWSlL9If+7R0COs95r38Yhn8wPx3el3w1YvcwGIki689keqrTJQ46hvjzul\nqX6VLSNi5jV5W94GoAaDB6HPvuvl/qW6pzta5QtmqWSgqrw4YKwKu6y6Vq8l\nltdk3yU+bK/j5lmM/O5B5lAyhtSr49mIV4tQ7IRAMLkw3SyX19PixF+y9rZ3\nWE7hmGdUMXI/rEef6kCGLeO+hzH/w7ebUkQ+ZITtYJHptgZ8RDzhsxI9f0y/\n+23/Sg1aI0VAjXDPFEqwPAQiF/mNslM31JgtHhqnp3Mgp3JY3+k2i3yVU/jz\nEfDq13Gi95eIwfHVYU/ydGVSFo43Vt57WVwd0dSjsKa4t4SEYIsYw6PxVf2O\n8h+cbvfJ4WxyD4kc3aOlij/VQnPzJPhod4uePkX/Pxk2yL5Gj5IM23glaVWc\nJFLSE6INY5hbPku6FcBwxOHa4V5UYGP8vBnXEGFL2AH/Q8AI2adpAEvOKnuv\nhyEHwoF7/0a7XX18Kj+ODe/o8cJZ1rLtzQmY6k939iD6SNWWQ0YRwPXPDFcG\n3cYvwqIOqoBlPlTZs/ukkodrtR2tvan3S6V0XTv5QSMZOOzD122x1LdrKJAo\nwSuKnD2n7SVMaHxCaEQ4zKEtp+UdDG5kIKg0OJtZV4oqfceUFMwtIbAUZjzR\nTuCO\r\n=Qta2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6c7969e7e17483a044ba54ceb7f76fcb81584fba","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.60_1620414675078_0.6975870841389922","host":"s3://npm-registry-packages"}},"2.1.6-unstable.137":{"name":"aws-amplify-vue","version":"2.1.6-unstable.137","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.137","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"10f01dd73747f596d2c8a22d60f86bf3462eb099","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.137.tgz","fileCount":47,"integrity":"sha512-xhcktaClw2ex12t1a8fEjkR3lITWOPLFNJ18tQr/6+K8X99hIx1Mvpk3xcSog93XK34mUwSMDOdCbn5jEr5s7A==","signatures":[{"sig":"MEUCIF0YYCEEXyycpuRyCRzyMIOpaIw73QXFgR3UFe6XH+bAAiEAgfEbZd3jHI4s8WVkmNmqMRh4aApvNZovDvF6NzAjkg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmWQyCRA9TVsSAnZWagAALikP/ijVbKYzQEBo/H7mjZpi\nqs/OF6s9DHijH4XLt534Q7rH+i/SKHAd6BSnCSe8ny7VWREM3+FOPC6PvDMb\n6ipQeGBvxQXC9o2t48zEGwRwXc7wABoriQtYJwauUJ/edf3kwj2Ol31acpGi\nmUGWBlgLWBTjfNcb90/VQG7Hnm5KrLViYlJ6i41FNxuy/GLnflEjgrTWof8w\nQ8PRrHpnJ68xrtKt9W3X11IkHTySUkCmFP9ascuSvJJc8iYuV6IV80UYF3La\nff36RRPYwvo/0JQ9YQq/KF2FjqQND892OW+WLxAIZ7oY9MveGeOp1hyrJDoD\nD3v3TaAAR/O9IQzI5tSX0hQv+LXgFHVQHCa8OLaEk0F8nxz/W1uoELcVTndV\nhx2v8npaTJtQzLcuSHFxTZ7uLuwbXUHoHxm0McsMOxdvOPWFHNgqZJIc2iog\ndvUDR68QFEpevUIRTCZC4+gCFA+BgYgqXnl+OucIlhthOIGIVRjKMV4YQqle\nQS4XhFDl3ZN2YfA/b/IIr6oEznkXiHuBZp0iNaopQCdcEaaB4ZyBTKE1lHMx\nYPVmw8i91mFNivBtYbVvWUzzrXUMyh/23v+g0QCm3QFZb8aETn1d4bgIgJwi\npUdu0cINYstqTQs8L6sVz7VtuQg6LaVx+xqvfyl6bkM3hYxmlxJgq1RbzDUQ\ngyD2\r\n=eJN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e2740f042475661c4b48062c451817397a0074b9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.137_1620665393633_0.3641068861531589","host":"s3://npm-registry-packages"}},"2.1.4-native.25":{"name":"aws-amplify-vue","version":"2.1.4-native.25","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-native.25","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"480fd7e2e95967f52bd087dca4dec29aa2e1e80d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-native.25.tgz","fileCount":47,"integrity":"sha512-g5Sc6vV+KQL197w3MUuVOxuBEp/x8mtDMLgyHTRYnsdc76NZg0k0Zxoa71h1OE1srijVvRr322844wb7mTbeCA==","signatures":[{"sig":"MEUCIBqb3Lagxt8RZkPgw8UYtN9GVj5fnSuMU0Ngbu9oeb/rAiEA/05uha7g4uMrjaXzDw9jwMudQLWXIiTFbd4xTBR+VTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZALCRA9TVsSAnZWagAArNAP/3cb3GIIDngqqDuS5niS\nZGxdQxOlhx35Ep/D1VzhPs2Vi4+DHwqspsqKGDPGvXpyRhFP96kGplXWeLEm\nX1WTQShlBpgOhkU5SfBoj2xW/eqR1ohoCYx+81aIRWEDRwwQL8vP0AnRAe1F\nzIe5l+C8vUdByN4XM4lPWhqcEqpl0vcTb5fdm9jOZoBmCsIz8F36KklGuvJ5\nDE95+XPaRjOFube7ehL3ybeJjU+7c7ezC0/qz520ilzsopk1nXu4aH1aIgDv\n3WQ8kh3Ld9MXwXwG1oRTvhUIbXi3HEkOS8xO0zBMpA11/vWSvIQobmv4nGWl\nLzAzbKWpPi7fVcB5lqaZ5CxUdRznZoN1eS+qgemdBfb4iUO7HYNq9fp/HYYh\n5mJywyDQDKPh6YxLIW8trCs8k5h5qx9HE2/MagGiRNC8e6LS0ZOjvei0eqoK\nES8duXm+DwNU8u4p4azKg3NpOhuUVolC8dCVRhiYZ665QqRZt/aKoV0LR8kc\n9o2Z1+X2kkzBQwbBsu+WwWeZLSkQAIrs/UjGhoOQfFA5xp9uzkI6Ry2NBtBV\nOGVsZOaDHbyR0Rday8UwTIrkBxdJnjlLneZBmpiUxmX+WHM0HyYYy2KQY7et\ndk9/hugQmsjpM739U3Q4yJGfBdf3LYGZaP9PEgIgw2DAYWPHEGzcUHmKnJ9+\n06vc\r\n=w3qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"01efcede3caf1c89572fd7061c8e943462068753","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-native.25_1620676618432_0.049188167513046555","host":"s3://npm-registry-packages"}},"2.1.4-native.26":{"name":"aws-amplify-vue","version":"2.1.4-native.26","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.4-native.26","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"88e5d6a5c801266f87b925744c1467e432ba36db","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.4-native.26.tgz","fileCount":47,"integrity":"sha512-JiHierc1Rsb+UrWrczoP5vRabG07HVm8myTWM4+zjFovVBZv+gpCHz/teYiarpDgb6a87cAy1HeCC3Enp+A/Rw==","signatures":[{"sig":"MEUCIQCUlImtfImHNvLWFtFZDmGD5dsvaKTbaHRc0puj9qxEKQIgDr3BD+osg/ngkSNjUIwD7K8RkVu0U2gkQ5wFBMwt3uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZsqCRA9TVsSAnZWagAAw/gP/RPnEZX8wiiYw8Yr2ZW6\n8cw2GrEKXnw/E+adHJNeHrQs7JL2u/1SKFmcf2GchSiQLNBmGdotM3zZemR0\nNLnaLmS1783YVmgD2ITv2i40NUze6dlhX9XWcEh68hoDtccfnVLlDKFG9MMy\npEHfG0A5i63LRavz18kPJt/BQiAtRPgUJKApoxcpYI+r4x6vFTmo68/6w2N7\nlrSJOmjIZgi1s1VqW4s2awp67lM08gnGWCaolzxjxq3sy9ORDl9g+G5uC/vX\njK/M3jqEj/hDi2tQJ7FzUjPNWgVRp9Nzg74QXXJN/k/npMYbW5caX5SUJRva\nJiC9n4vvcL6EFSD1XlgI6NuI3eyQpfmH+wFhAibs0un34bsWDJ3p+B8NOJZr\nEmCulbISVOfgkPlKHhnUngfVmyDyXZC3JI/DonhjLkzmu2XxJVpeXHv55JjS\nvlZMoXxCKfJ2GLfWtDvhL8Vpx9l/nRY4B8HIaVemNPtcgXlLuxApildRhYqH\nOcEFxTvmqcf1zfsO90Xx3fKFqtiCuJFPx9H3dW9MpRWmGC3/66D6Ott8qKAo\n+6uEW8J/T1sG8pvnf4sCXBC+9GsuW1gm3Qezqs9CXgTbqR3Q1zM2sjZAGH06\nt3q5WdtCfGpwxD7KVwlcb78aTWnhEdCnuJ8lRmv8Gf7TfevZIypkESNm/7DG\nZNbE\r\n=BVqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"23c9eec796b49a76277df979c0d6c8affe7f3480","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.4-native.26_1620679466039_0.09660344431728762","host":"s3://npm-registry-packages"}},"2.1.6-unstable.138":{"name":"aws-amplify-vue","version":"2.1.6-unstable.138","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.138","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"a4d4f536f8389a288204c1bc0235582fcd2ac555","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.138.tgz","fileCount":47,"integrity":"sha512-/0Je5lMW1W7BBwVBS4/WAcY13GRKz3i4CoX/s5XReNlwzcHe85us2wgsg+EBvWfslnXoQCwlkSCp0I2VXwlx0A==","signatures":[{"sig":"MEUCIH4Cyf7cMyqCSQGTYd3BTCBRBsTkDiEbW6Xb2AvJ/6mXAiEAq+kJHkEbCAxOhwYASiBF9tRIQRtWffRNLvxs8cM5KR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaZvCRA9TVsSAnZWagAAfvIQAJR3rv2I66PMnx2FnMaK\n+l1LkXSPehSlBkoNsa+cjK969xobn1rHo6t16d4HHAtsEBOGFN6pIX2/HfD1\nCCKE3iICKGl5E3ZlAWjodFlopVUHWKTMq43i7hObkvKjftmNYhn5mWPL7SyF\nTMpbl2ZSWEtq0aRe/n9qSu0iKWiaiVb+VHPLE+zMV8XEUWvJtwE78TGaWjfy\nYK2SbcIoQJDKDMIbyn1J/ZVcNkDid5jGeIH0qQ4UgYk00rCw3K7OC1JiUbzt\nOBYjUpDi25Y90cgeF+tntEbFolNDpn3ZNlVPBO9R1P+TpVU5gpl0i8UGaCQg\nAC+tNxyoNtFaNKuulfm2rH5F0chrJPexDxX28e9oo9umdTQPOICtBNQcVR8G\nFDqrQ08/JAHAwmGkUZfV7TsRlRQrLx5P/XrfjQb6aUObLAJd9VvJEjlhCB9l\nXaRJaDMmtLNCtuaFkEbl4VX3NHvzrJjGCHln0ZUufbflK5wP+2OY/f/6rsBw\nUGBFF2J4jHo3tmYtvajLSUwSQeX6Zhi4k/MsvB9HCu8NK/EtI1hkdyko83DP\nhK2PS2H1ZbEnzbJa0cQdAsthpQmRzVtj5LCF+DPQVPg0ex8t7cX4tgxtEcu1\ndm6MqtGbuP/acnJ+ugdc4I3ovWNPRjAtOmgJGxBr8ySICYAmXBYmaLzmU6jb\ni4C5\r\n=fnMt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1de48531b68e3c53c3b7dbf4487da4578cb79888","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.138_1620682350614_0.6533575503737439","host":"s3://npm-registry-packages"}},"2.1.6-unstable.143":{"name":"aws-amplify-vue","version":"2.1.6-unstable.143","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.143","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"51738a0ed5f8a6a712ce433ea102235062d259d0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.143.tgz","fileCount":47,"integrity":"sha512-8vnhyvlCiFRTm0yNIYDKM+F0hi2nPPdMo6bCkorWqOd18MKbj+TpWJukQrvoDIzqa3cXOl5YXv12SdNpJ0ArFg==","signatures":[{"sig":"MEQCIAWAKG5ANshIITHcXYYenSECU9P7TWmp7mGPx1nI2pCoAiBk9u945RSfIS2lTD3+5fe0WBt4OS6YlXdkZl/8OSiQDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmybVCRA9TVsSAnZWagAAd/EP/izq71ca3eVmfnNUwusL\nXw5KxdIFoeYW98qgx4ziQRdzXobTpJmZvHmeGVDHf3GlX1aBZnOGPTzzQ7ZM\nRjjTXIHQ2MHr5TNk+PXgQqZjqZxS4F8cGSzFm6oZjKV1l3132teO3HsXfhDs\nAK8fRIbvuIICMsHrOlXj4Lkb3EyH6UFvSPZFLyNQ99UDAJ8nnQxf4MFT4NZ9\n9vVjlKIydNRv0ZtW8VRZ3ch9Hs3D5d/t58lfTa1O5toFNG32Z2s76WZO5TFT\nZ63jEJwWzXoJS5N3I/bwJWhkWYWcdFBJm9aIH61h4qMMAU6FD/2ykdWCN5gk\nmk0izfGM68Jzkm4kCfTYxSEvAZC4orCSiBcAo6vMBgtzqm/qhF+YvlP7HOel\nwDlqG/3P3l4uiY733qKqZbaOSiDN5a8fw/UVFnLBtk+1Nr1h355DrQeiX8ZV\ndFJBCzQw0yOr8+BwLdhXjmpTTTs+GvNEAJz3RLiEqty2nJCL/t4TlinqW6X4\npAw1TyntVKog0ZDRRN5Xa6sJZMg4Qc0iUgFRgIYklact900YU6pexyKco6Sw\nh8D0Dt7x7hmV8au/vdc4TBgFe4LylRbmg98c5uHTkk/A0oXQRz26r0o25Upx\nJJnuGzvf6Z04wYa7HExpnid4nFwf3+edL40ueEyLaDeYSk9VIrMZ3bXKQPti\n5pL2\r\n=dQT/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c48ad83beaac019281b735fc54d7a98b0a1a4d2e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.143_1620780757107_0.009686151132264342","host":"s3://npm-registry-packages"}},"2.1.6-unstable.144":{"name":"aws-amplify-vue","version":"2.1.6-unstable.144","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.144","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1c414ab06e9eb4b389931516f107e2ab27860bb4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.144.tgz","fileCount":47,"integrity":"sha512-S1elhu9s4+X05gZvoc50P6j5JfXtuOv6xmICKDj0ihLhNzbuMwN+vkZoP5j5h6yF1SivDnBqncSz1Cd913OmfA==","signatures":[{"sig":"MEUCIQDKCMM2u++o0qjQyxfyzCU88HFFrAu9qcHLnUdLtKW0zAIgG9MTVv/pUXyr8gY7QVI+sReI2IOiej8m4Ccnqo4s3Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnDtXCRA9TVsSAnZWagAAHyEP/jzhu5reBP40Gza+pH5m\nFy3Dga09B76LaiBGSsRmgspUDHsmoJ4sAwtLL+PAw8kj/Pky/bDkj4coYHaV\nI248KWz1N7fq+rjXiJ5vfWvpIUfL9wwzD65U+KGD5M3guD2B8A/P9Hylrs4h\nC7FJZglLnGVAZIt7L4AVvYDGYQ+3tj2+MhvlFwCK0q1SvCyhYGA0dWDhFaPm\nbVsAaz8leJ4rrpTsY8BMBPPsCo+lVwYq5WBi5uQ4cS06+rSR6Sq42HidNE2S\nT/Rqkc/Zr/ruYscAn5dZenam0pMRzRLbfaQXM0UU1rgWBRrx74jhNpPl8OcC\ntDsFsaoKJpipMHZ6VE1K+Muva939ZK4Ud0qGVHSYA2kHyEwkk7WzCjntHrQJ\namMnzRitRgPn0g48Hoj1wEvCyovnqFeS2Oxoc6fh8sTJgIMRoyvjuvxj10ob\nM6xMGmA+u5ZogSQFQJL6BO2871ouyQe1531baUt6canhXPDqmPK4oimZ/TLv\nT8Dp9qM7Y8svSKcdZQDXUehbl2fmxgKSe16SywYNTtkfdRN5hb7dn7EHlWEo\npN05+Pz3+qutKrT5PGavSgOEgdYIXqoF1/8wmOdOfXmrtgR1SpRm5gz4ydpm\nNuk8oRX5a6y3jMPHVjpdvR4tRwVuWr0giyX+G67g68cEsaXHKe4HbTLXIUnM\n6Kyk\r\n=kcvs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bc5a21fcff0a326d79ddf41651a8997165d89da3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.144_1620851543284_0.7052280018005366","host":"s3://npm-registry-packages"}},"2.1.6-unstable.145":{"name":"aws-amplify-vue","version":"2.1.6-unstable.145","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.145","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"7286020109b533ed218f573e9a389f2033414f07","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.145.tgz","fileCount":47,"integrity":"sha512-Ozno+RZC+gNhI7ZmwjXcJbOT54ie75k3tHwB00bC+8cgtFnbn+WqzujUMBffLOS+t6E937FfK7Qcl7def3YuaQ==","signatures":[{"sig":"MEYCIQDwZQ8HBiwaRSvt6h7IB33EwE/R4Ya5YvH099sMzTedKAIhANURrnOE0vHSecPDkeZ1iLWiYVePw+gsJn894Fnfkr7j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnIfpCRA9TVsSAnZWagAAB9AP/Ry7ibRCthsQZiE/hOCg\nj1ba7rx/ub6kEewxoX4f3GINZFCN/ebglVqcNiCZGgFIl5LdcXYF87DEODmU\nWixtI6nm1Hud3cartukMK8Iyf61PRu+SNXJCra6eLBkZcQmsvJ5PL4dPmzMM\nL+WZQN2LuvFEBh1usJny22+SY+7aML4VqRkA4FuvgRoWnU5DwHjFvs2mR9/D\nDcmK+AUrNGKbry4gIs8X/rC3Yth9RTYau9JUMTm/FjaKW1a5oUk2FTNxLgyJ\nwedG9OFqiX9K+Y+USzIm81Ie1FtJJGT5dIZ8aSvpqfMV0FQoUbSt9/5Q08bS\nx/G8GQ4r0Y49H3D3PWSgomDFkTKj6FN9qq95IlVBR9WiGq4rPfbsIXK1mdHD\nwUtDsWSlFPQFxawwh2rI3o9HctyX6d9Jm90FNYKR7+bT83Y+bEjv6712HHAr\nCRZ/QZMKE37GQ8Lgt4ia3IxmWss9a9klzmGWcqcBmK/p5Fpbm6tX5nZ4OirQ\nL9/Keyg+nC5YnKh/6Kgr1px43pbQzFxRZHKwmsvCtyhEjUm7m2ZrufTI+2hU\n8UGwKAhsiS3ykiRDDQDrnJ0TiwDw8+ynMjhXEEFqzcd/QchbVO9BQWTJyZtL\nMiKummNOQC92Jjk1e2UdIwe4jJci33eQFSA0VdEfcYBCcXba3DOJ8roaryM7\nzdyq\r\n=BJDt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"652803799d2697039e15ee3e44aace204ed4d417","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.145_1620871144574_0.1616232586277917","host":"s3://npm-registry-packages"}},"2.1.6-unstable.146":{"name":"aws-amplify-vue","version":"2.1.6-unstable.146","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.146","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"c9d1c461d5ba3e393eac995bfe18cad4e2aa5d45","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.146.tgz","fileCount":47,"integrity":"sha512-vE0MK98CO9Q0pYt627J1z/id5h/IdVDnIFFoxXDL9/CxMk9duIKCFX9Uih2Bk7xyWi8OAtVaFWNvLrgFneW0xA==","signatures":[{"sig":"MEUCIQD3VyjvX2ZrLc1KkDPI8A8MABouPDj+LtmXtHUUbn8EtAIgBOIi4fI8I5NFuaPdgeKFr5FAb77BKSkpt6kqnCUqqPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnbObCRA9TVsSAnZWagAA3MAP/3McFAQ9mpLS+gFBK2Vr\nb9hi4Wq4ltDdC+h9tOgRZm7oz4wKOlS0qkLswdilAzd8EL9iN3q3FTJ7ndqt\nLGdH8shJGGkNTsON/jery/LjtKITrZ5empHWgvyTbXdly4DcROdOH6irn4dN\n79MYtM5FvF+cpeiCr0AloH7GswzlZ01d5BsmkCI9/EltCcHIHFJHJKyNYPpy\npkQS1MyFb18Xcajtj41UnpJEBs0e5z3qYPrYKkbwld9LU/4aWKU3yVFd0hx3\nzbEsFtv0LMEe+pLSLGNPm5NicDYnOKWole2vzuEynmJWUysnqO0FqtLq5M/9\nSQLbHDb5lPJBjNElJV/iVzH8wTgRHBvp+Bf3xZPQiEM2R8cQUARSqwg1C9dm\nOBUP4mrdA/MncWVdl2HqpEtb4ubBYTmlZsasQFKPv7TlDfxPeI9fCMk5sF7z\neh4CJ/65fwFujcezKhMmLCuG7qUP90Ym+ogl5G0mBTncYaAdRwbWVCXYWuXc\n6HJWO7iMfxiNJLfVUhJ8bdEKFGQsKcAGhry/tdFLAhVLID/Aeo0ORuKGXtay\nzsyTc0tBH+UlYXQLMReitvA3g4H6p20+qWZxtrkhAWeGm8nLI8YvhSS0bKzG\nKv3VRB9eFiH16fxvxJnOifOvrrn3WonQEPSc9TFlDSTYYIGT8PbgFWtx39AF\n3b7X\r\n=WuL4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4151571ffa516db3f54eb76c97418e103805a667","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.146_1620947866486_0.6837649749490438","host":"s3://npm-registry-packages"}},"2.1.6-unstable.153":{"name":"aws-amplify-vue","version":"2.1.6-unstable.153","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.153","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"a6bef88ba7558b8b437bcfe39859709cff7d1cef","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.153.tgz","fileCount":47,"integrity":"sha512-G+bB0I88+D0+xJCP5IDy7Veys4/oHVHj58eP4yPJXjaabNP4fnXXRoSEvkjJdC2EDu9nJ3Z3f4RJl35ujrI9zg==","signatures":[{"sig":"MEUCIQDU8wI3S6sUPoFBLO77BJFNPbl8UuBI+RjR6J8f6pC73QIgHlimHD+FwLhFJX3r2eEDbFbgSkUj6lf0c23L2aM21jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvU2CRA9TVsSAnZWagAAAkgQAIrggI/LyQZSE3FoW4jA\nvLbNQyPByhHxVo3eBRWECAq1Lm3jLQKH/E7jxGcV2tXQMQ8905wFfZYaNZGC\n97AKhqMLJPyPtwWbnDs16z5SkwYG7JopuZlvK6kaJFgSojFv7+pr8AlAJrOP\nn6d4xFFdS/4Fa72CgTHUjmK9x40keqsJ+bb8DyIsL4Io7uGdgViCciz8efUm\n/gGUH3ueZ0Dc5gQ3RbzZNgyHvT5+xUsfI1OkuVlOJyLvo71CqZtDx8eKTsrd\nSELiUnJU1MbQ4KaRXTeDX6MLbdsF0uKlOUMsNPvnTusHUAFhILpmoj4IT0nu\neqh5H41VK5HDQyZbT29a08XGz6IEdAO2efjL6t3m0aKf9RMCdGSLYd1C9pVF\ntXsl9/8ej9dRCrk9ub4yYLB5pwXndf8lRPFzuREDR0aON93Q32k1LnAACYAw\nDZBNkzFi96oje4YdgpGlESekWCkVWkSiLUNcErKIxqR6yu+ss/amrRo43JIj\ntRbmE7BcnRgV3upU3372FyZfKRPg7X+SylXiIrBpxWYVg1p2WmlNfI832PIr\nmGm6uX9XjKV1OkGlZIMwzIipcXd06CfhcoZbeaW99WJqSs7XVbnKQcaS/2d2\nvPRgTWv5x8t5/mJGz5QbQ1RjLU+Vg6rCr3rZ9+mBh+2C+MwBVwHzMOXOevpA\nO15r\r\n=IN44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eb2942d436d48182f3e51cc163d2112b17656fa3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.153_1621030198448_0.8251353898637199","host":"s3://npm-registry-packages"}},"2.1.6-unstable.154":{"name":"aws-amplify-vue","version":"2.1.6-unstable.154","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.154","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"abc3e8e39b72c6a7ccb07620c390baf3634fbda7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.154.tgz","fileCount":47,"integrity":"sha512-f2RSEXO+Ic3rWok6MmDBRlwcy2P1NH6oVolJH5XpGQZLsMiYcV/ScQG7IJRgA8jTNEuQxZ+9tQ9tNw8ujFWHdQ==","signatures":[{"sig":"MEUCIQDESc6UfLWyctEnxUT0fEE2ocSPt2h2CSa8Aj4f4g8Q9AIgLF1goVCinPcFDhke8FwG7Y7laB3y5+HjMQHGtUI3DQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgonzUCRA9TVsSAnZWagAAPxYP/A/6P85nOjE/YaXvDsio\npRw1VcXU8MdBIWQktIOuQ0qTQSn7MDRm/iPJa6LjXahfzzN0jdoo8E4y8g5S\nP1HKLLixmTleXhPYa4kk2epngOE/G/eqQdo3ZdYn4XwHMExgZyWilI1PwMhC\n1g8h4HTx4+YA0PsnU5Y9J8TAKNGv43rpme8pF9Yg8et0GyNOenuui76vfj5D\nvSOyB28IrmjAfm+5i3nFh2Bq2DQZVK2/9D3l8queC00yOqQ3LiyqcTUR0NjV\n5UcMGorUn83X6NMr3mW+KJQzs5d/1ZNqJ8KyQj2UnEetbsG9Pf8nsUEhuusH\nQ1aeigSJFpqTG7D8ZBvBbR3EJ5xdh5quUL9WyYYMuDRzGtVuG4NWZBEBm6Cc\nKYNeoJGylPK5A9XH3mrUZzuxJWdm2BfMf1I9lbhxYevFMj5zhA974Ty45IIp\nWTqfq9IK6omCQNYqDu1bomsYHHrfVV7e15o6xUWoI09P0zQLDlLLTJ9WZyZk\nh0cIkBhdTO5+wNHyejzXkPAIxGUn0WmvIqYHH99R1YsU2/fJR0pL5gn7Gslh\n3fj+UxzvJ9/aU90CulKgwOa8pEME2AgARE9gxhw7dNBwFHLUydHmLA7zTZcI\nUWYT1fBdBJxUty353xy0Te9NFMO6nXgVkwhi6QplyBcvZXc+EfUybojvpEeW\nNRY4\r\n=6h8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3abfb8fc68d916a5f22447652fe81bf81c6977dd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.154_1621261523732_0.056854460988340794","host":"s3://npm-registry-packages"}},"2.1.6-unstable.155":{"name":"aws-amplify-vue","version":"2.1.6-unstable.155","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.155","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"ced8a9aa4807dd26f39c55fffa715f6ba9b0baef","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.155.tgz","fileCount":47,"integrity":"sha512-8QyF6xexTN+AzK/8Yd5ujiMWazytdiTkf9KIJbzYKEUs8lspDICAsqJXvicak6dUTOByyq0sjBznMZwhr6BYrw==","signatures":[{"sig":"MEUCIGU22ogwzpnYTuOdQyQdY4/EsluM0fnP1nOAKokDM7UAAiEAq5davUyX5wpNRaFcstNk2acV1lcktp2PRHOqVuyW4Ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpDQaCRA9TVsSAnZWagAAJSwQAInjeTp2vNhFw8AM4LB2\nNo7/RZeiOaWDcXzChycmQzUJzVorDjHeeS+QSLzE/el6fPssVBs7pGIJIQNJ\nxWxRU+GXwnzmqYxGBR7z05hzv10vsZsMi9FoRVynZLDW+AysJiVp/PWq8Ya2\ncKhh4SRTEe95gWANjGyN8VMdCYDOrztkH9iS2uRu2a7PnusYdVqnb1js7/Dz\n6kTPUTk6Rx3BEAHG7sai7mqeVnnQ1zgaTVXLWD7Ry+ArX8KpJGgNDpveYSQb\nYodH0axLou+C+yIbzRN96aJPIUTJxUTZ+5/cZsrsY6aULuNjdWwENRp0kQle\nKMtyTfu9tEmisbseqbxe1IEzR8f3ussaJPJwrvOuQ8Z78w/zqUrMqnr4Bt8R\nLBtrzP17o0fbgaqBJFT7dKu5aZBrwM9KjzP/3IpEHPo60PAQrUcmSABIDgHW\nMmcnjL64scbR4u+yDuA2fIdepDShTYyYw8+FX8nbNArd1DU9Hazzsmh3CtS5\n+fuqsWrFvaIowIjqxmTZLQqTvegfaXuzgg3kpxxbswUP+Q65I2B4uSwut1I9\nemuaCPcZRSPwResOJBBF1bj4xk0d/TXK6ZKBch3zZby0hns8eAUm/v7Vj7ve\nVoPLpvJjWfCg7S0puamjoCC1uldCd4+kUjKuLZ5fHbTQxWgI3ItbUGGDILux\ndY3O\r\n=9sTD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2627619f0b782faca4eba9df4d817ccdf12b0b2e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.155_1621373977957_0.4688262048724634","host":"s3://npm-registry-packages"}},"2.1.6-unstable.156":{"name":"aws-amplify-vue","version":"2.1.6-unstable.156","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.156","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"d57d5db96fe54300f57c0eb4cfcb4cfcbd60ba99","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.156.tgz","fileCount":47,"integrity":"sha512-pYBhq4E8hFe5Oy5eOLS9O0V7P0C/KTqEgJuLjyBsEWA8LwcFPECl39iy0I208rcOE07nWGMsXosCHuJto14nig==","signatures":[{"sig":"MEYCIQDqEhQsEnilZDB4SvddPrn5kSpw5Ncx28m/8qKXBKplCwIhANZOcGJMSsoLoU9Skwjd9SLTGktWaqGggulYqo7SgyA0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpFZuCRA9TVsSAnZWagAA7U8QAIcXUWeUBhm5s8Rhw/KR\nipztamsv8aMm1dfsKKnU7OhXyxCCnd9bh+PV9Lqu0Nx+DmqHfZaBBPcqBGQr\nqC2Hzd+YrrHlSME4znlx2No/ncYslWsj08DaaOlDr1HKACKdDK5TI9PcmiyZ\ntVmzxCGwnTzz3juXlELOuf+ZCAnyXAMhLDb8vrJXQ0syFCN9+y8V2d/Mii0P\nnr+Y71wfVCxoHE8TMGJKGMT2sn9nwHYmaWB6vT2sjdpeFIFxUuRFrbbf/WzK\noY7Dfx/zB5sSd3lVZjn1c5CRhnzsnlDAp0WV2mNX8cq7rDffQEpQq2wA/feB\nQB5KAiKoKkROo3MOZdy8c/NZb5yRn81ySJDUYdKIq9WpgcFY6v1rK9YOw6H7\nO2rqaCapwkMOTYP9Tw/XnwOC9u613T7W7cmg6YfhiM3X1NMudD4WCw8ngJpm\nSShGMsMe+4F/Ndy4W0/MOcJiSKCB1oeIITZ4tEWLAS8iCsiDUR4TM12UfcZg\nKceMAASOp3C8i/B8HHTD2mSHYJ8uMHJ86aw60VdiU/OQKkba4m13XXDh5cxj\nUL0ztbP9HiUo0flIRAxwJobl30bkpTrTY4PqMY8xz5kvpz+yCMBL48kY/p+G\nD9C5wYqc6W96f4+0m+dmDQmZzBLvbQlbbW/pbYlv0d6lMk6nIFY6QvoavtZS\nzHwf\r\n=/T6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"396920bf53f139835473c0c08f4e5ab6f511867d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.156_1621382765920_0.8082333685321119","host":"s3://npm-registry-packages"}},"2.1.6-unstable.157":{"name":"aws-amplify-vue","version":"2.1.6-unstable.157","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.157","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"af841516ec2f4c1a42c6b6eaaa24c5a934f7e857","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.157.tgz","fileCount":47,"integrity":"sha512-c2rqOXv9yn06D7DysmUbDzjOWIyyO70cRCBJLyGzVfxcbSWM8rMu5PPCHX1HR9OlmVi588Jew3kL/iQi2zH44g==","signatures":[{"sig":"MEUCIQDMVHrLE5XOg2pc448rPpc/Iy4mehR3LAOvW42xtZ7j/QIgO/N0/KwKHiUxckK43h6GHiELxqNKkrCACRWiuYMJez4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpUmgCRA9TVsSAnZWagAAM1sP/iYotXO7DTMMr41tqL8v\n2T/0k6LrK9/1NG/Q6cJaCOLy7UxafXiz41atBdJK0NqpYlJySQIDWg3tfLwG\n1sYEgl1vIv8p/uHV5NmASbwcffElepNS1dfThVRgEmgB/DfcTqUx1LWfveNS\n+VL8elddRLUv8Zv8HhKSGSweCsNg9fWJ+FsCPqFlX9zSENtltMbb5yhOsgaL\n45UBN2cj0BRJrRR9srOEdlcMrK3ttUNhmsneukR/OzVGLfLbJKdsXazuCjIZ\noNDDp7pnVCdh1CVo4cFartrEspGs1ygF+zPnPSgN7//TtJLepqRQuNf70VCF\n9lLc4hbo34SQEuN1yzHrtcp0aOYPbMGON1QDZSGxqvNmTlQBNbqEjf7PuU64\nVsxDmfr2gPSX5x36XR/KYTvbw4DKqIp+d/VG6c1GOuQWsQjAB+ptH5UJztzl\nS1xEZ21iHa5gp9//w9EpElsIOI3K7RtFp8lxRBEc+kI6Da8yBgEHCGKMdmNj\n8c1jilgqfoo8C7idazQTzoN2YvIlwsbMValMmS8vETEgKZaUjy8K1BA4dZSM\nP5yz8tlYDRbi4M3slg9vHTc98F6Xf4SMGC87jZ+I5Q0/sboBTc/0m8YA3o0W\n8Vg3ywzjIniLFz3B1BCS0Cy6xRJdEuY4WQONgUPVzAlvGUpTmP8bBxI2j9D5\nt7mm\r\n=QcPF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ef358a761cf74d16b61172cd1a75b4bc6cfd2bdf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.157_1621445021743_0.06493610919232373","host":"s3://npm-registry-packages"}},"2.1.6-unstable.159":{"name":"aws-amplify-vue","version":"2.1.6-unstable.159","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.159","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"313a1edb0042f6cde459656804daf2113d52a2a0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.159.tgz","fileCount":47,"integrity":"sha512-iJaO2f6WZMVL3/+JFLn/it9+RfUhSIvv0yifwKedzYtFMkdIQ4UM7LCWoGKjWr7qlLiQjy4HNoUBlxWj+/8T6A==","signatures":[{"sig":"MEYCIQCNsoJnQEbKTDrzTQKiPnCjSE/HXZgKHnqes8prIbNyYAIhALF9jfpExk3wp7H6bTEwdvbIBqOhTbYW3gdzOCkbfxHJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgprX9CRA9TVsSAnZWagAAlnsP/1enT3y36R4Y+SIUI9by\nqjEGOTTFNTQt/zsk4jf/1t742F8hx3TINzwmx+b3ZO6naBiqLCm+AjiymtHg\n7nm2fFqFSY3HkeiuDlTaVdJb3w5dNQIu2fXZzS1EappLnEQB1l3YSuULEV2n\neTd3RQsIebc9J93oXlRYIcSpFWMSMTOoMkwTAyywtwJTb+FshHnoJRjhgLn9\nVp77BesWY8O+2RmPfvNPnvIR7BAA8PLoz66BBTEWmuhD8M+nzjiOLW+pZN1u\nWw/TWPfYAkvhCvyEXtIxVRDKRVp3NXyIE9PTy1lCEPYYpJ8/hqTSgF4RaXwQ\nvx02tn+lDkGIziFbl/jxtNm9NY0GuFoTXzwY6Vbml5T5L0Y0sc9xGjvw9YMi\nXjPTyruWbLpwx5wcdSoEDYPuXERLVD1LZkDKrh8haq8LOfWblaGgPaU/Xaj9\n/DECOoyoiobEFpxczKNxzVKSqRhEk3rgaP+iBP07EaAC8bCx3UyuoHDehJNV\njte2QT4eob+H6r23aH8/KLfOK7iuwqu2u9Ln3QVF99PtxMSxJUf9RJqOBzgN\nmVID+RXdc0zlvNdmvyrBE9G0S8peqKHcV2KuEYFUJyMMwFxtD9JQsTee5z7v\nHk0pAddA3CYwuqOVjN1OXoOXbG1Nj+RTH19gTF8gwNzL6XD6mlyEiPAaXuJM\nvHWi\r\n=uyHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f61d8155f7f4049ec00bf42a313b69ca88d49d78","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.159_1621538301326_0.34398891557950595","host":"s3://npm-registry-packages"}},"2.1.6-unstable.160":{"name":"aws-amplify-vue","version":"2.1.6-unstable.160","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.160","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1557656f2cee4ebdba8015910c08bb473cf0ed7e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.160.tgz","fileCount":47,"integrity":"sha512-wsnf3eENujlIzywyjwfPa+5Q6KWEsCVOsQEzcnGNlaXMbeFF9re3+4pM3UevsgiBhXa/k8EW3knklwp6vETuyg==","signatures":[{"sig":"MEQCIFOq9VHCeqFRGORhgpDA79p1YqFOs+KzyFPrzhMfl/ByAiAq8fL71WKguLHoV+nG8hH0yfc1Vo0eYe1lJe4yWvMaZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpvX+CRA9TVsSAnZWagAA8TIP/2fUn+JS3Y0AvI5kzOqi\n5Usvs2cd6mci9kgMKfSUaQXHobfHTCKQjdAk/HQwxiEzd3BT1l8yYEpULaWt\npXsCXemKsXuLwB4jGfaVk1gisFAwMdZHV7SyOX3QSCk8ao3OCy0jYn1Jh1fJ\ncs7fXc/kiKT8aZI6yksiO7+qvE/iTYCazfuQTrcTjX1bsNgx/PtJjW7ctrWd\nshCMUzEc/f/f+HLkd83r1VQxpFnf/lqQIkM2hME2tYyTMXvKZm+T0o1E9RLX\nAHMSS/+2UJRYp3i8rsyP3iD39Jcfm+fpr76meg4kwsPuAV+H4gVQmvGOI1tW\n9HcCWjHh1WxYT+ZhS2LdSkrjAXFIC+vTK9dctsAW/WX1Gv8X/flzkfSTFZ1u\nSHE7CJX1Cjyos3KbYf9e5A/Ic8KgbojUUMNKptmofrV5Oc+s1DikKum3OnB0\n649zqjhL5fUjoW7UgYH1lDDGzzeD1wqKLarkHew8xGkYJc8RRpIMtRvG1YpC\nqttTQyYAI569zVbZd0HdplTF1mXzRI6f2pZvvBv4t92pgNFqc0yOZWQ/2mqX\njnh/tORXM1xvUJRg5hEjjJn2LivZL5gPeh64UPvZflA91WBdpRHNU7U847rS\npVqfzPxjQeK8AVPELjmGr1sZUWIxbthBcb0LYBZdJjjqjEMN4MfCsN36Cvrx\n28MN\r\n=N0wi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e1624c17fae2edc6aa35904993171336fe9f597c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.160_1621554685661_0.28354568526661716","host":"s3://npm-registry-packages"}},"2.1.6-unstable.161":{"name":"aws-amplify-vue","version":"2.1.6-unstable.161","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.161","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"445d1e90ae85312433104750aa1695a88a951946","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.161.tgz","fileCount":47,"integrity":"sha512-NrdHDhPzerZo2gW+NGBJvblJd7EPBjQKFNOpWg6qVrJBNbzRoCmwIncW6saG1kLqHVLqvUpRF2bBL+4bM8apsQ==","signatures":[{"sig":"MEYCIQCd958tU1o+sOhVEuLdRMihu8kH6NyFvR+fsRCAUKxVqwIhAKRWZs4ZmteA52OCBIVxrGlzt6jx6/UoLEYsJ68JOXvT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpxA6CRA9TVsSAnZWagAANs0QAIv5+l8pxgHlgat54Uug\nSxDOnVS5wWNjNJPvDAUGHggOp0c5P9NxQT04z0TN4E/NDxPnm/ovYs04O6UI\nBMe7GQB/OhDOgTDyZHNTsqQWClvR8eQAza76fwYeZkfE7sbe1E5/WtbQGWU3\nQ8XdHhii63ZEwB1BC3/1NCxZNsFyaH8fNCggpyfCUTqA+H7jTMqrmB/GrUbu\ngBK28MBHe3CmGEVEGaa8hto5pQ57j2cVWUkqCjue0tF7vX4K5dWYYE3rk7Lx\n88fj2pRm7l6enQ8nG7ljmoQtlfLr8uVezn04+/emYZtuh+TbCvUiESb273T8\nwTn6dE9tP+Mj2bZKE4W/o/DkgehSXQlcOBdopAC3Nauqqg/BV5tboLrqpxwL\nSuhCWL+7n2SmRCgmMfFO+wKFhysj/GCiY2CL0+GAZDv3je3RdFfxB4L06P5/\n01I4QN90IJAErEK+36dWatvvdoCri/rObAGydEAMqIr/nRBbOTTqn1vabOtY\nFRpMtnvey+fkoRMb0MHvdJw4RSCCclj0lQMa7Qe0Lu74/19zUJvivtWB1j/h\njp6eFgTRf8NSmQd0BOCDuxa8vZl5tg6VGz23o2v/pwgkAKuae9cM9u64hee7\n9YwNP2FoLsdO1WLyKkcabNKxDoEwayhNQYcemBuOVsC8/BzuiErH1xNpkeRv\nRZFi\r\n=1/S5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9bc6a3c785a8b288c35db243541187303c2103df","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.161_1621561402169_0.2628773785786698","host":"s3://npm-registry-packages"}},"2.1.6-unstable.162":{"name":"aws-amplify-vue","version":"2.1.6-unstable.162","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.162","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"c3132d4612c01b618a97f9868e4dd636a864bea8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.162.tgz","fileCount":47,"integrity":"sha512-ba4Q3x+7dO9f72gTMe6W3NblL7Yq35z131b1PBwvPSBPzZ+9teyNkLSAwsNT77ypaPxIkpF48Vwq/70n1PvbZg==","signatures":[{"sig":"MEUCIQD+MDAQHJGmIfC4LgL7TszON0RBTiVcITGQ6DEybpb5qQIgOpjSFKl7T4GJXRgGHM6tXx9KGgu7MM30V5KxsH934Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgp9OKCRA9TVsSAnZWagAAeu4P/3KFtmkN094dj6qNhkH5\nKqqUvpK8G7IAo53kbKOlgmlCe4XpfDDN3fn5kdDEKOpoWSOMDlmQuHxVVpqH\nHI9TJbsd61uQkVv1lwf/S/8pjEtRK8gDd7aio3QO5Z6kGj8TMamVczd99vh2\nWnCpDJ4Oi9ryySCh6lzHo1qfmCQ36dfLYjPoZYJLIoirxH5QbdOr+WbogGkA\nQylMqXTnf8D1nH6PHvM5UcyaYCLeGwci0QKQragF/UROfV2MZAh5mErivp31\nJJsrtfaK7Zn0XYhNMBqm2bYow5pg0gNc9M3TD8E7WrPYKrl4YtKF185uNFaw\nOQDKaiDGgc5EJaaElod83kj1idCgELB5cx+Tje+8M9N2WWhnXRN8g/z1uPtd\nbuFqNxGiRjVWQ1ZqNBVj+LymnkhefLCjtGFtnKkjTko18BkWGFXQtEiKvYHb\nNSEbcuzKm3W3j8de9zuBH7fGsElA2KLYeuD8vkwC07Qvrj7OzTSJt+x3pMbf\nqTYTT3AOj0ArY5wkEoWfW1NPyzIKJ1I9h51gwvqd2VRjtsJp63kvZxbKuQPt\n48gUxHF5vHrVG+nuqkx0TeGcWMHUBWIs+zQkok5i5u3HUxA8e0llyVb6XBRk\nYsYsmkiK4cn802bfzxbufZaLxqL1P8MvfBnQsCSZtzam3HCYIOBUvAPd0RMW\nPybD\r\n=1FXt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"23d31d4b02b6962b40926e518b09dde4721d0822","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.162_1621611401420_0.6314830418647255","host":"s3://npm-registry-packages"}},"2.1.6-unstable.164":{"name":"aws-amplify-vue","version":"2.1.6-unstable.164","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.164","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"83405f8d8eef4dd87823ccf6b71aef693a9f2fb2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.164.tgz","fileCount":47,"integrity":"sha512-khr+0AmofvZ3IxlmzA4yv2Fd50bmHMtCMjIDSV2a+zTCx1yrGqvVuWizMHIgF5rUhTS5WYfGEWlqJEBnUqjKQw==","signatures":[{"sig":"MEYCIQC5y2EVhGLXU3BDBJF5Xn9J60B2UoZdt1cTO2WZGXE8cQIhAJklKOj9zPxJEYhyRfCeOD/kIr8CIPBuKRDj5+owqOE8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqGHFCRA9TVsSAnZWagAANAIP/R9CYfm0CArMr+vOrVVI\nv78FtMuwv8tAVmgEJK12UZBuiPq7h4yrZcGB82F9rJoTT9Q/kIVAu1s2kaTK\nMRlhciGThR+vde7FFjaPk7XbK30Ew9oBAI74cmkXlbSnlswFtbmhwagjV3/q\noAFLfk773Y+LUcPblIZeXs+fAKT5h+qIUM39wTpDwjOwZqLiGO46cb8Q9T/G\nn+rfzZ9VnrtoYD5IHe5EeP/e6X6PWDI9md9Vwp4L31MOZJHGroYhw8Ypemu+\nEM/N7DqPg/xFcUJDyPF/ZQhWXj2v+5pIvKcotfHfJL/UOv13VuzJD8zjn8E+\nKTuW4ej5vvfrQeSLed3LDFXinhiHiqFyXzjpn+ZdzEX209QCjFmXe9gQ8tSU\nLV/WzBMNE0oa8wfE50dFD9pRz2sXF7j2EqXBYzhUQV+64UY7BQrl1i8TKn4X\nWKfPIweTrKRh1MBOtfkWy6pmP++ppLEhhHKoda6s3OLoYb750e6afMVPvPe1\n/PvxDtI7V74iJfC3rn/oLjd1NJyVY68KBc/nBsL37ezJP9nq74vnoTn/zFzp\npXryTKf7yiCVuJdcsQ8lAUFcErqkd6n5LwjzJX3RcmCg8GO+/FJZOHJCGv2o\nABRV3pPbWBJ3anB0pIaxJol5f2XydrP9xu1z45+z0UFVeYvybfiTCiu2NGzv\n3qhw\r\n=VfP8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d59880c4a427efadfd4c06961e352ad678914721","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.164_1621647812763_0.7976273724455063","host":"s3://npm-registry-packages"}},"2.1.6-unstable.165":{"name":"aws-amplify-vue","version":"2.1.6-unstable.165","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.165","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"d8d0dd36805080f2cd9b31d3a30cee1aba8ccc7a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.165.tgz","fileCount":47,"integrity":"sha512-QRnnW5v/mD4CXckVrH7jLgVQJrA9KbtgYQg+poyu5yJR8OWt3INlhA9JFBcZjudhBNGUDgXb4HjRDRG/RYT7jw==","signatures":[{"sig":"MEYCIQC1oMz/pSyUNzmAh9ATwq0rpn/LZHcn+xaHta5cHZarwQIhAMbAYOdYhrdUXB2X+IcsSQ3XJWHkZZSwk4D+m5egUjNk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq9aXCRA9TVsSAnZWagAAUGoP/iCy3EatIlQbbZbn8Vrr\nmZPB0uN5eN17h0GF05CQwi4UrF38jTdA+BUEXRulofA+FngDBrRueRc/8VkK\n92rx6Jb+oWbFrOUFoqiQC0B/66AP1p/YEPyJvh6WOpv8+M8iWK7xiZGLQ8Tt\nUieuoawuxvsTmc+HAKaTKLKiXdkFtPoRsOa4j3sSC2ER0akHz7/gKh8adQVQ\niMdfvxxzXKnrxLF3JESY16B6laHF70RdLGpW+Mvu7GS4dwbtCXu7EtCHZk+z\nJJeIpXKgogvK1koByHAAlbf1S0cN3C74CYdRjsUbMxOEIJynlRukKCqjyaxu\n3zq0xTZNN6SBIyPBRJy9gt+yavpOapk1ZmBcz8CCXMXKYgDhrlYr1z7HIJZE\ntsJS0eudXapcB/fu686Ps8U4T9y/hVoUzHiYWPRQdHcxmMxNZdayyEpFgr5C\nZhmGyrvYUTYQHBLrVEi2XGY84YHq0WeTWs1HEKSN87AaXSzBYfe2zDYRaXm9\nsOg1BN9/U0vUcRAUj5yBgHPGDxrS9m6loVfaaIl2pCsZx2M/ujyHNooAt6Wv\ntrbW4QuIiFxFk26IGsP/AI48RGwWyJ2W8S+B3ZW78AXfxIzuz7cVzRKBtRKv\n2Ell09r41U17INFBPmPCCLavv1Rr1wH5wERu+8VtXPDJG5lTG62hCmZ9Hrgs\nB0m1\r\n=yd3k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8d62d9d9dd1d5934f40c0b800ab2440d805d4239","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.165_1621874327502_0.7436052732810869","host":"s3://npm-registry-packages"}},"2.1.6-unstable.166":{"name":"aws-amplify-vue","version":"2.1.6-unstable.166","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.166","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"d2efeb9c7f43dc2d4ea7f83e0d2f8d38022157e4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.166.tgz","fileCount":47,"integrity":"sha512-wyPJ48LvUWZz2bVXqjLQemHSd8TRagvSmWbfOkffPDNvXhWu2sFDgr586ei1CuDZwyXsGcfgOmkMka1ZE59lCw==","signatures":[{"sig":"MEUCIQC8hQpyquImUZtD0RlzG0gcq29AvQfuTE+pTMYGUIxXAwIgTLkpN5kZ7sMtMoAAMSR5dOp40R0disp0gmSFiWKsRPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrBiDCRA9TVsSAnZWagAAo2AP/1GJIYOXwV4StPEi1aVw\nbYjO2VtLzrXZxDvaSpia+q7/xagDNNWnjrSnS026Zcuwt1bcl+DrITj8STu1\nmp/WX7ImrUcCCw8fS00xvZsO//1PXUYnKBatexlTil0MUnYuW33uzfP5VuPl\nsz4CDPTiyhr1U/79yHLnaS5ZDBSMcCKFs0oH1FNPNu91EIvmTAz6Lsr4rTT4\nruMtd3uQ7eJ2h7FMXZ8MmD1E+dReT0/6XeJdyfmgCKpb9vdx35OgAiYh4OSn\ngw79eANzd2dSoNZwVfRTGJBIq0PTD/srwwD2BL0h7A0TPV1UaKPiIf4n8Azm\nXoT832YTrQ7Rq7qzb+7hcNdsnwNBGUJKaDSri9qNgfAm9JmxZ1YPHN376oII\n/Kdu4XURHdsZg4aLOUyEdL7S0v6Z23VnJZT+Lv8qrZ+L3NvKgFCWaEe86634\nV94crlSTjklwNCXnO0tWRxK10Offj9E+Zw4JKJOlDVycmLOjOZqOrZdfRbhv\nYc/yG3puMLlBYNEA7JAWK4as6Bxn4MuxntUtl6SVWls98F/Gjbz6eLk0Qpfn\nWsifekV0Ue3V9VvtKJREGDeehz5GGOQAGW/iP8mTJgV25RX9YndXJmOxA4Z0\nsRxGkb2eKW9TZdHIOnYT92zSlYbGYjYGW9m3ZTuNtn785lRf/cdMhfK916ke\nBn6c\r\n=PZWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"557f0d4c15bdd7f40787e0079b4050c00144f3fe","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.166_1621891203383_0.4712479194379964","host":"s3://npm-registry-packages"}},"2.1.6-unstable.167":{"name":"aws-amplify-vue","version":"2.1.6-unstable.167","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.167","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"655c0237d95e5cfa1f1acd131cdd5ace8414a5a7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.167.tgz","fileCount":47,"integrity":"sha512-3SukcgiK7/2rjGRqY/pLkga7/3W52PhZVGjI101meuciSDgE6KF91bxPcGh3V/d41Z05R4VAskyahFWFfyofJw==","signatures":[{"sig":"MEUCIQCnD5pzhX3AJMubcQL8uONE7LJHZUcO4XRdVkXJKvkSQQIgfF8UPdDKCoyRZM+CIm7g7Qslot9rxYJM/yIbQ+YjXp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrB3oCRA9TVsSAnZWagAAzecP/37t5XYyfvGyUaSoHYM8\nJu1FbXCVaCaGYOSXoGhd8ILmq4gYa2ASHmKvuYq6FyEKx09FlFm/E0iMpOSH\n9bmTxSJstMdOBSQ0ubWtPT2hEp69F+mmIogO6zvD8JFAOUkDwjJrZo8jJUVG\nu+y+ZnQxFnx+ajIH6d+r05RH6Om67k11YkaFVvURqTAq/z/bi9obQbWgkEN1\nGocKHhBPsdXCEjoqqIvfpgj35MyI8+9ny/ywe7UrmN/Sr/f7Y/9WaWsqql/E\nLan2+n/5hKcdKrykI+IzNzJtuGzXCtZCs83rClU9ypAcLrGsY+NWzBc9rguz\n0HhnOZyTFYE0mzTqI3wjPTIgS55o3Sgcz+3GY9p7CHnuBqHfExXoduyJxqmE\ngun503ibtPftIufvJ24xuCJnzCD3fkWMn7NiVqb4pGTj8prcV4FCPDVadWD0\nCJ+Wno8z18lOYARYqTcp24HYD2Qowgobum1Qo5X9yBULehz0XUG4k48T1Bhe\nPmv1lZthRrcuIVouA/i3+dpi2097ss7iT0FziJ9Ecj0p8rShOJN0bFr4Uz6x\nEvfgWp2ssROaWcNyevZEgdCSY5SiIi4yRe1CY1pUsCzZY/Suc7XFUACL+qFi\nBWXhWEw4yPiPFzZV1qAMmfBxudVHFqFvxfGwhVG1/+zetQdBCT6dfZS/dLO8\nIGks\r\n=pueW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8448b4fe1f995f0d6056bcb46dd0fb2023fb197d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.167_1621892584252_0.25186989495218004","host":"s3://npm-registry-packages"}},"2.1.6-unstable.168":{"name":"aws-amplify-vue","version":"2.1.6-unstable.168","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.168","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"396c8756df22b60304dce967766670af40cf2912","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.168.tgz","fileCount":47,"integrity":"sha512-FY9wieJ49k14F2OXopedXWf8RcUtLXc9IOZy98arPh8wT1mkLuvBeqhQKk6V2Q/wvqMiLJLSSWunbr+2NvXqyA==","signatures":[{"sig":"MEUCIDiOPA2jWt+qTLgsH3LwIp5puOT7+PHKzMFMGAyllLZCAiEAyAoH5ps0F8Zi61lCknVQc5fPJJZpCisEEYOkYf7mAoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTYlCRA9TVsSAnZWagAAgpcP/2owESw/Uio9KolFkc+D\nF6S3mjFAqwW2MLis1JR/w+EdV8TnYWao9dvPDkRKk7g7tTlf2CgSkqKue77w\n+AZewYg3TJ1nCgXA/JmkgOee55FxBM/FdFhNlagt+n+kWhBxHqHgxG1Y6cYj\ncM1ovPDIir72KRZk3DQdjSnL1rdmurq9hUlmVcYXXQXp6I2jKdBu0mSlT3sQ\nJHFFY46ETPYDpTtq2f5xLhy8cDTbTliHrmuQ3MW0eVRrpdhtVYnE3RKQIJrr\nYQXpDr0G6bJ5xGYAZ4ruP2BB3fiW+g2jt6g0XbJkXeQqa35rIzvTylEbBW6C\nhQw02q2utXFvi0lMnnt7pGR9D18ecNHxvZZJ7L7g8JrR3P9usNzyMq46wf36\nQezZzdGPZjh7rVHhHGCMh5t6ZbC66LvrFDyMMtYnqWVi/6DR9iYuBgdJ9Fr2\nlSpT07jqgiwFWRPlkuI/lek4A+W6135335qNsJMc6bYjgkbvPwQH+2NOvZ7j\nwZSvNUezmwkPUvwzi/sf+J++QzBRMkKf2Dvn5gK3Nya4GI0yLzZ2pp49EUto\nAw5wuJvFZ4+9yMNH7dkMJ4RfiR3ft9dbN6s5FxHmeMatLd/j8f9jUAiNPh4Z\nftj2AXY976H/L9pSTipkr5hbZq99Mn62f4rO+GzebzANB0edCUWVikX086Sq\n30/J\r\n=7Noi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"09c0daac5bdb08d238c31adb15e936449c4a322d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.168_1621964324886_0.49597354623932155","host":"s3://npm-registry-packages"}},"2.1.6-unstable.169":{"name":"aws-amplify-vue","version":"2.1.6-unstable.169","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.169","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"b06bca957a77be57bb0b1355c1cfe56a5f7a9442","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.169.tgz","fileCount":47,"integrity":"sha512-WEpxXpmeBOXSOX031/sbyr5I8o1ZlZs3wsyzHE24HSpv75gdexve+7FhxLBZrLiHO3z3ttV+V2u73R1aY3kGsg==","signatures":[{"sig":"MEUCICaEOiOCGcDpjbzdlEHjsO3bz60uwXXgdDXGIQ3RmTurAiEA2dKDtEXmV8KdTmT6FBExdvsjXYWcsBvHILqeZHaQtz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUAXCRA9TVsSAnZWagAAAZcP/RdBhsNUaTfWqMXw0+pb\n5ysXpnDkTB5C9GQ9R4e4+snH8CsGJ283PmZgM61D/m+kaBdqj8ZP0o0sroTG\nAz6QxEpzaPcDwvKMWdAuOIZbVnseMV6FnMqbrjndikcEnsTZpSL4KuBeWyUl\n6ZPbeZP9UsWbcobzYI3gv0HR1I8fbJNLnSkos2862Urpu7Y0OWJ2TWMrt/es\n6AHx2XnZh/d5J4hZeaQ7ANIfS0drH68/BVvSlnXI1AXPT0sYxOYxjl1OgJG1\nfIBiPQiRZxEYkKedG79gd1txBh9YeN521jPaRW6GeD/H6TE3HdEXedZvDcuX\nui2IqUpUXGC4i9E7AMAUrM2nI/gNVR3KMGqgLmE7cBM0vcq8MqXPfxCEg8Id\npz34KEWNqN8cyMNqmR/zrDKVtQNPcTBcEL9MEmu4gmOPsT3lmTexeQ1KxYkE\n+pSnt9Mpy6Q/JJjqJBLs5T616uSjztBCCH0CKb2aSwhqt03AuHLl75l3AyCf\nanyax1jMsYi+gk33g6HkI0GvuBIGsUYqzxZ6UfbEkChjH4YM8X7dwps3tPyG\nKGMSZuSmqXwFZYyO+rVqR7Rv6GtabMeziMgUwDfUUIK4+6NNrTLUDujNIACV\nLXjxeUp7lwhs//YY2F3A4qwz63fVuDKHrcCDk58zu39LQz32KHnZzB6OUrj/\njhvu\r\n=A9Z7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"47294af4815d4fe2012cea432b186ab95a545111","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.169_1621966871053_0.5508204364235232","host":"s3://npm-registry-packages"}},"2.1.6-unstable.170":{"name":"aws-amplify-vue","version":"2.1.6-unstable.170","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.170","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"2e04d7ff42aab606e1d48ba06faeca3225cab26d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.170.tgz","fileCount":47,"integrity":"sha512-Oop4kMLVTwctjMEMtPzNt5X3J4fn3cMNRD1TVcaWnFyJGjJK5qTTNLkOyD3lGqV9wnRCBhJIMj4P3i8n7JmuFQ==","signatures":[{"sig":"MEQCIG1r5ZU6JZjr/A7HMRXYGwFNthMRsnJaGBpdEBvSAQ73AiACcAK2j5igR+kNNBmp5osQ9mC6GCOzIE91pNRJ5cVEIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrU4RCRA9TVsSAnZWagAAZ+QP/1ly8raNZguV0LyP/HS+\n0mTygkIIde1cpHnUmfXhwKYkwtPBhdcykSgtrrB/Wso1lqlx1J0S4upOUbeT\njp/MxSpKMcb+AaxDmlbBQRzRrusTHFIDq9Fwp/tTD53/+R+v/Tq/h9DROxHM\nkge39E9cikUPn4ByTmSMUMp3CqO8GdXLm71k0r+ku8FLMPtOPqql6aHLDzhv\npSw73H4HE7nc8hhJBWWgFr1D9sa4SNKOndbZ1prNRIAwKG2ff6Wdf+957/nP\nE3C5eoNjfj1rj4dzYTa6Uhqfd3GVYTdwNfZ6GqDBrZm3o/p7Cn2NlX2OutPU\nGKWn+6Bqw+lZh9i+Pj+v2m/2SuxcCdUGHhLhktdgONt7f+DCgVD8V/iQV7Er\n2ba268b+WGMJbDNdJxrUNRuynd9edyTPN3MJMWlcGXl/JO/wZGO3L1uq1YEt\nr9hOtsv/8cNeEvhnMYNYlcy/tK90CCIsnGhHAMMm8oyEagLAV87w5bVN6DHu\nVN4oNb+pWBIaiQaLUEiITJod3C8qfVjw6/Jp8K4LwgkefjwUWGlrW52oqknY\nmCFrHkWBPS7rVovgD6g/42Tyov69HwnQieIjNg0RXQ+kLtRsO3sAbTH9uf27\nnxycsnjW3oLUps6iTj5bEsinq4WBsesZ1fErDtKvolxane0OoDi0sufek4Fb\naE1J\r\n=nd6j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7edfb667c40bd5d423fe1a76934b64e7c534ccdc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.170_1621970448708_0.47146671982050803","host":"s3://npm-registry-packages"}},"2.1.3-ui-preview.61":{"name":"aws-amplify-vue","version":"2.1.3-ui-preview.61","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.3-ui-preview.61","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"03109bcb19fbbd73e5039f49158a4744dcc72ae2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.3-ui-preview.61.tgz","fileCount":47,"integrity":"sha512-I0ANcIiq1dMNv/5a5O/aHMGrTMMR7JSgTLDy2cNGoWxgr1d6NjaYUirO+/VHOkish9yWo5H85wa/mG35NW9uMw==","signatures":[{"sig":"MEYCIQCIuQiyRAtNSh+Kjc2zVc1QVmwWfcDQzCdglc/Djwno4wIhAItkC54I/TLJkCx7Xsd52wZocz3brYvhFBuJPreEEE6F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrc3jCRA9TVsSAnZWagAALNsP/2wGZkx+2ZPLDInmZGie\nQlOZdWDvXgTboU13wtH448dmeZAUb5GfVXB2l0Ok39yNsi2Zfh7F8rKRiEcR\nYyO6P2BIhXKz10VdVWIVHmmF4bmWL6ALi8DLgOfLX+ilEGuXux0VX9JMVSnj\ndlY2wF2qZalSA1K/3h2m1lWC71/Pm5zhB5YrbVv7zUTu2ZTxkPCWDvgCikT3\nJt1iEHYC3b8HUFKjP5slfqP7PAgl1uinjIcQ8zEGmIM/RqopsAhRSftWIzI0\npOcpf14IGJmBIvU5Zmdcg7nl58Yt96CYJYSsYPvlXuov+CbTFV+pV7nhBd55\nbb7GyvKNGLMs9v12jxZu3y3MrMgye3ipFYHXbakZ8l1wDIsROgxxDn+TlMl1\nf0o2PK/wTQkY+c1Pk15Csu3BBV0Yyc5yAlgzfEHgoFm45CBMhjleGIZLz+oG\nNHK+CzFLSfhZbHpLEneHqeZLpZWLxdGqB8fFPqfegP60zfzffHCngZuSQdFD\nY0/YQZLu2Fup/Ks1wOPi3hRbJu6nFvgl5cSR3Dgkw1dAw5W6nt55WmKB3mer\nEKfs7x64tdH5UR3HIUe6sdxBmLA+Ktc1W9ecl+gGuumYGqqTDnBfqmbGu/7t\nWhnxsonD3RqNPFg2EkhNsGanmoPzqfTt3TE6K+FRKvmJ7O3VLgxEmoEVpKG6\ntTtP\r\n=JLeJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6bec8fffa917253c30663ef650e2d8f2e37a48ce","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.3-ui-preview.61_1622003171530_0.1701743630227628","host":"s3://npm-registry-packages"}},"2.1.6-unstable.171":{"name":"aws-amplify-vue","version":"2.1.6-unstable.171","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.171","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"0a92c0c4f9643c1e812711ca07705f1e94e2058f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.171.tgz","fileCount":47,"integrity":"sha512-FUYdwUHrdrX1OblSBxS76bFT7CsOvHpVyX4ecK6oWB0MSgpudnrYY0lMqaAgjJ/rOrOWD5HNLZMXULeOZzSA5Q==","signatures":[{"sig":"MEYCIQDJ853YuSG5hGZJ6Yo8pE5GOCpT+MzYAM4F1kYE+rt8jAIhAIDiKr4CNyepU+8QSVATyX9vzRgBi1n4i4V3gCYLaTk6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrnFRCRA9TVsSAnZWagAA67gP/RVOAOoFlqLyjQtrwlUN\nS0hRo5YYXiGKD5ht4ZSna8M8z+x1cCza9kkX9xmIg3jiCTzgzmEB4PZUDYjH\nz7dRIXAh/4xlohOi4zLCmVUzcwEOfP7bc8nok4NgYdoY16hoZJF2kwKIqgxg\nvVdzU2NcBIG3oOl/r0Kv/wsO8CGcw3ntKEOxKOKRsbc+YaNz96Rkc07lPxhW\ngVFzdBGMRm7xf+5jWUxJjRPaWab79WPzHDpGPiqRq2eAucxf/BJj7nhng+H5\nqQqrlVSycWTzhpl8D5X92qN7vravy7NG2JYUNuofCLiUgtRG/N7wmBSfcvIc\nfUPiNitaR1EhCfBhYiUpsZjfFZ5vMD0jrkX/9gDeM/bEIS2UAB6eF4h1naBX\nF91eYpK5mzYN2qvuxPD0V7JZMbHt8wZaee8JqvTfksdUhM2BMSf1+CiojLZC\n10uMFha0xvhn0VB7bNUza1RsuBIXD3MdGh3cNg/4T6wQOOD2WdBT6rMC/bp5\nMK2dxGy/oZWGP9JYrkzdYBGRMWmDlQBnmo3jEf2r5paPh+vNtcq6k+Pbmh3A\n+bV99m7+UL1B6ZHSGdRcjdBnMJ6getFvtm882Ryh6wgM+6KniSGzoBeVdL0s\nuDvZgmyhISmC4CwXw7MnKase3W7AO/xnpYCZtOI+pmfcoP1PIDhhHsMiaDAx\nhUuu\r\n=UwGl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"edf2b71a4ca3058883d27067fb6c87a9f3b339cb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.171_1622045009525_0.8676936516298037","host":"s3://npm-registry-packages"}},"2.1.6-unstable.177":{"name":"aws-amplify-vue","version":"2.1.6-unstable.177","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.177","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"441c30f1fa2f875523d2220d25ae1689b06f83ac","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.177.tgz","fileCount":47,"integrity":"sha512-BlPcgyuM1YGhEQ5Wg6p0lbKXo6SAeGQwa4VaOznbdGX2t6lRENCz5Ikhj1JnF/Lt0ikpz7ffFlDJMwz3ZDc6Pg==","signatures":[{"sig":"MEQCIHZtYdbNrMw/+fC9003QT+ISV7dn76RPURMCJXPFQfd4AiA2FyjhAdzvZybjsjVR6PqabAhD62Lpit2n/mDQWnsftA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgsFUNCRA9TVsSAnZWagAAHqYP/R/Vt9rVJNoAyIT1aSmZ\n4Pn7ZK3o9qjSwLBMOidTmkECBdGtg3taqn+Y99vdQafpFMLhn9FAvEISN57f\nefcfQn4VJcT5W6vuQW53BKaI3YHbJP6i0uBW9IVFgnY5Zrjs/se8HDoSVAKa\nz04JD/kJGUmOAkmqd1Wn5XeipR4hu6HulH2Y3NEtlefoNhd7Wfto/y0egz9C\n2XieqY4xme1Fqkz0F6Rt+qOWbFzuwOOzVGDDlIGK6zfB3SmK5gy9QHBb3PhA\nH7Mx6IIVlqBMhQChs3gFr5ROvrlpYc7BbapVecTnQoUCwOpIiM+Qs0BrVYk6\nQ4Xdz8XtVpzz58TsFoDEYq4H/6aJTKF3sbAi7sIo7ilUoHXOeAIKJKr2Nu0b\n44qWHE+AcHpbQ4WtFkF5cO2wdwA4+WBXnaTJgj1niiQhri6MtU2hQYmIcSFx\nIh32Rs5uE4ADQWyollJWM9pAGA44wCE8Yzit2LuJ6TdRcaP13AZMVOnUhXJX\nFYOtSFrTM4/NhbCniGH+rcMbcWGt2GTve1R9bFs+DtQKQuVQRHkvRXUabYF8\ndk0AnD8HWItad6mGLunddt66o0faHqSk1kWs9SlRt+9grbcUikMJioiAAveC\neKN72OhMNdNnFn8bmjZeoJTyf4K3LvqDeDcrUvThQLRnKsxaBfsI06/GisI6\nLqfM\r\n=OCtW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"56deb453a2b31ac8c7f53741507dca7df8ef7fa8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.177_1622168844921_0.3115487063117064","host":"s3://npm-registry-packages"}},"2.1.6-unstable.178":{"name":"aws-amplify-vue","version":"2.1.6-unstable.178","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.178","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"794102587093c109684bc201f72617042eaaa3aa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.178.tgz","fileCount":47,"integrity":"sha512-l3wjns//TcFO0FJ7JCSLN54OsAVMuQaMKsmsasDdn/E96BNVjs1I30AhtRNNX4z5XkK/BrGChUuMfDk6Ee2iFA==","signatures":[{"sig":"MEUCIQCMCPU1ZFyaDVJ5lOVAHOsbjF4yln7/czV/WaTyaNbmDAIgObo2QpL2DaVtnYvvJkAeHTMTCsL7MhtwvJr0zM79ur4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtmGQCRA9TVsSAnZWagAAilEP/28JXkxg9xYUnGMQyK1H\nxj+aCqyQm5SMqzkCV0d58PtKVbfeogfiaOX2dJLLJOctEzQkDwQNZoKWYuUN\nj0s99LL+/ikA5lzu0inRmjj54MGP4QW4gZF63IMSwwHpND47uv9Q/CXqUg7F\nDwEREn8VFSu4zXH399lkfVfBtJHpZCwB3fKwnNL/AT5fAYpAo7fE3pGXAUn3\n/+uqducWajFETRLIcPn+o5XNQnC+NfzCm6GDuysJvqG/zksRdZaKunBjHPvl\nLVYQpe3Z3YXQWSIr2ZR6zExe7d0p5h43FqamUgBPt2Zhbr9nM+o5pKVW+f9v\nE4vYfmqO6J/AX8a9A9eJvgwO448fJJi1N+Rg09zn+KnhjGrcW78OlscLqgSa\noJ/wcMStROsk+wlCoM+JP5j8Oo6gFUdGlsJ5Y8JUdpqhMIJEIlMxjdlZ2hX8\n8W4KG/Nojx/gX8nMmfJkhuRCLxeiEn9hZs8BnesQWwcD7p2Jv0fEc8qFmd9x\n8N0s2fdhYesOyj3A8P/qySpzqHQMdNlpX6RA0G+oWAK8CWdar1LEE1LZHv49\nzhaF4EMDLw8J4MN82wJcT11/C0Kn6O/M12LgcttzGB86fwGcj/A9/LF7noVU\nfIeKHSGlrPcv9NtJ1WcKATk8JG5GLjW3duPMSwf33ratNphsV9OnKQE4udFZ\n8z9t\r\n=O4/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9cc52186e687d6782b41581959380bd7f534e5d2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.178_1622565264394_0.8779294712268741","host":"s3://npm-registry-packages"}},"2.1.6-unstable.180":{"name":"aws-amplify-vue","version":"2.1.6-unstable.180","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.180","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"d5d646282f45edd08bcfde7e8d253ada4cc70d68","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.180.tgz","fileCount":47,"integrity":"sha512-iVeMAuE60iBYb3Zd6GTmTcjp6+WNwmkIxeN6Se9YZFx/w9MisfQkvcQFhg2zwtCBAt4hxYSow7zXBn1OergJEw==","signatures":[{"sig":"MEQCIA882uIbQjbAZy0fuTcs/lzNiG4O+NBxTgerxtgbR7KBAiBEhue+ZsuXDfWV1rr9Dk+br699jtEd4hNQddgCvMjwhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt88kCRA9TVsSAnZWagAAPy0QAJ3I7m6sUnLwO1tTmHdu\ni4l7bqMNJhYTtWn8NQbmVGZVh8Smrl4DZZInGb7ftqow0JQZujHh1VbfCMJ6\nE/PZ//gTN7PeyXaOaH3q3gAFj79XbNHdbnnF0284Jx4O+E/sBaqdgXuqapnP\nsgb6BD/rsGV1wUgbtQXUlGC2b43ADmtp6eVgVmDJP/Fjt8Qv8RymFsGAV+ZO\nijxVRw6/23gupF4TPKTvcxJozfHMiNmkOCWUGW94CRLVpJh1lW/PTmDG+e3E\n/JOhT8//6Gn4rJIbEILL5/8yPPn7FYYOPP6b2qLoJ8dYk1wgQYKMEeGf7rbN\n5kLcAgZTwaykwb+0Iikm6HGGqnFtnNLJ/noe3YGIyUi7l0NIwYEpJWaRt1PH\n8zDIVTy9M1TdZlKTrLaL3JDhvZlybVcWM1GhIm10nxQOGVNv7fShcr2IFo3c\nU5mjYD6JKOsdO4gaudnly6A0U85MIKaaOKn+/nxIrgWkEZ6fQ8AHGPHvNj1P\nBpMKIfqKCfkgQ6p2WpFP+ftNOTfSncLLcDwQtWdMj6f+XqeANy0Lfa2NY/L6\nz58913DJHBW7hgJUsLcSBxVe3NYB4CIkwtX5Rb9Aago1uygKv89EMEUXHymD\nq1wGl1dQheQOtPXZVWXdc2xx3+wkbPR8BXefdVUKxjHeIm1XRcnlHcOPjSaE\nVzZf\r\n=RYAp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ea97dda2895ba23466a50ec7defa0dcb44c3870d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.180_1622658852050_0.6666066632978682","host":"s3://npm-registry-packages"}},"2.1.6-unstable.181":{"name":"aws-amplify-vue","version":"2.1.6-unstable.181","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.181","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"085838e0006fb82066249891919babd922791f3f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.181.tgz","fileCount":47,"integrity":"sha512-gxRRO+5YQUMszlJdv8DviZaBsv6iLLu3uZBuSPkLe+SmmNhCZ9C6FDTUdNrL2SeW+/igg36+d+aP9j5QIg2nWA==","signatures":[{"sig":"MEYCIQDc3amOlO/++fihq0zjb5WDKXrFZW09yShdvRUOFrMyGQIhANGoD6FzawxN41dq5GCQ+PUAYFzlqCsJhRwnHh9k4Voj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguWxtCRA9TVsSAnZWagAATS8P/jpAew8zszJzX+mKMpV2\nrs2Is7lR/b/h3l6QUGRHHB7ENARNuVrEYJc21kdO4gutdxbQz2htb5CK3UDE\n1lYG60ENslbEhGhMAQsLGUapFgLr/Vnnq/e+RqiGBqcLggOVfgAbA5SVQ3lt\npCuoDLIKTtJEfpTaSJK45wBxlwnZvcWEna27YpwIWhQKznAXYvCzcUx8Je0x\nE7Aw8uQqgAPXhEa9mQtcOJ8UVQLdc/1YTDhuisB8YPBy6PAXlQK9nex30BR6\nVv1vva/egGenAu8GCcaxEP12fLRI77Gt8l3GIU2BUGbrEETn1mUcbT5mY71Q\nQkFI/FEyuQIjr5VQeFcyexeF8I1cqNdzyTa82NqZhaEjASWUF5CtDOhPQw1j\naQbxYLu4y+H1XU7h5MDG4Yecc9Ni445wrqMfnOeNh01qmo8K94fjDT6iqwHZ\nS2TI/RBha+/NlFSP+gbrnz5SVV4DET7GWPu7NSJKHjg9K37cC7AVDbvRJb8j\n3PIX712XM5WbXMmi0W478esP8D1ubtH6dMwcVrx3b9XwwzznZAIAV9I8b+uP\nIs0M8dJz/nCBYCQnk0ia/TStI9uODd7lyOZpSxwUR1y8I9OXRkIRjgzouOcZ\ndrR6PTfs80UmHw2Hpxp65nj0r0VxZv5Jh7xE09dR0bftBBCrqc3uTuI6D4AL\nI+N9\r\n=eSkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"94f25ec91af020dd72e17e9a9e52a1822923e93a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.181_1622764653105_0.9506066616396822","host":"s3://npm-registry-packages"}},"2.1.6-unstable.182":{"name":"aws-amplify-vue","version":"2.1.6-unstable.182","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.182","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"3fd3f35d1552bb6e7ddaa954805b001efc662add","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.182.tgz","fileCount":47,"integrity":"sha512-dMkyxuTO80aO1btXX4t0Hsk5y0r6wZ446PH+Jvrlk0mL3UEC9qan4OUD+ej+kp3nWZ8OwpQvUMvxnSDNZvtTKQ==","signatures":[{"sig":"MEQCIGMMQHxTns+4bOCncfhsWwhzrgykyAtOa8MLH5l/Ll7gAiAt/qKdp4kCtU9CKrV980ud+7HDlP0nm/OGznh2BAC5SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvlPuCRA9TVsSAnZWagAAmSkP/RmZLQd9A240gC0fHP2E\n0ofHhQ89lcCA/dBj3seTfM3MiBQ5T/xf7IsMdgCe4BQYPj9lIxP+gTfMc93E\nN2N9kTsKDvE6xCRxSlO1XSZEsKiRaNhPqtP88vq4ElrxzCyd69XwXGk0/9N1\nsaFPQ2545QWePGov02uUM4qrMOgDM4i//XMIVWmL8DUpbRdzGc+jgGKQ08k3\ndNDIBChGNQpcdHPRfOoCyS0TgabqIj+c8zhMntJR/OKONIuqwjgwem2ZFTRM\n8Q3BwkV/X1HH2heUtkN2MzS6uKU5GO4hGp7XAHdh6/PRNLXkx4Lmhdype26C\nfyhZ4oNJWYEkYvg2X0k9x6SfiN1U1ypKFFqk6KXnuKabOCh02AfjxSNfSdLg\n04TEK3dfS5H7c4SbiepQrpt6ZSFH1/LgKXD20/vH6YJ7Ec9oNeQB7aquG0pn\nqlG5EXm8MHnAO5m9+KuGJCImBWEQ4bbMjcyxweM4EtIvFLobPqkE722EQA8E\nAUueGUIU0OytV6Bj+k1QZJxZaR7HAROywCmh+jr4NofCerjqy7S6tXi4hWRV\nvhJ6nvEXX9DnG1cZGI/Vro5aTrPaJrPCy1UD9y1p7YDnFfmrqwt/Zu/QRD8n\nCQsRJux//e5yIEhp0P3JDIRmBOoe2Xo0vYKw/JH8Sf3FGSlEDzXTdR+ZbUi6\nasdi\r\n=4AzY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7d3b66fe73e397b3b4dbd33bc6a35d709e38c336","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.182_1623086062639_0.37645525232553134","host":"s3://npm-registry-packages"}},"2.1.6-unstable.183":{"name":"aws-amplify-vue","version":"2.1.6-unstable.183","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.183","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"a65ad1f4009e2d13fb8787858f0d292220672721","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.183.tgz","fileCount":47,"integrity":"sha512-MRAGpfq3RtQGiUyFsHZQSoAfRyEjMqDgpthiLrvPcr7OOMrY+ArrD5tBEpMqETrAt4vJfQ8+oum5KVKmwACXrQ==","signatures":[{"sig":"MEYCIQDWxgI33KhpftpKbGy9PSUkF8wosdO4Onm5A/QniJGy1gIhAI14q0NT3xd39SbpEl9kRgmy4AaPP65GjT7QlN4CL3Ot","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvqaNCRA9TVsSAnZWagAATNsP/26opSOlW/JsHYFUc3gI\nN+LZd/VWv+rgGXdxFJXzYUqDAnP7qwz4InRcR0rQv+9kdEc2uhLPNAHzJIVK\n4YQXUuEUa/9c4SI7G20MEA8VGbRLiF3GsI4VRqCvWMYC2viODXYTPFBjSJ/Q\nj1G5LrXBUgUaImaNTx/gmejU3rO+saTkqG4RUjvJOk+DIGr4eV6ea8JYCfFT\nfiBctaSUtKkgGLa2kRDUYuIrCkmyWert6MG65ac80MpTEoWbjevyznSgtV/1\nZVePdcGP6xlv5SmK0k4nnzJB/Ij8u8hJ36ZQCTJgTp9x1cu9/tVHQbMdG3lg\nyPyZ6WzLCrv35gFOdfLDQCik/XqPi+fskc6PjFRaCwlBoa9XL5LA3Ql0Csw6\nIWFQ9nAgNs3GPx7FZOvxOoX9VFheT6nop8zXF7RJ9vWoGzLpvuNbeRUmpU+R\nCFGhIT1kHkvUIgvb5dnOZagyT6IwVp5CtKafgYDAwZ8UhkDh8sOqfzyGTApm\npz2rlvjC/Bx/hV+QrQhyAj0Recjaj5o9+VL0v7ACaAm8idpuza2Q3+VR9aFD\nGKhAWx4K6WHitjwQ3Y2FVBeT4f45YzOeeiWfHgCyP3APg5C2aFWYx9o0WaZX\nbo0wI8bmmGRsvOY52Pvg+nHdSOofDdv53SsYmKQ/seqW2ibofzUPun6ASBJh\nM6Wn\r\n=wNMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"78f26aacfd8119931021a46cecea2bae52fcd110","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.183_1623107213237_0.2066807553650869","host":"s3://npm-registry-packages"}},"2.1.6-unstable.184":{"name":"aws-amplify-vue","version":"2.1.6-unstable.184","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.184","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"9594e02dad3459ddefc9fbecf0d80127af2521e3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.184.tgz","fileCount":47,"integrity":"sha512-GuHRrXiyIylBjJcy3KHDmdAwXDxTMTzjdhvpMIvmLSTlm7K1CW+4Aw42sIRMcYW8aC7vgKG43rM7U99Qz/yE7w==","signatures":[{"sig":"MEQCIF6fhVt41qMAgePluRABQLU2XtaNo5Xc0ze2gvp75Kk1AiA33Nd/unioq2CPhiwYbhmRtubNnkx6H+flZYa+XsYC1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6nZCRA9TVsSAnZWagAABZkP/ixiuQDGXIht3R6CBzMS\n5lerO08Es/CMxz6MKa/TW+IhQYygnkIqYA1OAM5bUfHwo5432XCcGn5fokGe\nqpdJ5MfYaP0I6tVvCx3Dvu7qo0us4H+0DezOo6NWXe+ub1ZG5MPH2jySt00C\n3aQVHxgOKXxGxMQx2FoIJV6mekuI3at3zlIuZ35+PJEEPMaCjUp0wpc49kZz\nhMR1DdQZtBXoUJN96Tc0KmadmqzptS/x/dPikLKH9b6EQhYdrIivDWLUoZqP\n55gct+tDl9hN1vkpuaGtfXf4Y3htGPzHqLk6q7OrdCxs0CPsyTUoyCe8hnAu\ncvvZ/z+dRfVfTTiAzUR4k8Zqg0QDgCK/DFrRbp+2VN/4owc/ni75WNjHzlCv\nDhVUz7N10u69BgoBa6PE6PL8Ov80KbakXk4KfNB3qZH2yo3AbZWv6nGIKGrg\nMeH/jFk6aWLMWR/W1wJMPRnJk1TTQQf8D+p3ugtSwY6FrMJVyJJLQzbDLWnH\nf6cwn0iFmuDDQjpa7Gf4fvvEryw32utAlUJ6HqtvhF3FG3Ukfvh3qinmK7Iu\nzJiDz15BTrSe9YeGg7B6YWHq4L5317TJljG1e+bnEpJo28Mepcfx2h+u9Svg\npoAFDxIkg2wjLMHkjjUi0Y8GZ99NpMVTQoksRyk9YNrCXJaixayWGlxJ/WAV\ned3G\r\n=KUcp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9edb186a6afb7c632795d6659a42ee65581c556f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.184_1623173593312_0.12075185368494679","host":"s3://npm-registry-packages"}},"2.1.6-unstable.185":{"name":"aws-amplify-vue","version":"2.1.6-unstable.185","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.185","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"584410bf60959cf8f0557452c124804105334bd8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.185.tgz","fileCount":47,"integrity":"sha512-i0Jb4HuAx8UtIUKfZjhEZSwAO8WXj6sWh8kvGm5TljfLkPZxG+YsZ6726dRaCN1ygmyc9HdZN0mJHz89wK01PA==","signatures":[{"sig":"MEUCIDhS0pF3n8ZPu+vZzfr8tAWs5kl3hG0jWkUVDfpy9iVzAiEArbk4ZtfKUymJvVQaXQh5BzgXbOMb7kCActeqr6vUrKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7ffCRA9TVsSAnZWagAAdloP/2F0RevJBeFPQd71S6dX\n+SJiNaPaawkfiGfSK4JsRU7GkB7cO79tiLhh+e+uwezM2VRnE4tOPeC6B29M\nKpOJII9DMPvlxbEZKchW77BaU2iHkEW7K1x5oK9uU4Bs5Mh+g80IRVrAiVVd\nhaDV0QCSECz4M7hVYBbLCQGHvANp3iZU4gGr+OcpSMBzoSZmblK2pmBCL1/T\nz+hWPLWsnacch0N2JI1q14YEdUrP3JIJF3PNSWcVRHlzCyUcF5jc7QEMLQ50\nHEb0tdcZcPTCW86OoIRWokvIqrcn7rxCF1YvMN0aQGJ5uqRu1RBeFiTfA6WC\nkJ2zCgT060KHdP5VvoLaAlReVpn+AgNTZPpwC/xx2MW33FWpza2LWerLfyaH\nD87uKePZmim6Vbki/CpI+ij+rMBgrur1IL46CtJ/DknGOuBypVhfqT759BYi\nsdwg4Brf5NPvaZEPKvbqMJRzGN+EYFt7PC/x0ZNjiQOKxXh5FwFqAfE3ROjC\n0YXe6fYAa5VCLtgWnVQQiaLZkX5g497sYO+MsQ/LALAUTvV2bn/C3YfqcNdb\nxgc9Kzx5lvNw4bHu2mNAeQ1qdpHKg4Iu8hOlrfuMT2jHJupuSAoY4LUFDMZL\n6giecWurVpPIIuZ/9yblpX0AR5xCdIH4hLlTDZ/Ppka4M/E/y9sWACxZtnHR\nPbOD\r\n=sVPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"90b6d7cdc0938985d41ec6dbe751f23388afbfef","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.185_1623177183635_0.8912968152181557","host":"s3://npm-registry-packages"}},"2.1.6-unstable.186":{"name":"aws-amplify-vue","version":"2.1.6-unstable.186","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.186","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"7be0f9b32e668713c31e1ec9b9f642b1bef62e78","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.186.tgz","fileCount":47,"integrity":"sha512-qvtwNuWdYdG0gEQPX1HgN9rAgAg1NXgGxLEhCJXabU5Zv7W8nmqwZK3GBbAUoVqIdOLgGyyWj0XSvPhAWNQhMQ==","signatures":[{"sig":"MEYCIQCQLG44OSlmoOvU1Rf/B6GeZOn1hSBZsCxcSdrWez2BkgIhAMbp1ImDxUlK1Is16HS2T2Mhn/k/0wgZfj5rZMi5NIzE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv8mNCRA9TVsSAnZWagAAi2UP/1GmPFf+9ry2sMD3ce7k\n9QqCcMTk04iVXXi2Yyh9rH3Hk7/SKBWkxGJxG98ROEun5Rl3pFHqHlfONks0\nWQvLKWhUKgxgJofPocQrL5A2rS3cl766OlANLj03NcxmeVSiwvnHbCKmKhqm\ntcGI9JOUZ6GYJ4bmGBHqmrYyBjZAuuo1HGmZjWr/4AoXjb8t8KDPhgrc8cg9\n4HFhdL6nMl2Z0Uhx6VPgJEMfSu5I2r7a7c4qwAfpGvKRZkGM+Otu9Hg9GQHW\n/vYeBIdTvGAFe40wSlarMjIeRNe0DUJP8I01y+ctrxp60WuXIrzqMq9orizk\nYQhmZnb29qKxpUVUIEN4siQr3h2ykLKsU6C3LV6c7BtyhSAw9fWkF8jKvj4l\nJyZvqZcy291G1xdI5n0+kKmmMFI2edHUKLzqtJy4wlLoxfX9VI/yJNSplcSC\nEIq+bK5xeOcKMtjSetDx3XmX7tqgG52tkePNJOEF6/oF1GWB9Bk33wJtEWJv\nFoNHsdmOwqqju0YCllpbnMrk3mAjV7WOspy6CMvbYqhr19uVHLVZBOGXVaIn\nPy8EHeUkcvEd7YX9jshwFlZ/+XD826D+ilFNLpGojnkemgymZp4+tUH+jrDP\n8xK/ZFARHrisk1FSdV3XWnV2/ws5AH+T0mILQMMJjJmYJPCDw9oRkmlgfHj0\nbeZ6\r\n=+baY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2d482b3a3b25431a50f625f1f5f62b08a546af12","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.186_1623181709028_0.39485056586607525","host":"s3://npm-registry-packages"}},"2.1.6-unstable.187":{"name":"aws-amplify-vue","version":"2.1.6-unstable.187","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.187","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"ba9b7ef4149bacd76dd9f122268c04648795a86a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.187.tgz","fileCount":47,"integrity":"sha512-odPSvSVDvMHRR4Up+JbeI8JrwKeNI7SwgwN5bJP+mhVIFHWJD3lNle4Tvu8oQKa7CuHpf91pCk6ltjlppxlTAA==","signatures":[{"sig":"MEQCIFJl3C9LVgxGHZYaUBclpE5F7ClntEH1egNgg827HYnOAiAV/fTwDeehem2Ux/bslRBeAI5G90SUCfK5mpj+IckfIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv802CRA9TVsSAnZWagAASAAP/RmRbInYzyzrduIF4cjr\nCtucbDB+kU3IncbWrLJrNjjc1gWPOLEeLVsiYMM+Bf8DRBb4a8A7QZgWbpQI\nrdG9zEfpOITMuvS8N44xG3vzGpBduGFak7pPuwS5LEtWQJdTf8/cG1axCWlU\ncImihbNZu6GnuzT+vSrbGjTSIpa3ZOoOri/Z4p8MsF/3vunEj+gAiTfBsNSQ\nE9V9f2s1J2kOVHF/Wp+gAYjA0oQRMhjSHbbs/0adnifsJ3ec9gKHZtHgVfhT\n4aoTK5IgcaWJ2NIgLpAQzl58SXe4+aPkTiP5re8e0hDxCzbsSdCePy6pL2Sm\nNhJbNnBxnNgQKkUJXC84UeVexv7F6MoqPVZZdP/fqFQCQv/cO6epsEhjUD3W\ntIYBz5HN2WTxTf65pzSa7BSn9i51/sn863UU5/p+7xsHeFITT3W+1v5R2fs0\njyoOFW3lsgBwwdSwMTFJcIDasg0T6dbZUObXDn4UmtJVINQhfJck0e6en7Oz\nFMavEU0t6/2vL+8O18VXZLGsyZEx8LHdQGBrljHo1PBPYQQfA7HYktU2ntxA\nu1R5mGHQvQ0G0Lj4pVUEyhVTMzoLJ61HCHfVBbuOFh0iEfg0Bcul6rsv+emy\n/Y94kshqvq52HZs71czCiFCosyXxakz2FtAlAdFNHU4vZA++Xa59JEAADgRp\ndq52\r\n=xAOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4d39773b0c174538d0d7c1b770bc276700bcf953","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.187_1623182646235_0.6489424032019266","host":"s3://npm-registry-packages"}},"2.1.6-unstable.189":{"name":"aws-amplify-vue","version":"2.1.6-unstable.189","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.189","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1ecd664c06dc541f962a31e9acbf2edc838dcea4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.189.tgz","fileCount":47,"integrity":"sha512-fpmIRyCroUT2buNa8UPJ6eX6rRVRscqAuZvu5cw9zefnGBzZQskDAaETN8k1DNx5PgvdYV5PkbnvjhaPEe7nvA==","signatures":[{"sig":"MEUCIDVFqZLQtX65YNouEEifz3ljl2w+Qev9qJQ4ltvPDPeVAiEAyaGNUo0IHdZN+nVE7bn88w1ZNYMqIeyHd/clNfrf1kU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwUfYCRA9TVsSAnZWagAAw+EQAIip0jsE4U2pXm0V3x2G\nGgpo/gh7plKu7vtaYwaN9PgbepUBKJ+yFqUbcpfUrltgpH5AN3JndfKvaHHA\ncjcR+dhwahrAw88rXUnx7Kb3+uXhSL4zKJssAieVcO3HTnTobZuyhqDkeEUz\ns4Kg1RhBA0AJ/V6SYOzWTvt0ypQsYXbCaB1GXJzbKPOcHpWKAwGW42dXDT5O\no99omkbNMYn527hhHy4YpncJ8OCsVF+MdY0AZvv/PcwKR5lqppsiXA3MqYKY\nN3Ze9+WjGmBbi4XorqswwPEPHMCAFUWasj7m81ep5s5ocNWnZNzRcno5W0w9\nxgYVgZBUzctkeyP3KLxFXWlpcHCA2Izu5qpmVRK2rnOCxqEHZNJsEpynXuTl\nxSWJNVCuwHzrF6GhX6jDRJZlAzvCGWgB+HeTWM/lb9SP+rBY8Cm0FpZXI1Ci\ngm1tZKCFaArDIn8stVOtGEERgTgEdShd6uoion7sujHlftRSpmCAHpFCCM9A\nq9t/scUQkYXIF5eGWa0+5z+tpAwslvlkyakFVzr0dPrb+2b8MVcoTnnQZ2mf\nXgqLKWsL3ZJMW8e8w0J4jmgZn3tuZY0dMSC6OLgVCBs1vSOKGYE39ZoFOOXJ\nJmupt6lLXBbTM/gb9KprFvaOtfRHWHK9g/nYYHSR4p+EGamx1w8Bn4L+P3yk\n559I\r\n=KSs4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f0670a4eaa8ad141f1a72725998dc000075aae84","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.189_1623279576015_0.6006428938845185","host":"s3://npm-registry-packages"}},"2.1.6-unstable.190":{"name":"aws-amplify-vue","version":"2.1.6-unstable.190","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.190","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"2a5702e3f9ae2e83dbf26d75272fac6507f93b77","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.190.tgz","fileCount":47,"integrity":"sha512-bbKZvbArWlOnYJPuyzTjqIi3t5MAppx4k6uAhbu7Says/xDLuHgdPGFC+9A4/3KlqwZKMBLsAim7rbTALgwEgg==","signatures":[{"sig":"MEYCIQDE6TYF7KWtHi6R69zEDulkbV656KrJu+leqQQLBW0mGgIhAOOXQRkRPAcWjnC/p92rb4SxpjVWtOBzMkfW3i77/o7y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnIrCRA9TVsSAnZWagAAkyIP/iDCH4hgAxkbHj7N9VWL\nQrWbDeuZlRqcSGD2nUNDos1nQot4qSTy8R3TgXFch0inPHBBTL6vc0dCG6Kl\nZrGRtqLAG+Uy6J3PK4fVJR6XEXKbLDUSNESv/rFxm8kQxj8jQlNf4+1wx1R7\nqLB1E3MjFx7ferg+4hTEAaq3MImWT3xIQ3HQGz7xr2xZk4nRe3D9hH0PUZ68\neDwNOVVKyAtOw1Up26vvkK6RrQR7EqOw+XIYV5RPcRlhZt8C7kQnE8zYhr6k\nBHksjPrfELW4wG8dMGpbvCYaPi1PUEy3ACH9V5Io5MwDyTt5Dxk1ai9srTT3\nEvSMGzjenBkqc3WLSJLusvuY5Q//JTxQPaYdqTxssxK4XYoRCToQuiHEf03l\nfgwUrlPl1txTZ7S+PV7VmqKfxHnbYykOJSZsMaluPckReiEG6bicNa94filR\ngKgH/1T87jtzJKxsr/Pq/oLu7KAqaeYrwsXVe6xmnGq04xAMtu2qjL4BDYl6\nwSvFc1grgwnnzuyg+f7sgjJ5iWsIZWPYx5VQ6y0Nqzw/lMadc3NlA24pjsAm\nK+rXcKgS5hzqRrKEQR4HJCaBM32snK/FWMfatJA6oMgvOWGgEPDWcBCaJQhb\nMuVeU1JXhtoMIPQ7jTOIbGgQB0/bMooh4t+ZtJWdjTRlBwRzwjqEV6DMAC8L\nWSiY\r\n=mPBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fa5cdb81539e6b734e69b9b912898d25058140e7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.190_1623355947548_0.6176026276308078","host":"s3://npm-registry-packages"}},"2.1.6-unstable.194":{"name":"aws-amplify-vue","version":"2.1.6-unstable.194","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.194","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"6639e13da3b26ffae753201d6ee425506d848376","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.194.tgz","fileCount":47,"integrity":"sha512-hn7VYCQQNI//MFiDK2yOXP9T7hvLnDCJhfI9yH7m1PA3T8fWep+vfmTZ3gW/J6aN1+jKLeYOk9TBWPrt/P9OEQ==","signatures":[{"sig":"MEYCIQCSCO6Ny5pHsrtcRfhX7vfUsIIVDOQV0EWuSGPl2mlVOwIhAPxNRhDUQDDN1mxoPwakWaanziinCN/OqkGxULMWErTT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4vtCRA9TVsSAnZWagAA2FsP/i0k3//WkQrylNmyalul\n8byJs1S+ASx64YAur4mqmYM77NvKnc1qnt4Yy+0Vy2R3vQBf7iGR43F9nlYQ\n+hBJg7MZU9W+Ij6EnP9KGrU3PmPpwf/3YBf/eG5/R1xZ8MELoLdyMkqZUOWf\n2Y7CSryT7HHOtKXdneL2qWam1mHUG2MQbb9qV+YXJuGqdQVNEJiSOx9K9Dvb\nvHiVMX08InP9FkgBIVyXERx8riY7V201cf83i57jd8fesNJf7cntrK1ph9Jh\nYqhU1tsSbX50/iy0+xorStkRd1wT4iuKpDJFG+rqOS6W0Dld6n4jCzYhzW3G\n8duApJ//Ko9quM8IYh3VmclChOmw12fYTveeBmAp+T0pJzYn0Nhsxmr6HzTg\nr+ZIInIdHZ1RqZbcVQOxtZSx9ar3vLx6wLl8bz7cmDP9s7ICPLc/24ehZSrF\n2N8MRcul6o8ZzPeBagQTuKVRttaonV5gGqwCqeAcks4U9Rm6ItTCIA/HROoY\nKmShBafjj+cYezpEPr0lH6dCYVr2TjhbNT3MjV6kEW4EKRD4IOpWCW97wicy\npH7bJTz2aeIyFU5m1SQhPZpbPh27Yx1ArFf96YyEA3iy4ogFo/raIoOgmYb9\nm1JTNcg9UNF9H07mT4SIe4qACFmMf+72KA32VafQCL2/4jsQNC+45FPTk4wW\nydmC\r\n=7/It\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"461d33303405c383fe4d970e2e9f568fe653335f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.194_1623428077034_0.7854997885682609","host":"s3://npm-registry-packages"}},"2.1.6-unstable.195":{"name":"aws-amplify-vue","version":"2.1.6-unstable.195","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.195","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"5c648c0a44af634a28802fa56090669e2081a7a6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.195.tgz","fileCount":47,"integrity":"sha512-csGRthe/pH53wXe4WQX2FqmtL41x6u+DPE+s6iHATPRkDFelOCBuYpC/CF9xyXAyOTSrNJrlrMv9U8miHyGXug==","signatures":[{"sig":"MEUCIERGZ4xZ+q7vR6BrBn4+S6/6aCGSPtj2pGFUAH52SiIpAiEAjd0+ldDRCybS5vhE076q8be+ZdYGBt7UTEje4r7EnAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw5FRCRA9TVsSAnZWagAARHUQAJnDs9WC2XDtezZglfO9\nV0vUuW1B3Kl2pj+ktZz+EWutj24bY6M148nVGrQO0iaaEYFd2mifw8aqzYyA\nMJljleXrERe7ndX0+UFG+7pKVWXPDp8sYd+q7Bz93Cmi04dXdM5JyytUmuLx\nyAOdYxevMJd5WN/cP//brP4RBKKFdRyAFe7H3eSqLisJDDTd4vuHuYgKLMzS\nbVrvMh2XEHZETWPQu9Nun1tOpTkNYiqSZVqfg2TgLwSCx9UYoEEBxa6POUCs\nDawiVrFlQZkH2S0/b+EFgSCRnFtA32y2bWyZQErPGPaehGs4pfPYfT1GA3yK\nTE6oCIaERc5cawKoQL+YKrT5Ku0OkECgfoHYPFUzRnvaoWWVN/R1YLIgEYHm\npjkRq/8S+begFubSVXbWh8kop83amZWPC80a7gIZW+hIYVMJaRVi34rHRS4m\nqolUBY1oXD3rp/61WFdfQ9cnCh+5B/QbBQS7kF6rNrLSxKZ5uVr3COe9xlCy\nIu6D4mvKw/eRrveEI84RayydeDB9NznKRkWEPRIPOh5vSw1IyXY4ZKcGmKbJ\naqMNwP7BrWFp6qLAILHBfLH2u0UYqN1ZrKUuw21nISso0/uyjWs2R6tLxWLs\ncSOTPABqwK5RN7ZKpz3hL/waow2+p3EN1iNWADSmiOeuE3OCxEG36x8GRCCh\nWLWA\r\n=v7k3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7edc98ecd43ff631aae8fcfd62e7f619a8076456","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.195_1623429457313_0.8925205106309502","host":"s3://npm-registry-packages"}},"2.1.6-unstable.196":{"name":"aws-amplify-vue","version":"2.1.6-unstable.196","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.196","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"c3f07252130233cd9baf6c03517469967e9fb17c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.196.tgz","fileCount":47,"integrity":"sha512-W16BUOOabaW6HYViv6Ryn9F/NYpIHPTt/XscL46LfZhlfGFWUiWbWfjcU+2m8lm8WHqk986qwZHrwPXHC71vdA==","signatures":[{"sig":"MEUCIEkLovwtTbT0xKzl171NRhKmJJ+EAhjqOkU/UCJzOvXaAiEApG1qFxg19R+euk84+g6AezdWN/rC66sVSrttXPIvp20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxWT+CRA9TVsSAnZWagAAuGMQAIWJuFh13/XOb6zUG3Wq\nWG73SYPsL5ScYst7mB7fxM8JJkCtxECGQWr1WhBT3lhff4UsIowSdudVE/ls\nO6lYUZGUBSNOaMbJdPFT+u/kpTAD2HdVJa4lhKjtWxP7f5VSOBLbGEO1znWT\n0PO8K+Fn/EenW2/QZNAsLMMiC0FeIjsPeOvI19AxRrQGm1AcU/oPU1WQlAJu\nHsUeiR4lJAW3PLU7ojRha+tnvNRrs52qqzDQ8w/YtvuID2QtgofCD2lS5Za5\ny96+j/aXL818iRH2WvENIlF8Cmw2U/xFvftXSNEa/F3zUp59e6p/0Ki5qgKZ\n+v9nI/yo03735QZcqnGW/42dm6NMjJtz1GcaiwxHdDCeL/wqgvY9hlupl0X9\n8ue3Fl3YqzRk8moHFs3T/6vnkN+HUicCObE8C8zizdgQzH4WQV0kp+lKaxRF\nYURCVjapfEL5pPFopYknMdDoHv1dOHLUDcTAi4lk7IFL7be/yVhxLQl39JW5\nkXNuFYK1Z8x9N+ZM3jtLjVIraQREOzrmI5oXLbOe/rkwfZuwsbFn0HeSR3ij\nAa3/zLc6N31+8PO6J6mPHlVoX973LBheD1r0qBynhpv/iy4wJnZZem3Gvf4s\nBe68NKdzrCJKc2TfvpbuMe/2o6kHaCORaMgd26mwjtDCsZ0ivx9ZQ4vqf5h6\nnwXz\r\n=WRx8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eb3b707722084f07d025344bf6bbc34927b79bf5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.196_1623549182377_0.10480093186203132","host":"s3://npm-registry-packages"}},"2.1.6-unstable.197":{"name":"aws-amplify-vue","version":"2.1.6-unstable.197","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.197","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"3b5e46a72e643b59f8f76a3476da5a294234cebc","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.197.tgz","fileCount":47,"integrity":"sha512-mqGIesCHo+li/8YfeG5UZvLElvYeIyodETM0KRpe74TmMBDtsW9va1T8Ju2RUluSGDs4kbCREOlfChEd7LA8PQ==","signatures":[{"sig":"MEQCIBYQQmyE1ZEjTGzIIS52WPEJ+Vic1yDx01AUioBLqlqQAiAuJeoXGmRyF7bPvynpmTHt4oYKaKz8eshREQiy+2/QHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQUdCRA9TVsSAnZWagAAS5IQAISK2jn83W18k4iU68HA\nOAkbv+YAtwKhXG1+eguGVP5T0N3SoW9G+XUCac8fj2INW3BI8xqvgA42UHTa\ntrhul9uskd1YYMzCWnE8In3iseEUBT9apU8V3HTQRhn2XurC5g7B8LDe3EQ7\nWObkb/Dltzf8ASc5xLGpNOUaaQCOjETnhPU6faO3wQvvMHNIECb3+VrfUBTp\n0HcDfo6oaWfkspXZGcmc0NUn4ipSHPVcfteXCbYBEhwDIp8263MpjkzpxCyQ\nMqH0wu6Tdr907c2yhTEmv0lR/ff/AJnnDn6eM9uQ/CJ332GkFLmq4fbXKWI8\nlU8g7g+25kdeAmPt5EboY7lBNJVKzSr0SOF4EzkrXKN7G0uLd1eO3UYll7mC\n5CC0q2gq8ReytGmsBo7HTnpb9YhulHpB04ulec+HZkfoIuA4tESVDAAHPy8E\nLNuHuWvhSuPDJc9CuBB04K9dbXco4d1qYUWvdBDPDXq2d3daG0Ohxha5pSl8\n5Ts/RKtKaDp20D1/MiAWr9z8bDTFd5lVLpqVauS+/bULVlCNOxKakdho3/0d\nbUtWmqHA/kwGW9avR0n3Glj8WfXJ+FlLFbXl0f1QtwdRbrnfBDUUi4qF7GqS\nY2RYdVsOQEJJJ1R4Q/vImNBuUajLHWEuimwfITHszxX1SOcvsKN9dtA7Y2X4\nuEF5\r\n=R0go\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d3339978e2f4d4eef41ae0bb80daef5ee7ce0791","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.197_1623786781570_0.1975283228717768","host":"s3://npm-registry-packages"}},"2.1.6-unstable.198":{"name":"aws-amplify-vue","version":"2.1.6-unstable.198","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.198","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"29b1bfc0f4ef81255c38e2ed8260d22baeee1af1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.198.tgz","fileCount":47,"integrity":"sha512-IyQEslcuHl4joFc1zlzPjd8+ZyMpELCH4M/zXyhpazjRk2h6E9xpi5w8DiZ33/OrLAOP6nBGINF1r5izX7ZYCw==","signatures":[{"sig":"MEYCIQDiq9OZxp63x9doYQZbN3RywNLPV22fs6byysSzvjS17gIhAJNFAB1NKHJAew7zQgIBcoQ1MuHfUwJ75mfaai0zjrHp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyT5OCRA9TVsSAnZWagAAZ7IP/3oB48/67ISbgARVdAhA\nIlZnyME/6iHz3BR03GSelK/jaTcLf3cMWfTE/hG6S3eYNdV4vAIvEgM7FGhZ\nEyDenq/ZU1N+B6+mDDc/lJ0iduvSzTzQv+RJUaEEzNYLcaUKmrCQKbbtd7C0\nHq3hTz1a4P0vIWQ2yVXHNYg7jkwNFDX4OuJDu1VI6k/VIuZC3iyTlh4KR5AB\nPthzr2ggyk+vJbB1HQdcO/heppAiXqRUS3tZYp06lJfgzqNgCk6AU64VMQq8\n7OTM034Fp2Q0Lq1Ud0bXLvR4QJA8NVJ9otUktXcx3kotl6y0cZD1ENcUbJzI\nKfZn8npo0bSaiqETWuJIXIA2p9MLcjohtS9kuIMnmKA66E8TT9m2neq2jR9g\nE6ZFlZ08cw6sw5k3pvFRPwIZwyu0mPcR85AxO6+UOObQLB8aWPBqL9SPJ6yW\npyYLFp9zOQ4rghqmq1if/AfeB/WiL1YgC3krlPzYXw86IWFinSE+WUlRE6yZ\naYJfrMdKBDJjZq3QtVBNoopTV+IIfMHO9hfbVfk/jI4G7n8teelXQf+6zaOU\nmX720NQYkMIDcE8/wE84MeKq3jVRLU0o06gHlmbUqMfFq1ui8MwJagK3zTUh\n5Z6mQz45czRw2+o0a/Bh+MAwG5Sfe3sF6M8qEfpJn96GUPmg4BtYcKJCB/sV\n+XJo\r\n=ELtz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1ba2a1f5ce40b94ffa5616af600831cf2517859b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.198_1623801422371_0.012290224661106075","host":"s3://npm-registry-packages"}},"2.1.6-unstable.199":{"name":"aws-amplify-vue","version":"2.1.6-unstable.199","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.199","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"ca219672d2205366e81b9cf43af268ede6b7c1c1","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.199.tgz","fileCount":47,"integrity":"sha512-BbJ6Hm2PyXtBXFTV68uQD+M7pWMWiP1lOe9xU+5/Ha+bTL+JWF3/DkXTtFUR9ImnEU11ZZMEhelWG8GA1i6syQ==","signatures":[{"sig":"MEUCIQCLGjcfAH6T+j2cBfAyabdqbotH//pf4qZNlP4hArMwoAIgMIAL8THFejXa8WlmN0ahmSK1TBdCzuJbKAXQvMwRIPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyitmCRA9TVsSAnZWagAAAwYP/3vylp81CvEb9um2G4SS\nW8aJMQx92f3O9r4wC8w3QO/gWK5pKYkKvzb078Pt4vps1O+21qtsonHMhkzP\nKjxu0U3f2c3t6CkU8GNcDm/Dj0oXArZhFdIFrqpNJoy2N7Gz+Nl4HHCrqNIT\nrsleVZ6nXwUIFFnnVONJLiCHWBSUosjdxIh0yhR0jvZpDoTadVUknQKJdKo6\n3Axx/UILr1eQYVhcoMtce4k4CllJk8+UEciGbzd8nnmlRuk9Glt4uioot8ak\nUj8KSxivtMUVrchfs71SQe24seaz7qI93D1spxYiw1p3YsGeUrIIh8038qgV\n39YNEEpUbKc/GNr647+e8nt5QWAeMCJbKEteia3p8J7wOp7/MOPNnVhfm7BB\nSa44qaHF4xHhz5qC4zxm0YleinfJuacBHPMAvq4EW0/1T6DRBfNUgs/d94pE\nRcesvj2pR0++1ke2v4hZ5ZKZgOpyPAdT0uykaGp+xFHrJz7VAWc6SRdh8H1F\nWcuBxJs/Ts4VSvWg88NhzPwLh7Lk/AFTl+TTyTyCNrTkiVS3G+kB2bSdaF05\nBcKmXAZKhD/dLeKmWWRwTu0QQU/qBgRXxxNWOqJrhLxnE1CGHUDmGX/AEltf\nkG9nqGceRELpg9ukT80Vvqw1FX8pu+W5wvvPOE21TUP76wokV93RHO82kVki\nh0Be\r\n=VAGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e8f9e5a9d754853b29e7bf9789973b055a517bbc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.199_1623862118382_0.03781869632941093","host":"s3://npm-registry-packages"}},"2.1.6-unstable.202":{"name":"aws-amplify-vue","version":"2.1.6-unstable.202","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.202","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"e6964bebffa0c8e0d07735d08c334da1cf05878f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.202.tgz","fileCount":47,"integrity":"sha512-wGLLuzajvdaQu+dahN5l8UlooUqLE+mJxSd1KwMkQBm07SZwO4pl1tLUaPz9NFOfx5imYsJHuku0400/+kkHBA==","signatures":[{"sig":"MEQCIHEgAS+DX0N/RzIC231XEWtVd0ubBiEJInr/SuaPXOTMAiBQFNEUXA8n15Bwzele2uhilkXxGZntvxqLNYs+ruoE+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy9lYCRA9TVsSAnZWagAAWCYP/AwKi57cK02rUwMD6FmF\n568YIcsCJsaHf29DKXJh2nczI+oT4cwd5joqEunJiJTtV38S8nJ0kZDeqqYr\n2T6MLS4lzfqO+YokQSzdnw/N5bL7UMdhm6oreQxMOe9xyXxshQkIKgy8Lggc\nY+2QslAF6k3EeOj3deqJ+jPA/+JpPNch/jm/9L1wOziww7RISpDRfSUMQJ9G\nUjIYw8RBQCcDIis6f3V6dMTPWtBWfO9HwhUAVdBfhDOSrLApUzNigbtXG3Zg\nXhkjwQeTrp9x6BmA7rmIgC2bnJ7q+2F3CwFtJMhbpps1O9jEz05Uqz7WBK6W\nHFOfWqu8JzMAxSr7cGl2/+HcLZMVzxWzk1XWZq0/smEnsHdWAdyyk8CFMGWm\neAHpcYdgsmAcrsXb9bmPqcsa3AJ1dGmspx2Jy+d5m53jYIo8DxqnEK73b/Hm\n8z9+g4bdnYRMj1W0Gf0p+QMLf3tbFJHEo3V+W/DKaeheWH9l26IKJZyIIH+p\nQEw/Dl35OBwBwDbpC6gjXkjEMccEshTol96xpSKxTiRJTUGAJB/GZlYORgBX\nvYCr6r+opz5gb25x1CElmk2/xtlHZD5a+bcOYrpBVhlGLK3M/pO0zdQIAEAu\nhfkX/IEmjbaoVwduduHaAR7SUXu/04ojFCO8aCMF2Y+pyzqRbg/fONwo4tNm\nY766\r\n=ebVB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7c0805048341cc2fb9035da24e1e6a71cbcd28bc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.202_1623972183695_0.9251715115013974","host":"s3://npm-registry-packages"}},"2.1.6-unstable.209":{"name":"aws-amplify-vue","version":"2.1.6-unstable.209","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.209","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1c6d53abfaf799e97cadd5c63209a8b7f630428e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.209.tgz","fileCount":47,"integrity":"sha512-v0u8Odlok2xKNzWaX7bDTnZhMOF70IVwFTCQOxGSVxyEWdcziwAKOulsVcXL80/tZrTU2A7BvfflRYMSEUhxjg==","signatures":[{"sig":"MEYCIQDmyQ9kmSvRRb3tn8DMoUb/OmyiHVV9PO8ZD5rIk4Un8AIhAJ4DTJbGGRo5SxDVrkQwD3ZASphLatZS/C0mk3ZucimX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0POGCRA9TVsSAnZWagAAtFkP+wd4Krn2Ctq8+CrIaS94\nzo02PHWNDGbltaECk6TzA5uV86chyDy4Wf0nReD71jfUzMDJr7Y4OMFfawCn\nZzI/ZhbbcPArWFXe+vhK9+HHeSCOIrjeQmOfRwe1nfZGK/yGDFuIleFJxJnv\nlw+jEn1Tn5oS45/I0qvX+arTe2nbhrAQ4cMbwN6I2pX2BN7oY+htiCsIHky+\nTYURKxQiApNyUTCbf6ySgNqxz7klg4uExyDv3NPyYpYsAT7Ipk6xCtADS2d5\nMDZe07p6ATvjWIyfaz35TMZFJNr6Y2YrQQch5gWysIegNdqpFfH4x4+ThcMV\nNePaOXPyWDfdvpy1pEUZH8VB9/5LtbZnUAdZ3DA9jRQGh71O8TENDOWoxVIv\nRWVgU6XL3e42fTR7a072+ocONFQkjzPNM4T621io6TbAVbk9cInzSQHgVMBf\nMS5nlC3o3353vcPz+nEgvgicN9Efy32dpkszf8TdjIoe0CIzzj58BRxcrgQm\nDHe3C7EeLuxTT/vjtWaUNpB1+CxBa7D5hYUZL15H5lwXHPLyrVOxNSLzUpAN\n9S8gauBlgPPxCBklKM7cfquMGu91kLLZHVXVt9dJ44nolAbXDfq4lG5dHEnt\naIPAoCVsNSIs/Yvp6Lx9GqYReLEWYbOaITnyL9ZuFfGcHBszL+QnnRhSA0PU\n8Ri9\r\n=X44h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a5f2466454f0cc1e0223fb03e78142209cf1f033","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.209_1624306565776_0.5354659710473988","host":"s3://npm-registry-packages"}},"2.1.6-unstable.214":{"name":"aws-amplify-vue","version":"2.1.6-unstable.214","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.214","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1cdc830548a0cb9f001bafb6e6636b962d9dea2d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.214.tgz","fileCount":47,"integrity":"sha512-2U+LaWYjlV0kBNJg0EOU0hWvJzRNBkg+yqAWpEXrK62purrSjEzzrxQcxqQzdrlL+GXuCFBdYvFIrrLF4NROzA==","signatures":[{"sig":"MEQCIAjtlgSBn0GlhAl/HS5sqEfsL6X1NVgYW+jDohqI40SYAiA5s9rx8UufijZDJ+6DeVZ9epxs/+G01grpfqa8YsQOUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg01UTCRA9TVsSAnZWagAAmiIQAJCC7NKvspi2NTspbUgS\nSDfGiptzBSS3KPldBXJ3d3YxiD5WPtFGpRQRCR/b4jcOe7bsKwrYbGaZMpLA\n/mXTkkPnZhXCv5t3HJzSe/pSOf1s0p4S0vjpPk+VpoTHKvUB9na4PdFx8+uw\nQ6AntIc0NWmwrzvUYKP3pmshL9lvzK3Kvi2sJ2pYP/nFiSq7zlYeJNGw6Vwu\nHZtE0xZQWYDpHRvzOi8tEbgsG8eJ00NSq9aXcHsl0zup43v9EHwf0kHK6ZzO\nez3dfEXigiUuuxWA7pOmy+ezDa1AtyNNgANVS3EjRXf+DsGk9ankFwDKfVo6\niY66WGv/Zh3ObYas+EvdApnMgLdbXtm6mwfacPgSTc4rJ/HsGQBMEEJ602yi\nbb4cF7IjQXcjU8oM8+XloxAgNQj/bCdi7IwF5OagEtu/Ju/utLf5IcOZGT3B\nrwCfmt7rxo0ubnsPpwGTkw7d2h7d+K1iLE5Aqwtyp+dyMNH7KeeLcdM0R5ih\nVjonGGzCUXophLUiS2XbDiH+hvyuA6159h/i9tZAURRCqZD3osYV7bWDjqgf\nNL71E5a/OqLRiYl/QVQ1Umm2/neTpVgve/6ZscK9OCe7y5xnbIQHlHg0Iydu\n/geXWjc4hWPddsF4vJM+s5SA5c7SSAI8AW35b+6C6dTX0Be4IMmiB4QoXU62\ngPTe\r\n=15C5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1a8ecf7d6f6376e1fe0792e4f34e8ceae68e0ca0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.214_1624462611258_0.39964452599046996","host":"s3://npm-registry-packages"}},"2.1.6-unstable.216":{"name":"aws-amplify-vue","version":"2.1.6-unstable.216","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.216","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"6013bfb2abc7ded0e3aa4a3c11fbe3830e994a85","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.216.tgz","fileCount":47,"integrity":"sha512-C5Sr3qPStDlvj0poSQWbHHr8OxWay6apJ+15v5q6vBEoiUAcKSfW2A3Gbc/FXP+JsHa4iBzhjhbRynVo6qulqw==","signatures":[{"sig":"MEQCIExlU0u409kfuAZUZ4uAWhMW72Z0cjBMwP9ZlP+vxlI9AiAwm7zziQvr2Wkqwmy51i5Ti+AnkDSVe0cum3SfMjDQzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg068cCRA9TVsSAnZWagAAWWEQAIcXJstU+Z30RjlFn0nG\nKsysvg5iqy13ZQD0LtmCLCS9KUOiNcoRBFfPcA7Gs50+VMmeBvcifK4ljR0Q\n6kgIMFqqioqqYDAai+7QHxwtnaamMH96JGhhkV9gCC36H0e/wD+9imq6lTRB\n1AabUPfMiR3lhktFCwHmdRUAscoiGumY+q19m+IXDN9ljN+ns6BIPu26buNL\n5ndOLWiYJtnEqSrjfhlKNBBRd2v3Fi6mMl32wFGZAPE6j6qjrRc9a/Xa0GYR\n0FWg/gZLrRdcNOI7P2DpJtlywQF1E4cDvTq7Kq6fbLH8nRP0qNU6LIESCvXF\nK1GLIOXWPIIMZ/EEyi+yph4I9F8261kLt0W/ykqkGOW5haFoAXv3EfbpCkkz\n9VNNQSxCIyZ5D0BGAE56nytGPgUJ9s778RKPKi2Skl7gOFjYMPIWvlIB+c4p\nlRH5YbjIXGzhAoSvCfaE3a90dZe/ExZpYXsHjeDjBbQamvFTxC5JCsvMOcz8\nCmm5/shxAnV2GFJcMJn6ZBPTMyxdG1RviqjKxCBwrQI6lABgXtJb0oLvhc1u\nv+8Tv7L/g18MjJAlogclX17SfOFgCUuuAYbFybRJR8UehfzLl6KM0c6yn3fQ\n9FoJnFd+cJ1D29kQG3mpn7XLjaIkSj76Uzpv61Ttzb0gWjZ581+2PCfjKGgg\nbkSo\r\n=7dS+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"40cc22f8b332e4748c85504ca8e2ac2713fd87d1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.216_1624485659651_0.13266567851199662","host":"s3://npm-registry-packages"}},"2.1.6-unstable.217":{"name":"aws-amplify-vue","version":"2.1.6-unstable.217","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.217","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"2e2809e8038999302c752b3a6374c77fb2367c3b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.217.tgz","fileCount":47,"integrity":"sha512-yITvM+5cVwTjH2xbxUHsdaTX3cZmvF0OcK7q/ZKwidE/eDay4WKX8oDhBVznfpxXrEeiewTIaUVpedwQhnNS2A==","signatures":[{"sig":"MEUCIQCtos3otnOqOLzZaZqjTTMdHoPHTgDIVuL9YhRJsS6JegIgeeLbeFHaxTsNCatyUv29vErkkG410I2KtH1R8PKiGl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg07+fCRA9TVsSAnZWagAApfEQAIzXOS7ytneuHV/H40f4\nHH1ZTV7M5iLxGhSwgqtF2HXhTZrUhdVTP/mtoWgraECCulBiTBTmE5QKO1wX\nMR3hNLEoejGYd7QPAO29z+rn7Nu8+FVxm/mVlZjqpNCaxrNSkA3LSpsgaXP4\n+l8ZGUcpobPH5kC09Y4LVoN5V88PhXguTa900jDEzRtHy5my1D9Vru7WKwUT\nZs9E6q/iNhSUje37lsyCpTKpB+8/XwVVJZoF/VTM3SUHpW4BNqayKPNa8HQL\no3oqxeQZ1EQtg4CXap25CoNbF6rg/jkvaPKBPG5Rnr8SHIYf+BtIROKZ+iMp\nnoDMiJldRJ+RuVwdNg7CcoTb+9nlz3cjf8Qndv3+vkTm1lWqS3qvnnwiSHzR\nyDdlj0lFuDgPKQkwVI5mexyQPALvh0J4QH2dyTzRYdStvMN6phVSZbESsBHN\nseb8D/bfSXhToJvRoROwJgNTtaxGwQwXZJgZaNV6RMwkggn5QU4GkskHjXOs\noi8JjUZSebgUirL8FZaLfkB3IbuR2aFIPmZ90WrmMA2mBprpfvuw/FG5JliH\nBIZcMCHQWYKnDEB+AmISbIDqIwy9K/2PvlOMkXzT2QETMlYSkc8gHWviIq9W\nZuaExDpuC3vDSWqyEJXY9Nnw0YjcwMTVFO440CCIrbBBarsQRjyDGvXwLjsJ\n83Jy\r\n=IVZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"06d0d13057e5885806dbf4715321dcc1700bfe5e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.217_1624489887339_0.41534398906206693","host":"s3://npm-registry-packages"}},"2.1.6-unstable.218":{"name":"aws-amplify-vue","version":"2.1.6-unstable.218","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.218","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"46127118d6ad3f49f14424ce81ab1a0769f3c788","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.218.tgz","fileCount":47,"integrity":"sha512-7ZHCEkxebux1fNAf4oBYeK8HWYlPstqKb+OsogjvsPBhSQR+eD97hfkrXi8nzHFrhsQxDgBBPmTP2cxDQsbb/w==","signatures":[{"sig":"MEYCIQD+r0xKYWjyprXQPwQnFQlsgQOa7ZhZrgLi/9aI0iHjxQIhAJPeQh8xJnKq4njNI2Rlk/Pj8F6BSlxbkHBwJ7mWreVl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1M53CRA9TVsSAnZWagAA8g4QAJVYzX2q3FrYh4iDEaHv\nE24KnGKczcqaLZnaYu4irS1PF3uhOj6pqcfujEOFp/4FqJk46bE+O4KzGkKI\n/IuTJqxIJinKUXAiNcBayVzzjpFAFvJkHw/6UPocNY7j5L8DBNwpJ4ehsRXw\nC5+PE5bwb2sjXykVsf9Gj3Zkmtb+UdLtPPkfa54ghHnUompujGm2TVb7KLbo\ni++znmma8rWroHUiZC17OGqs0r6/fI3dGU+y6x/XdXI2uW4DcEFO1ZSwd2Rx\nnLqB/hsG4+VuxjlKCPgBtwxvKqpizl8eFAsKENd30OhxGebMWMtqTRPGfOoy\nelhRiy9ADZVA+fvc93c0b3/u14bBFqOig7iyT/jV73nMrH3kAxYomY0x2TCB\nBEsZL6e/yEeNwWUM2aannvLOcAX6c5ZU7QNZ48DV8Q9E1/LHQ16Z8L1m5tde\nzSMqxEtOHXLl8f0pLolb+xYu9S9EqWOSNLDxg6X9j3MaAmyKMoCBNCgXEI2k\n2SicoATk05DzthPtfcMsK1RqHtIayiKWxqcWMEFVb88sSWDFRcgqwMobFftg\nA6GFpYl6SCc6yth4oAJaiQR6MnWP66n4gOUUgKBs6YibC63Pu923dySIEJPo\n8rAPA+5M1EJibvgVSuOipr8RGykSihHEAZZJqRFAlGc/sPElfos86GwuwXLk\nEa8W\r\n=l6qe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"02e2bfba9ce240ee2cd1c5ae21b27693966a1f9b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.218_1624559222547_0.8520582391375737","host":"s3://npm-registry-packages"}},"2.1.6-unstable.219":{"name":"aws-amplify-vue","version":"2.1.6-unstable.219","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.219","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"75ca19c476b8af4b8463399280aa2125f64753d6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.219.tgz","fileCount":47,"integrity":"sha512-qRuC1L1qimYwyq4TPa7E5EEeRR4aaDmqsvDOZ8CnQGBakOiyhbOdHbHXG7s1MhG1N1WszXgvf7shmoOawQqMSA==","signatures":[{"sig":"MEYCIQCTLnqh28kprH7T8JMYWnjUunou1M+GOP83al52CQFLDwIhAK4r7VBc3TLIn98s+tyJu4ilE6sJEvjUv3YJFK+MIZR+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1OIhCRA9TVsSAnZWagAAHiIP/1zWSxy2YsytXOyeDoO5\nbGst9dbGq+2msSmwP+fAByBnafBia3l2jhZ/HQt7yAb6X39Cr9lJYC71pFvN\nHaC+mrOBWtv0dW16ceQ/d1TUU0Wye57+h8S4YD8uGZ6SF6n0lzSJ+s2fZVpM\n1bQMhsofhjslPBtirYrdWlAEC0i+fehbfsV4h8G7WO0jmrsQLOGPXFSnRkOA\nkuaBV0do9G6cUyt9Ubp8Vf5H/YEZNRGyQk+0o9DsN6ATW28SNumFnzBXspJp\nUrDqLIATXboQSfqcpJArBpO8oMl5uBMQGpRbqv/vFRdd2tQKpAHG49Og64Gb\njavvf6Vyo/3ColnPquAWXnDinKXv+teDWE2gXHalK40O0x7nDo27dwxfF5Ov\n9YP9ZZDvwVA4uawgfkzRX5lypiJqqlnoJ9GJ664hcFJiC9NuO6ONBp9AoYum\nShYeOlc1MnWU+t5kfEkDgVF3fPj6HBa38w6FQF7MEpQurtTEfV3RJT8UtWjk\nHAyyEkCM/W2vuRILuUeeGDSq2GQpSdQQnjarJtnhIyEd7CPfir+G8iXTogs+\n1M+8ZXE5Z64ZZykBCdY5B0abyaNBTJqOaEUNx1U9HqpKhwPIUhFoohTE6yc5\nOCDc0e+Q4UjW+q0SvMbSBF/xff2vqliRYKi4KU9scv0mVuOGs6Sq6OQjbWVK\nY749\r\n=CIPu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0670ec17a250089f42b669d53e072719d99a507b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.219_1624564256924_0.22397049796595003","host":"s3://npm-registry-packages"}},"2.1.6-unstable.223":{"name":"aws-amplify-vue","version":"2.1.6-unstable.223","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.223","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"17d317f41e9f96616ec00d43ac5d9bcca9a13197","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.223.tgz","fileCount":47,"integrity":"sha512-7zZ7rV9hc2KzpmJ39+lBCuEspL3ax+IHNAmCPZ5Cc7PuvvphtnVT+W/HD8atAICf8LHaNSN7MBr8oG1IA8y48Q==","signatures":[{"sig":"MEUCICXGd70IpOp+JorhOall/0GhsZm8qRaLtcPovjAf4RQbAiEAuC3wHmeBWaUOOQFoxXsSNnaFLzyVgBD1CtyWM2hhBSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1QyJCRA9TVsSAnZWagAABA8P/jFDF/tyBzypnn/BfDt/\nIEWPpWja77Yttlu9TcZGF9MZf7QxJKTrtdgcTu9kqaUCAfv+2gc8MovnEOMr\nJiHuQKAWIW+tkDSCuiiENy1Ij/lszZD5bd6iu9+CaEVKh8Q48WiqGfkwsspY\nxJCr582aMgAZ94gGwBYjWfrxW61Qq132dSK0UhbfNCqsmzq9X0EJ5LuSWdEE\ntBlrp1uhdGEUaQzbN23mKkowCEYP59/hyLnG462Wz+GR7sImtrn9NV9/ahbF\nmCtdWXfLNeRv3ntuWF6PfVfQ4K8NeamW3LKf3tKOqYLBgu0646WMJ36i4+9k\nAh1HFihFhRpLZQo2hobcIpV72FH2CC/Stz0Zk3klNdh77+Lhru9UvyvUBT5i\nlSqByV3Y1kcZpWmiBDGx/FLtoP4hvzERFQvsDfhdNQl6pv96hFbuqx4cFq2B\nyFMCJNtnLlqPVQ8mLcoO+iOmKrpZ0gKXjY8xMbv01JT2Ytv/ElKvod96otmU\nbszU6upSZSSrm8PCLRESeWV9lwtE8nTXN6DZ6dL/DhBvuLDhmRCu/Ji/mYtl\n6rRIHPSY35yD2t+LYR2hSwp7dXOZvcoBB2XtI88NNsHUeTtsSJLBTf9H1GPt\nS/SJmJQB3gaPouGTEQFfai5Ed0ALUIidUTPKITz0NLtwtr7UV1/B2J+633lY\n8NED\r\n=EL9G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"37422f27a22c7c36b58df4d0b9d37acb556a99d0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.223_1624575112724_0.38324184984981313","host":"s3://npm-registry-packages"}},"2.1.6-rn-sqlite.224":{"name":"aws-amplify-vue","version":"2.1.6-rn-sqlite.224","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-rn-sqlite.224","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"3f332c18eb45af563c9586d0446a88cc7a8f567c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-rn-sqlite.224.tgz","fileCount":47,"integrity":"sha512-Po0bJpzZcb/GZAIhK+wvl+nVLbxs5OQl79p7nBerwBvSrTOoG8Sv/CKduNv6mPBfwQzKNQu6H26mcmLOVBtF4A==","signatures":[{"sig":"MEYCIQDXSJl6OQDuCINDGXgGM1V9Z0qnf1jghRawp/XhRtmaSwIhAOHxPzsgYBlpV7Y6TW+yFbO0NoVRVIXWmuov0/e9Gkym","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1hjbCRA9TVsSAnZWagAAndAP/3Oc7vpu4dlgrvH92goF\nk7+i1tUqcbDf1sD10eyBfYRl+kWWZUFW0qHQWJAR0nXMGk0PFVMi5fG8F0ZK\n00/FyEkW9drFxU04ZvRuZXjiEkRjmJcl7ZnteemNJ9juQJUyIt8wqvG13y5y\ntTHIZE8xMTaeKesf0VHeLpoDR16boSaPkrJJXGXFw2sdZ1GqgcheQeVoWO9x\n0d4ayIvQZW5qL826vrEJ2PoChUn/NihOjVWCbAdrwg2X3sniHqdGzW9p3jkG\niZLPQBBW25aC6P+Xsqt5dSdZItj1cbT8we7JxBlE981iUWerpXh6LxSXG5z6\nzAOuVQV7IZjBy54yLlg79hQALr1JzHgi69UMX7en1HXRgGW3R0UD09vYQcqD\n+V3d+FVLEZcM/1UQNHkeYAVGcpCrWhSS6H1h0NYJcRNYFKV3vHRAsrJJ8aFT\ntwSbYGpL6EPJ4eU067yBzIbHiYaePq75QbrLTvTFGuMM0x0OfIjbFcZIxqmN\nXatHvgKFbthRBqwrSYl7s0WAHrp09AsPwYko8i/Zqs0wsZ8UZhbvt7VVbx07\nPzowT4aTWTZzJLHZcGQDHfe7XXf3uXpFo7SuEw40v3gx3rnKUHPa9Pj7a8mG\nUBAN02ezzBAl/DLNZCWeVr5N7iIE5juQmz5kJxKb7yog9W5BPzSaBtjSo27V\n+44o\r\n=rXD9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"83a5e5fab8edab3b2b76a7b17e5a18ddb67d8a9b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-rn-sqlite.224_1624643802830_0.6482262829920387","host":"s3://npm-registry-packages"}},"2.1.6-rn-sqlite.225":{"name":"aws-amplify-vue","version":"2.1.6-rn-sqlite.225","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-rn-sqlite.225","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"1b4d3df8310f412f396eb2de458bf1eeafa927c8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-rn-sqlite.225.tgz","fileCount":47,"integrity":"sha512-UZTpU7FsDIQLHmWeTm/FKAH3Hi8JzrkU6t663yF0E3007mSSW8uc7UVslxcAVYTQmD9fLn0gdus0RTM8d83VKg==","signatures":[{"sig":"MEQCIE4qAUva917tmH/xYTcGLE4mYihZYDN+BQ6BbKm/+DSEAiB67kHvKUUNizdixE7kdNhG3pCZ//nBOnpxX1TJyKh5qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3J8RCRA9TVsSAnZWagAASwYP/0H0XVSc3TTtf2AlEdo+\nuRINLzbEZech8LtG6fR2GkgrukVQ8neZJIO794VwD2aohhA0fIWuP2cGvUlb\nKt/mW/k+/I8aA791+5fjeRj97/OzlNMcy2R9eaFoE9JGxfRFieAtjG+NZTgk\nYiJ5vn0IXNb40rNt9vbbbRF7Dm3/f2YdYr/KL2a4T2NjBUfKyXu5IBH2CWUF\nT3+oRSrpytEI5jUMGx6wGNPyVWsWX4pktUAqaa0IFLhdP+rCgDh8q7MfFoei\nraJPdaALM+AAextm8ZG+j1Votm9kxoKop8nVUzYBl7Xpsu7wAmyalHrEs/3n\nSmUCJTLXGtH+1jrsE6TUKidwSjhDbEphsXc2UUiuJcG3MK1VXCrhADX3UbA/\nAUizxXCYUf/HwJ6UgQxY7Q1AgY/kojQJBwKGl6J5WrjGTN2KEuxk61jnuYQW\nKhtm3DaTm1dJ2wxz46R1KnFiMnN5u2Mu2cb5gIhFxXychIolCaKz55zI0wFi\nPjJqHjWZuLZ+8z2Wtlj3aUZaG3POQrhwZhs0LG8Vs0JerPZgRf88LyTV0YSE\nAY+w/FDSWXUAkhyZqAPQYkghDlNs75tV54H/Qom2j8qqTox4x9HW7nN27j9H\nldPiHkR+hfgh/MJnkWj04xtCmW266EEq9C7YFCxwpImjY79C8a60LKtBi0ZB\nk7XX\r\n=PN9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1516fd7ded7e96d1c6d808840113aeeaf0ed4b74","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-rn-sqlite.225_1625071377074_0.8408348602275002","host":"s3://npm-registry-packages"}},"2.1.6-unstable.224":{"name":"aws-amplify-vue","version":"2.1.6-unstable.224","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.224","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"5273439cb15d6dc41a6614ca8520b8f62383d3c0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.224.tgz","fileCount":47,"integrity":"sha512-KDmBg3DojKmzg1GAJT6nRSD6gwV/qh1pA0fH6aGSlco5D9JI0SbNTMN3sKdzlakaOOWRwuKhEwXspX5vftEDeg==","signatures":[{"sig":"MEUCIDZIw4xzg9jDIF4bdtq6HB+gMXcWR8pVfhYH0JVZFrE5AiEArLPmAnqRLWR7gIBc6qGUaUs439viagz8kXhz2fNDJ4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3e92CRA9TVsSAnZWagAAJWQP/2Q5c7bLY+CZVlsbEX63\n11u4Fjm64lu8j7WqrJxXJFjMsrEihA0ecUNo6s9TEHyJISL+Xmx0JDsC2MID\n8kgzUJnN1Yem3MaeNdLW9vyKvqGKq+BgMNntxFKhaPueMdIkitjqAwrN0U1d\nUYyKhn16oJN2V9SX3EjtuTMIAlRQiMD59trkC0UedwC4douN/I/ORxNSPzsx\ninWqVr86OaUqAqi/v9Dxhwfjuv6bsUzdqJ82oPoBAbA1bjx+bZgz2GPK4aY4\n8F4FnxP+G9RrfhE5SwD6UtKG6mv0kam9M3nzw3ffEuaL/hF2uWsgBfsbpKJf\nieLLfVLsUOBez6TsXA+hI+eJcZ0uUksFihX+F4lXMPnokw4Cmnk8uzU+neU5\nyejLokevnLby2zeRiujK10JztqmcweEdXQSJCBTDtJf1vgH+vIHqSRYZ3VTG\ngDlbDZzWxucG04gGWB5h/aASbGuUAM6Ca9oIYk2pniwTxxiVcBGg60p2vPJz\nuZ9s0i/PtMzCM710EewIPc9wPZBM5QguWqev/M8nnjikAhD2Deh4ZHWlgjlh\nszxVUJECotE1zjea2ZqTzDNE05Ln4bhIfqCVdLCw4AFIZDnzZDpKwowBijz+\ndA7i9wa4yRRRrhVbV0pUwue+8Z8npKnnCSqWq0sqn899ag5YBBG9dImzv2+n\nCk45\r\n=yPer\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"10857d5bbd6f7cb59a58641e0e8a3cb5dc0080e9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.224_1625157493841_0.4974895036686737","host":"s3://npm-registry-packages"}},"2.1.6-unstable.225":{"name":"aws-amplify-vue","version":"2.1.6-unstable.225","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.225","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"3006b2c69f14218266200fb31fd27c186a2a35c6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.225.tgz","fileCount":47,"integrity":"sha512-XF3/KdZXWYxm6Nol3hox03ksGrykp5Fbp0+mIcYYpH9PA9gig0S2lNwPTfKeKQ7Om3W/itltZtyBJRKVEWZEWA==","signatures":[{"sig":"MEUCIQDY0km69GBMCy6xoFIlYpQ5/iptV9EzexnCt9Bc+t/bewIgNKahKa415G8BjZuMc02vrMI9smS5PMSYSiArNUY8PbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jakCRA9TVsSAnZWagAAT2cP/2IZbqnmmfbCHIPGknyJ\n6B0FpkOYZPUBG7bjLsONsvm2GCVUq1KNdNAA8Tio7cqW97c1l0jTQ/t0Et8o\nkHh6JjP1D0ukDPvPxwX5kicaGcN0ILu66SnzOdnnvA9Nm9sYcZuWsXR+eICC\ngsgc6rL4tKpQ4nfqPMAwghQ22DRwYLs5sA9qGRJNFXlAsFEPF5VANQwxTd+V\nvFylAf21Qpzxdc4LOdxPXXqg0w47LRbyi2k98EyEEaIF9CQMxhbhAnblSGfA\nrSFM931h5kIfsqfkwOIF/KVz8HFKMhWuyJpKYPWCzPeX3fMjM+g2Jh6FCrSS\nGZnlPDJaPHHgfTd6FE4Q1QkLt8NeL9kkDL8fR89DINplYJQQ8/Hx7nC2Zo9R\n/lx0dDxfvAEZePBiV8OAseI8ueDmRdjkXzkriWJsh0g0camEInCsHFhI5lS9\nGM9wKGxTE0PG0wdqySCYA9xBWB+2LiPfbdSklQLphGZTRaJvZ3KW1hUP9IqA\nnOtkpT9OuzJzUEfsrVRhX+tshOrMoZ8/QsWgHSDHz2O6s1SKvz5rMGZ4VFNM\n/HE/Xr1jI7C/bdANtPPzrcIoZQ8TW2kQacmQBIkBaRbowBeXZX2Oeif3+Htm\nJ8bud1PoshXELnXdSaZ25cgh67D/XoMl6++D/YjyoFIdCm8Jy3FRvYD9u55L\n4p7w\r\n=WDT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a84978d61960907957699882bc16724287dd522f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.225_1625175715539_0.7577239686660617","host":"s3://npm-registry-packages"}},"2.1.6-rn-sqlite.226":{"name":"aws-amplify-vue","version":"2.1.6-rn-sqlite.226","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-rn-sqlite.226","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"5b220bcd80e89433cbb282bc36253ae26f086ca3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-rn-sqlite.226.tgz","fileCount":47,"integrity":"sha512-Ja8xZehugeLAohtxKVRpKvTKYPEWn3P/KF+Y8GqxUvcth4Yb3r7p127jMOHbV5V963l2YjWLA/aVaZzoVWXbFw==","signatures":[{"sig":"MEYCIQDnbsKug14tSDp+D2uwmC5YZN3lmF/kQspltFlFB5NHagIhANGuRggcOrHttQVRT7oL3bzHTzrhEryxWUCuxx6Ml8Gc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg33KwCRA9TVsSAnZWagAAHEQP/2x7OEMhgtaEw1V5EgoZ\nHqFFJq4po9D+upiu+ZE/kfSkk8zqZY4uCVPNwtoiDBaQ5o174MJiibgbnw9h\nMS/v4DJmFL2ILdYbozG/aBVcjCOVJaGFOTqelYV6Y/vRfPscT1YoKBIBpzPC\nu4vxJKwtcGHzqxqcy7YrnctKxYem7EgshSHeY4e0Bm6IPaWUmDLT0ceTE50g\nd+WtlzP8/tvuDqgbtP4BF/7TiGQvcep9KHPGqGhh/i67j0vkOCBClr2wI8vN\nxJFg2cHSTIF0AUlRKfWvMwO7I/YaIobAUz5ilE76eFspRHYRusIYKmC60av0\n7nMl9DQY9ispH19+yOykwKg4usREkhe+sfNhOm9SkrUztkqDe5qHj/+XRpPf\nmymwZ6Tvt85U3XiWIZslZ90l/IqxDGgkKzgxcS1KJhcpxvTFoGEmio2mcrV0\nX7KVVLdKS+U7oiLXL+70H/Fc5rtI/rE3mkxCxV1T/sSLpP6fphgp52SXnMCy\n3U6Y/wKyaWPdsy7g+9XYoQ7b7hl8ZAdPSnrC3baQlm0JvOEzV/xDLErN80u3\n1eDrIl9bdDZsqhDNVv52lxw5QSsygNPA0maGDM9jZGgdtskBhYc8iohPyWEB\n7L1QoJ1yb+Fy3Xqdc8JqbD9P/SVB7s55EoDXWnBMGDnlD3ZxRPaSDab0HkDW\nMyHN\r\n=0FGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dcc9c5658c770d2f866d7fe8c58b99ac4ab8aecd","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-rn-sqlite.226_1625256623885_0.8893381221750416","host":"s3://npm-registry-packages"}},"2.1.6-rn-sqlite.227":{"name":"aws-amplify-vue","version":"2.1.6-rn-sqlite.227","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-rn-sqlite.227","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"bdd614ebcaa4d2eb56dad80f9f9e76c09db87af7","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-rn-sqlite.227.tgz","fileCount":47,"integrity":"sha512-fAPHd7R1vy0qq3dPRitBACDeyjyCruNhczStWC/y/GAVTkwOrIpxKQZD7IeRj393I9Vnk0xHAYcRwFN5tIPQFg==","signatures":[{"sig":"MEYCIQCsU/uSoK6Nr6U5fzuYi4/KED9seb76+bzNIjrmAC5WPAIhAMzojAwJH5+HpIl09sXQ1CDq40mQW6aryJYv6k3cX0dq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4Rm+CRA9TVsSAnZWagAAVS0P+wQwbnLwz8XD1sYNqz/I\nu/lQnP0nRBX1BcuWmZP1PFlkwoJh2wnt/bioA36LgbflZ1OhDfdYTHS7glEd\n8DX4Whh6DZnI75KORZ63pwtFDu7VWiovmJPLo9upr38JncLNLLYQFHI9k2om\nkJCieVp5h26PbatljdI/XSG+8HiPTgTFTzgZGKIp2P8k+Yvq/iDHCgjn+gdU\n4C1E8fKO06G2tIi5ouQlBDDaGra5HEq5VZAyvkBzmq0Q6fQD6ojS31pKpPEM\nctNEccPkLA1PbWG5ZZBVtJ0DqQv/sFpdcDy/2EziEV9/64v/vKLKg4a8PW6V\n4TJTDL0gWvRKbNFZEufB5df1qKJ7W/ZSzGCLXEDCo/cZThqDEvSqB0h4FSYi\n5riZxrzzHHOM8BsyTOS8888JF8RjGZ3v+Jc7LdZQW3roCBnSj2B8s2/kuoXt\ngz/PhY/3dX4OOFw1u53dJsHQtZOfNp3mNR4QI5aFv89mw1Tt05/WUpJwsNhm\nQCQx+UAXI8Thky374HBZuKoxMiv+k/nmTJYzagNNk784eTTZ646L7AtI2G0O\nVQ+/wep1eoNn8LRA+gzIw57/9x0F1+ipJZ8mYvyafhdoWxHY6lw4xwS5X5fL\nnmqfDWrg19/A6mz9UAs7ZAKrleoKkRaqP8K3YyswrR98iG86H5qu35HqU9BP\nFTwW\r\n=HJgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0d115f91d67899061033e29a37affc6f5e5c74c2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-rn-sqlite.227_1625364925461_0.18091988082604749","host":"s3://npm-registry-packages"}},"2.1.6-migrate-rn-picker.224":{"name":"aws-amplify-vue","version":"2.1.6-migrate-rn-picker.224","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-migrate-rn-picker.224","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"05edc5d394576bea9ec643b14fdf497e43bd6350","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-migrate-rn-picker.224.tgz","fileCount":47,"integrity":"sha512-IUAsAwuGSb/GALguxnx3+1oLWDmlNbyTUcbz/uSJ8jjkFSkO2QphBzWjQoCDo4bqqG/tp9x72jLMouQEZOMwig==","signatures":[{"sig":"MEUCICpa2x+khSa2aTGERDmZ+wGtaKcJCGXENe+fYLLBrUKRAiEAvbvgaaV4b3lM4uf+mxcwmgIY0dmd3KBxx7XbE5rWx8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5P4WCRA9TVsSAnZWagAAAvYP/0VTV5NyOYFc1YmLiqLl\nwdT9wNVsHGIAKYFWmyQKOHnjhzWIzoEQmSKBUJ45p1O7Q+gBtQEN9hK7H3hx\noicJVtDfSsVkG+rRmxos7wvTVuPYgUyOr0UaaCYcL9B5OmF5SCHQxtkndNIK\nrup/cPbkmZirnaEfH1upqnCM8AVZ2naLKSKb6hbf6QFu689v5unxJItIDI65\nBb/yhLYdW8CH9zCStDJ48rk7iZpgqrcVGTOdhHmztMASQRMVC6BCM6LfEQKV\nqLSCFgy/4v1zergvczwdhPANn+ivjqaA7nswOM1VMmAJ/bL81G4AjHNyzM6U\nV8T7Rgw0V1+faEFKXckWdi7u8YFg4R8fYMQ0Yzl6LhHLWoj5farItjnnC3EV\np19oqoyQl4T4sFPDCYaGRvq3Uojn77iSn62b4q2w1e3m/ApS04FQ+1ve2JD/\ny2/MCQpaLT1J4SuAx6H6LOcgWLV5K5fLnR0aHgclFOfGA+Ji2pNNJPeq2pgU\nb/Aj+FS/kmYTwny17nSeQP+TMLgf+NUxlVpxzd6ZWtKE9wFkzgZRjsQGYSLT\nQjEqNkggmbibRQo8aSdfzJH5L6O7zBBsTmMtcolUvfSPoUNXUdoispiVSBFC\nHyRHpQZl+yxBZz/RRAsr0AaUdRe2R2BLJfBeCrpiScdaJg4r1TiviMgwUZMi\nURtC\r\n=JuFy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"789bf72c9488f3167ab7f6ef3aa040555e53f2e4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-migrate-rn-picker.224_1625619989451_0.2870104602094967","host":"s3://npm-registry-packages"}},"2.1.6-unstable.226":{"name":"aws-amplify-vue","version":"2.1.6-unstable.226","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.226","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"86c9ae671ef593ff895707a724307bb374fa97e9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.226.tgz","fileCount":47,"integrity":"sha512-6A9q+3ett4Odi3Mjz0+itbUJY7fmm7wwUFP65coDiOowiSzbYGNs6YOEJ28Np2FPSoyphO/SzPV/An8+sY9oBA==","signatures":[{"sig":"MEUCIGYBqcgIMTBUjammhDq9Bfngmo2TcGKOP+FtvV2X0aBmAiEAzcAhBRVqeTselWj634JjLn66qs3uo0QcAzygMFkLu/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5eC9CRA9TVsSAnZWagAAMHwQAJectOfMVTE8PmD7s6NR\nouqmp7NBpt5+6qx3buRrbOYyT+f9LYLwTofI5zYIJyJ8JrfDRUUEZl5g5j7Y\nyxPIw84QWs5zhKa3IyaVcWmxBNYr99AqGGEgPrZhsY4gbe14GGbhTPtVXPUh\ngZ4+czQEF0mdWkje7Nx4h/59ZWrKDRwCG+8OJJBKPxJg9YZovuqZoASmd7G3\n4g+PQr2JTPkxNnxk6mT1mb6OZSvzYPCs8bAL8/nbinRb2FfAVPXGOIcSdVJv\nAO2M+YLYZV5KCZ8SE0+5bOqwNJUiejQPzULEEWpwmgWH7csFj9rU0Su3Twu2\nTIwnCRAqBOPfFQ7V85UP//mRyhRzMwDkOv3rdyazSfHgARKjcT2B3UCWT9bE\nXBHwfncOpfUCBA5/zRFbeb/W5vwSGqDMzhhtEWP52WUoQxXu02ojvRIsNDgG\nWetJkTQQoPmOsPINhjKw6PeUbn/8LdW8lBQeVT/DM6SiDwbtaplohtZ46SEf\nPD29BnjkkO/GakNh75XjZBzJvq7wsbE8ZKk1NznQx71HzaX6+VOoSRi8gqZP\niNnnf1S4oy/EIWuJ7GPi+gVHyzTWrqBWkVQsmRP2YfYDgTeRIYX3Tl5YW9DB\ne/O4zJoZysB+G4BP1aYPvbBlfhOald4DIOLKIOJeNhuH9VjE/Euur2v+JnSf\nnA+7\r\n=ge+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8fe18534b752d807d175104cbd8ccb3099997b2d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.226_1625678013387_0.9356335005955394","host":"s3://npm-registry-packages"}},"2.1.6-unstable.230":{"name":"aws-amplify-vue","version":"2.1.6-unstable.230","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.230","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"68444825bfd7bb9baf95d0a9cadcb83c9d450b1c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.230.tgz","fileCount":47,"integrity":"sha512-zeCm2LvCi9NCEGKwqnUAjjiSny+IZBGUkhIlLVOxgWFxYeMUy3Zw/eKnq9PF93EsQgM5EwXsceoQOX/ojipBXw==","signatures":[{"sig":"MEQCIEVI5GL3giwlPE5LYE2FFW41zN/0V2+uXQlGzkIuPL9nAiABSGs0fdMqHi6pzo+ES1rIPPIZZavw6ZO6aZ3I1Kiazw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7doTCRA9TVsSAnZWagAAe84P/3TAbTdGdonVaFUj+BKt\nqJ6JtRBJGsIaQH63MzKRl0Mkaqv73YMFtdLfPNSWp4U3bHQSLpZNx7IM1QKc\nZPVA2qFtZkHVC5StFkYwKwzfjyISC3HP2Vlk0bMjAaeZJWR40ZM67fNWhxVB\ne81lu4mmFhB/ggngm+DSFoD0Y7OYzDo4pYvwdbkt6qaEIiMh4P4F7A/JSEZI\nw6ggGQNRKua0Rmb7rhNIsz+AX/kDIlUtjbbUVW7lydmRHHm/tu/kXeELdzu+\nWYd1XODtEfmaO2rwlT+3v+XplHL8pz6f+p76htJOxFVHBxIkznQtlZRBXJOH\noiwgIsi+fdk6Db/1iWpr6+ngD+2mlNwDZY95K5AchFMr2zX68pKPmJBS5Ohx\naqoPfRprZ2mSidzK5pP8Nrttp5EUloh7JlBss4uwqypwAMKqpWvIeF8xEBiq\nzbWgrN0f8fFVseyX1VG29u4lJc6U6+qsQlzlSszRAsvhHAvoAT6o36A3oRGm\nRj+3H4iiKQBKCd9sCFsEX1LBI0ev9JOra9Q6b1+DKvbEFRtF6DhqdlMRZXLZ\nEQnrzxONfLxIH/PfhXDvGg/JzO3EBYc7oUOrhWR1iicBeQY6grYuCqafdMQI\nVCZp6EVnob3zgJIW2IqrbKwR9GJ0to3g3gdBRY3yASZRgFSda15e3Bi1DmG+\nkPj7\r\n=kQb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"30728f477b63fdeb70ae3dac3fc4d8e5e3b9c05d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.230_1626200594550_0.9302279757486571","host":"s3://npm-registry-packages"}},"2.1.6-unstable.231":{"name":"aws-amplify-vue","version":"2.1.6-unstable.231","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.231","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"e885587904683b5404a659cd2e4db5b2402cc6e0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.231.tgz","fileCount":47,"integrity":"sha512-h4l5MskBFVlJD53cijrfUA2+myYzFMIHaFhh2eK3XvEwi0dS1G8MH8t3+pDvVH5Yj3JM7dQtuxVGo9ZW2TMgdg==","signatures":[{"sig":"MEUCIQDPZFL2ahooBGgO5jdGrehxU755eJmo7+9oQfMXOdvhkAIga059rAXhdUvs9gbcdHc60PuUOqP8I7VsU7i0AoUV1i4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7iaxCRA9TVsSAnZWagAA6/0P/i/vEYypBeUeeFjsukye\nqkq2IcwsW8O231BbMKgwrNqAA0j8KjU7HeD2x/KsoKnxLt60VrQlZSUO5Vth\nRWvOnG7N9VA06afBmzS3A6NU+lA/chL9zGkKyz6BlEEMXq8u8yOnw5wtnIna\nvTnP/baHmmtfB3k1R/4KgjDkguEGNe8yP1H2o1KZln9ziUJLgRjEUsZnaSky\nJvzclkh9PeUNI+kcNtwsbvAgLH5cFh+iv5h317gmkNESRdFbc7yioS9uogrV\n03FgTRLQJU8dYX7gESmgNZW1eVECG+Fkgs3fBjBTJBqPniDsTYcO8YMscA62\nayJM4WcFL5jRBIRaqQdAA4C3HKxsdJy9vOtmDdaDO1+DmbjnS3DpuS3w5xIq\nVbgFA2BRGJpOmLCzZO1QgMz8EgsMmzOqKoQoXP30aNfl2OypJrvIevR8f6NP\ne0SfV7c7iCf7vNERTVX8eI/LbmevbHHHH81vgGFGmz2Bb8laZbISuIJ8H9c+\nzWDalHhuAVIDY0lUWFMAJho79e1gSBsAN0a/Di9pIx3ahBBRg7HnMYOTIelF\nIel8EJiM6I3PIHuQrNJ8yBmkNrrlbUnYaT2c5SRw7gI7buRV0H29dXq7fn6+\n4/ga3Jsn6XBaE4OAvqLYuxISSDtGAqoLIs3x0yjhALK7vz121tZdnsU4g84Y\nL3LX\r\n=s/mW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3618b7b765d07723acb879407244474f93d41293","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.231_1626220208619_0.2554594117354785","host":"s3://npm-registry-packages"}},"2.1.6-unstable.232":{"name":"aws-amplify-vue","version":"2.1.6-unstable.232","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.232","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"47f7e32d9cc67299d8b3bb524fa1df05a31eb35a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.232.tgz","fileCount":47,"integrity":"sha512-5Crh4E9Pwf8p2m6qcsjyjR+KljhxmrgVKKgwV/RVS/XJJmA7wV8HUM+6tXKGYZLQdC48uTaNJ/My8Pyv8e0Nkw==","signatures":[{"sig":"MEUCIQDgVpRQ8Tx66F5xObZELC/oaPTP2MWLwyvMPpXU7LooIAIgUZsTu+CCW94zco/oAgpnQ3HHppV3HiiV3eKIE6A3/Ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70hzCRA9TVsSAnZWagAAiZUP/2FXgr2lARVbJ8qI8be5\nGQ+f/2O6mf6K3jXbZcQlbvR5ETCVCxIqQycSBB/TtFzEmICLUVc+VluhcPMq\nh3rZyHcher/wUAnK22h40h/OzWNLntCB5wjpwx5MXa4+p5ffHxIz7v86ZGKM\nLfc6bJoEqoQYPev0hv4urTpOBXZ26cPpeBsTPxwgfSHv1vREvy2N8f6WH/mo\nAxsVZ7poWxQwJf0TCBag8bp7tN0tmDkjLQtWiKF3St8rN8DVlqKjxpLBZDmh\nzeRGY1C61U6TtU7+ixZS0EGrQgdWFgcDjFKM9TLTHfnj5Ki9xsooyKl1FoF5\n8ZA5v1W6dDad3Vm3KIeBmIZO5r8KiKYXLOtaBgnDYBtERX6i03aLfvCSCEha\nwOmC4RjLsNTcQoknGrh68HMcOEeM6Tv/sx1DeqfwApQM5te0+G+6Edy3GS68\nM7OTMebVfK9bUeCKMqtdPoLOlIFogWozMOQIFvxXCQERL5W8hUCbD4KIrave\nJCYVbvVuwiVuD9dbbvnXMGjDNdzt9ljwGcEjIWMmmCG+u+kaGbk5eWHpGsfV\n5nfKJhO2/kfp7EOKchBV3slZEIYe5qoUsjgMKSutqlMUIeioyUgd5DNgNqBM\nHjduTjdIMzF4SV9ZLJ8jhsKGQQg2DtDZlTOcXDbsAov1a0lfYFa/4T1hjfYx\nZvtF\r\n=q6Fk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6f28c7e94ae8d41b37490292ff3547505100c6b2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.232_1626294386253_0.7562776887433067","host":"s3://npm-registry-packages"}},"2.1.6-unstable.233":{"name":"aws-amplify-vue","version":"2.1.6-unstable.233","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.233","maintainers":[{"name":"mattsb42-aws","email":"bullocm@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"}],"dist":{"shasum":"167415d1ac995a8fcb82c8e225edfdda558e5152","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.233.tgz","fileCount":47,"integrity":"sha512-G2O//GsWXJcxKy7/Qp4oQGxxtsCCLYwL2zw/Wfkex+k+g4lPzegoOiw1yfMF4FQ/HtsMvGc1CVSNuXWFUXXzkw==","signatures":[{"sig":"MEQCIDOlRMRof2anEc8+opXdLcfNkR25IeBQZzYHGUyKRQytAiB4Kw/rHPXd/0MX9P5DyDWshK4PwY+wJ9KQtE7y70Pp6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8HdNCRA9TVsSAnZWagAA8lUQAJ2Eu1wgHWvkGE6bOtXv\nLYg4spYRfBfDSBVxFjJ4P0lP2JDIYqHgeENM+me8onJC/RP/3NeWNCEx7EXu\nPhjjDJ1O184DzuC+/1hP5vIguD7pluY1Z9CxV19WMrFh6njx+d1bXfUklAH4\nlgIddWKk1Nvlu4Ks6CrAAyJV4gYshEfBLnMXlgsKVyadBAUsgvzBbNDNDgdo\ntjn5mfdnQc+rRnvcPT8UVpF3VgcweqgvJ2RxFyAx9nvnAwR0MEFU3A/AxtnZ\npiC7tYYDmIpCDIt66BPsLUO2iuOPdp8rs0rFfPICvmICF5dDnoV7L16e5ubL\nDlEI0+7SJVidckoudXOAZ96vd5/HYqplY5cdL0UcBlYO8MZLCSXQ0NaAUe5k\nKiD8A9ke+8wuxX3JD+m8FUeDfb/L1iB83Ez3ZWn4k3B6I+7f1d8pNDSvAjeX\n0GWG8thAucMZS4w/Uug0CRbY9YuKyzeVBOfnN9BOO9OnSU0pzaP6P432JFTN\nS2tdo4leQZT+0dzkeXenldiCAI49NDGR+xHLl3QVbNLQgGt8sxzW9IO73NQO\nsoYgfgoG1RS7x4U+51YJ6dlm7zWY/DE5yv4Z1M9Rkg+NFGYOEvGc07cVGpLh\nP50ePsNXGoCgHP5caBGU1YHshFB4ufEliHSxs2i/F63x1uvZQ/obQtOIWdwn\nP+J5\r\n=icaB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bf78611b8e4dbc4c8b774516c765cb6d1add8ea7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.233_1626371917076_0.03352133930013412","host":"s3://npm-registry-packages"}},"2.1.6-unstable.238":{"name":"aws-amplify-vue","version":"2.1.6-unstable.238","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.238","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"3e685ccd7bb5a1f77ac5aaa5e80f43e7caadcc35","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.238.tgz","fileCount":47,"integrity":"sha512-v+ZLS+B9XLiQphQc/OJunSRkhWn3d5DKnuEf3s/iEpBtzrSbjg4agkTWEA0Pqzg0us11olALuBErIFya+hWQCg==","signatures":[{"sig":"MEUCIQDCJ4IkBrRGVxLnmbsuiPKR0TYi0sg/mNHuIrhJYsnhTwIgOi/a4LpZA+4ats0oKfWQxXlTU/pq/ZtyYCZzH2HQ5vA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90OkCRA9TVsSAnZWagAA7akP/iHrpy8SRbzo0WCn0eAM\ntj6JXZezYnCBFWGJ4+cMC2jVOHi+KeZ6qFK1ap7nFFd/eM/hPVggf1UgtcKv\n3KxvhVNCfInUpRg9vdUMk1Pta/Lx/dPET8abmhAYmUBAe74YpRX86iOaeWJv\nWBT74HPDXiMv4ArUTrzprUHYuRcrztCek8MeKBMxYAur2XIMhJ6P72Pax9uf\n77eRifcNLKUj5xHaayeFcxG2vn+cJRrmpNmFWl1fuuJ+YcnhxH+qeVyc10ud\ntVKyKYdKtHQN+B9Wu39h+V9N3j49v+LrDF6yZ48Sw0le++T66vqbJ5TERRKA\n61gm21RxNg4RT8ry8vXz2JMiBZaxd063QIYc/1VQyZUJwvAMAiRT90frBKPf\np6Jqs59jvcDry1coUBNO15657f2i2yui/nETHJWs+9FcI4oGq0+c7ILjxZsr\nWgoLfAdYTwvz8+/F6Vl616RF0ixIuVH8SNA+4V/ESjR3ns2xpHXs3iXGsYmX\nButqZ9wljqAgVk4e2q82NjDSSib2CyLl14lijSla/xrPY89oBR2eQWlEwtln\nfbzmGyh3aaqPDSdnHo7wbytC8svoHTVx5glabJqBsrSEYjNpxV34YTPqg4/z\nzLYrkJh4S87PogZzdfcXlAkXY49ZMtSsELZyPgTXfCJvrtUDD+Ueji7aCzx8\ntgtU\r\n=/dKv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"34e7405865909c28c47e95fb7500ba92a935b8f5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.238_1626817443950_0.49669623593662937","host":"s3://npm-registry-packages"}},"2.1.6-unstable.239":{"name":"aws-amplify-vue","version":"2.1.6-unstable.239","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.239","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"b821f1da7daa1d2e646abe4a37f76c168bd23c66","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.239.tgz","fileCount":47,"integrity":"sha512-nBgaWn8H91Y1o0N3WJAspp9bmKqSNM40wJ20HunbN51VoHgIQHph3dfkKCirJz+BFcdgriwjA9Lns//IAnQmBw==","signatures":[{"sig":"MEYCIQC3XlTPOEzzXncL2qiyvuW4OSotg0Pv21uLdR9gpoCbWgIhAOaRr8z+QVA2TltimdiI679+HC8MDEXXwnTMZKTTpR52","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+F0aCRA9TVsSAnZWagAAqNEP/2HJ505k8um65HAnYyH8\nd2Iuobf1iWng3up6v+YOkXUqLvvQRLkBAjFr49JInsJv42sMfSgX5qoazEVT\nwMUJUG5g/oSchGgxqC7ghOjpFLMbwVsBIoCO3thcEc4dD/A8YhjKO9UMGHy3\nsRHI0XRcZ/GSRDL6slb6zwFFdiW7S7SGXt0+hb5zCf8jcny68UX8ZjyySCXc\n3oYrwEhY8hbvA7OK02VXyNGkRsSLJ1S99z+Xj+R1k/hUaAuqGNeMhWUSRPLn\n6QXKfuEGcGWv/j2YUyHn7i7dvaP+3Kf7EEhtES3s1RMpTSMfuKVSDYSP1kwt\nPoVgEBAjuL5+pTNKySGbwOHK99L41VhzTDhPGmnxgoAd4hj+Ncffqa3n53Fr\n0lxmKhGVpA65MufqySVgawslIMfUoMZ172IhouGspobFZR8cbwIZKJpmRa03\nhCd7fFbDs8EFymJnclroLXJy7fNe1CBY/a+ZySE+YKDVA2HqOVfaDywrQUhg\nrDzQWwPjg3lyuQ1dt2LrEJ9tJ1v8Iaw4gyCaAG055Fw7y+cHvNH0eHeRRpgl\npHfUxRhiKl7iAZMKq0wCsTuGmbiXuVuUeS3SS+G5FUB82+URBiz27taKchw6\nyHl4/r0lA2zO/h5uQ2mfjlKUeiaSbg20FcwM2OjLo1F+MG7DP6KjlCcriNGK\nkK2k\r\n=ubY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"85e9b9787ce1c8688e827b05ce097202e4e254f3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.239_1626889498370_0.5158745461964218","host":"s3://npm-registry-packages"}},"2.1.6-unstable.240":{"name":"aws-amplify-vue","version":"2.1.6-unstable.240","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.240","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"f59520fe2768da0e72dbbd02ba3f39891bb0fe67","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.240.tgz","fileCount":47,"integrity":"sha512-A+qxZHd9X6w5+aZTpdyQ0BDJqa01GlLAnWXGEaFsfv35rfJbEjLGyRt2QCtveAmDY6GoKwSSsNJ27E6I/mNa4Q==","signatures":[{"sig":"MEUCIQDMf4kt2DVdyLxt7O75M7KqS8QLwmqjsNFQOxzW49L/QAIgQFs4fKHuXxSaVwrrY6SYL0pkbFBqhp4x7jhtphQPL/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+T5VCRA9TVsSAnZWagAA+eYP/RziazY+EKZDQt0WmYTU\ndC8G0XaXiu0c5dVwdslt75uEbnwfSO0lXqFpYCvxC43DKSYxUTEiTA9IyqRN\n5V5K+XY9ro8/Jr7Uea0dtPS4WNV4pBfAFaYmB01GGpN4H7O42NO0/F4ga6Sw\n76sAtv8dFAXe10+hYddiAOVLTzZpdgusLWlIPeDK1Xrj1E7dF9wnTNKgwYyc\n8xUYqWxmYrS3IbR9nnqiwDhboqUMwIlTm4i+L0rVJMnWXWHyC0v+E3N23NJA\nwf9bWZytqgQPJ06B1+Wa22GOCOtBY1xzCIyoSSohuC1+xEpva38Ltr07GJpI\nZettMRaq7HITUqpbEJePjYnSU+apBM+ltKzM296U7+oZ3ytAzB8XknpAl8qd\nPPDkGFnn90kjslUQvqKZI/s7gsHYZSWVpr0kVVTZCyCl/P27wHeE2tzJlio2\nWUKXXIHt9pwxQT4yGcBshHnSyrbP7imG4WeH1uxa8iAij8ZaKjWPsUWzWqP3\nr49Qoapo4TuQ4Yn8uL/Bwv4Pp8gmfYqjRKzrLunIjI3+qC+vkdT3GNXDjKVl\nMDEn1/VfuwWnswTYrKsV+s7wbtpNLKw72S78Kv3bTiWRMjyXsTw9bog7m+pF\nXC5WxYfA1M2pTOfbtfYlZnxFM9R64vk1WQq7yiysey9FJsZKecKX0dDNbwnw\n7xmv\r\n=SXES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cb0e3d46791fc1da6e5b7810f3d6c37db9688355","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.240_1626947157586_0.6595670615621743","host":"s3://npm-registry-packages"}},"2.1.6-unstable.241":{"name":"aws-amplify-vue","version":"2.1.6-unstable.241","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.241","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9573c45a27f2887c98e0c802dd60ab8a25d23a86","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.241.tgz","fileCount":47,"integrity":"sha512-IDaeeV5Gc3jy3BVQYRH1vtJn8k1Advb2ZALPQoxiFWkCviYKAhLDwnxudUMuxxUvvIeOGx3acizalXzLNHK04g==","signatures":[{"sig":"MEQCIDB+G7/3ZRlMKnTshY/euiEncjo8+g0Y74To8GLsg2ohAiBkLsbEEJw6XpCrStwE7bh0zGXPPIOIjsu7bxYU8cZZ5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YcfCRA9TVsSAnZWagAAWpYQAI8BmUohxMFhuEjq+79+\nyacQuXrQZbT9BclO7WjqvlzAxpe8CjKAXF3ScmmhWZqz7MwURx6Kxk7mEAXh\nYi7DQI4ffcHKAUsGqO2jowJDr0+QPwmMtz3xvc96yoeeIxl4qS1lClkhVh3t\nyVGehs/NVTCJLfHSZB/6dn7NmsrUqTLkTEpUNjobCcaCc4j08MNHvToaznYz\nhtEs0UpwGNK8EhCoQbVVA4x7jkIwfEpLf77h2Qxma5yzJGunRjMjYlJds5Vk\n7fb8gK1ZBD0kk+4f3yUPuTU/f03VUFlT61sEYfevIQPYRnV6fbIZqzWBPs1D\nNkTi9AJsUAutHWw1kZJ1REKe3SpoyFeAMQkrNL6oZN+ths1AnDikvDiqkglC\nFja0vQ5+9IsumIOutrJdcu4Dl1u276vUUlqtricBmq0dFNbwfZ5GyDUTKgSv\nqtixbdL3rvY/r8+wkuFwUeWSmVt2bAKl0p+xjPdr+xUNHlTZJ8jcupUKpAxc\na3XoeiRt8A2WgG8Z2K1SLSWdMn2AVSngY0YIs2EaRnVO9oJSWAzHVAJfNzPK\nbyR+cso8g1VNUB0gH3hs8NGu3IWHD+D/abrwRwk6Tcs2bQ3xv4QdDDWTj78V\nE736Hki8Dp6WAsR9XC5OF4AQMdaA4URchklVdh2S3cEHuGdjJy6yowB6fxgN\nPPCq\r\n=xwmB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8787a8dec6328f14a73665177f785dd67caa1954","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.241_1626965791438_0.08054778583118671","host":"s3://npm-registry-packages"}},"2.1.6-unstable.242":{"name":"aws-amplify-vue","version":"2.1.6-unstable.242","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.242","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"f4a17aedae5e2a2afe049b94756bb2c436e21edb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.242.tgz","fileCount":47,"integrity":"sha512-Xga140SjXFh0+7vnSVOi26XZDAsELGP3wHvW30exsoL+tODtepkaxwPxwkkdB8fjaFxhvZMi1EG8LmJKqUGXyg==","signatures":[{"sig":"MEUCIQDyfLr6BxqrNQddM39lRfUyY64691iKg19SO/jqW93JmAIgH/wo9T7Bdhmog5lA/nmExHkZtZWLXtGcCEQekuA6Mng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+afcCRA9TVsSAnZWagAAQiYP/0ZXEioo9oMrGKvvaK5h\ntsnCLr6Kbd2tNSpAxSzXs5Z1pOc4rK7M3N7Gnzzbm6sHQBq6KVVdUxigDldV\n6s5HnttTeNhmbqpmSsXXI9/PCOgfZHQ8qaME7LzPhZEKTHJj2R8j6AUM8UWG\n92iqMjyZyZFes+yr+D/SH/laReTFJ3YHwBNfPeZ1Qo3ajmcDawXKBaXK3GuS\nOcTsmNfaKP15Y6URU1qwEpOK2O3MdmG72jGkIz+YnIOan2WV/hL0dC2nSyeM\n0vXTC0MY2XjfOKDHbpW3WToE6pZl+oSEfwHfm4cy+JaCz7KhleApUkTiMmoY\nyVbN8LhfOsmP5trxu8Vus5zQKkJbRkX19mRAP4paZvLBMsxCeSJULinvrDJi\ncIjBTV/9DIoCSphdkqlsgPyzDTYqrje9F9FLmntH6PHOSvBgDU7cRQwYCRw0\nXZZkCofDmQjcJL4hDs3NUsgDAW9NVBFW/XhGaUQZdNMyUKreQdOL9N0FKtPg\nptKw9P4fE875HMo4NZ7v6LVvH49jyOdxubzRqRQhrRYnqWFCYk5lFSOkczMq\nivehUdR8ax5H/7Eq7LrADALQbHBkR5Di/iw+QTWhFRq6E8coeFITVUxZne7w\nZhrQXiu6vWUr1ikE2fs2TdrIt5BbJGFBsf2SE39x9SCysCL9ypVZ4pHYmezL\nSXoU\r\n=0NCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"569214c762bb3aace1ff96fcbe468780dcaabe35","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.242_1626974172269_0.07342268947599662","host":"s3://npm-registry-packages"}},"2.1.6-unstable.243":{"name":"aws-amplify-vue","version":"2.1.6-unstable.243","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.243","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9b64c4fa77fc35ab24bc9343883e3132cf6ab3af","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.243.tgz","fileCount":47,"integrity":"sha512-+dJx0JW7gz3if1g9U7qTvZglYvfcRHvTiggETcxSZZm9Jh3WntRqVF6Jey1kzBlPUqrPr5MOeWBQbflwP1Kbtw==","signatures":[{"sig":"MEUCIQD4zwdpqHV78F8uDJ+xHKWxtJUoezVbpdAi69WhMi0MkwIgdK2LeP9iMYNHl9UqnJRNmHkRROl/KsxxHG6biDcIlFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2955945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+bSfCRA9TVsSAnZWagAAy0cP/3T+/jrubrD9+ySh3AZ3\n2FGNop9nxpI5/T+cQ35k8Oh71kJxCcEQzVOeChiJwbIMlF0ohO89bqLzn0VY\nsJzXKibIroxUt9tkT4bY7CWaPmIV1tEJA9w2TPCHndQyLVBQI2jA+DtXACnY\n5sPgAhXXzW4G5FaySaeFmvzFSfNkaSoyNZqWXYTnkmXYjbH7N22K+ItY/3n3\n7K70oBT9PoZ47ggXYiKlGwqIiRiRpBwRwW/k+A7R7pjvvScFcn9HKf2EJ7I0\ngn5qoVQDhM/dsn/OcD48K4REcqkpJkHGux6nDIM7s7+Lx7E1MxTbrorta0MT\nCFwTlsol3vGB3J6WJ0ObC73J+9UvqCdWLaUXf5YEFraoj6gaGnaQiyJlP3Vj\nvH0yFqbJcnRei8NXVHIabnZhBqOHBj5Y51KbZqAID7RBSoS9+Gj5Y1p9bVno\nmRDiVeHLloSCIhruiQPkScsMZQEcPQPLIc1rU52uZSjRgrAUKLQa7UnExAKt\nYb/b5zkGFPdtHY4rrjQsttqVYK6JoLPhGOd+zSrP2AcITDWaJAz6F/YZ9e/s\nZ1ICjxPx30tm1RdOQbELEWLyzQA5jNuahCDnNBC670vn+HjahSjNmxVPjJWC\njuEYsPpcPoFQsPmOfNg2ZrsZ/5O7T40LvjmrUIH9VbNgBdqDm0slq8ubpccp\nN23k\r\n=EsSn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b16f8e7801790a59a8ad0c40b598f4962aada60e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.243_1626977439732_0.8163862053098088","host":"s3://npm-registry-packages"}},"2.1.6-unstable.247":{"name":"aws-amplify-vue","version":"2.1.6-unstable.247","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.247","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"8ee492ddd349c57ab5b7b39cbc6be929c051b6b4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.247.tgz","fileCount":47,"integrity":"sha512-LDADmDCJap+2Nxh2ZBUVyvD99t9u9NrM/OGPqoEB6NpCM2KLrHHpR+NOkQSIlAFfOhGFL56PvRvoedF8KozIBw==","signatures":[{"sig":"MEUCIA3qz2LXeLIIHeVHPM1UaGKSjWj2867RHK/46TScehdwAiEAmC+1oVLtrzI1auTu7BZ4MOAOfDWBzHhhUxWdBCafb1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+frPCRA9TVsSAnZWagAAexIQAKFGhGNmray01BFbqD4G\naz8ADwrkXkC8K/btl+OIFZdiFi8+27CfGDl3HHLxmVxRZrw2mzTZv3AsPEDF\njXTbBFkU2cxF8TRNLMrTvF1gLCz//6lPgNSg1wA5PwQGXKqtytsU2DcuPMeZ\n5Pswn/ArDi7fFUV1I48BQ+o21CRYPlmKEzxRq36enAyI1ohNahUxyN7Ljo6X\nGnfOtJwaqyPMsHQ+Y6Zw/6hSQh1dnKv1UU/7GdgdTCA979a2PWUwAR3ANEEI\n/hRG9Oi/wsvgbbIz+z1GKbCn02GpBjmZy5SuGFo2hqZ7jfvJvxsJ6JgtpSu5\nxzFtM57yIRosito1brZ6KiCPBhC3K1DCd+1VT4IIRlsOufCnF8JL9Am+2jXJ\nwZU/xlPGbI7XUflIZuZI4I9fccxs6ogwDRUWcO6Djkrb01FEYJHgl/9sHc5V\nqsx5d8hSf6yFvJS4ZG9B6xUGEJQ6+11J9dKONZmyuHw91CfhHeyCCUEi0g9N\nJa7xAFQHDU+bwYbjOuaguSD/7SpV9CEkqijcy0g09y//a5AXzjXTquQ2Wwc9\n1pcaMjnjwjSQTcR4iHp159UcBu4HwgcidA0tmqf8rIvMikHZ9SynbuvVvdTU\nD/W4EKjQ/qmAOTr+6TZ99IvNwUh1nauq4IS655fYI7VPJ/aVNqfFWTQ5wFKp\nImED\r\n=UCq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b881933decff6d04f9d3cbf4b53e71bfb63e3bcb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.247_1626995407195_0.39010103379220396","host":"s3://npm-registry-packages"}},"2.1.6-unstable.248":{"name":"aws-amplify-vue","version":"2.1.6-unstable.248","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.248","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"5164ca4c23509b98c026ea6424f04d3119367527","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.248.tgz","fileCount":47,"integrity":"sha512-b6q6r/Zj7mM4/rhD1THstEdJ1nLJVxpSpZoTmfexGZMSZPAu0EsMzCLUigdZuQSv6dRNUneDj3afd+wXA2X0Vg==","signatures":[{"sig":"MEUCIBb2AGgcdQKZLpiEYJhh0Zw/bqJFWKLIK3cB/PhJNCAsAiEAs10gZg9VcMoOGt2q2rAF138c7EAVdc00NFiwl8ZBst0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xQeCRA9TVsSAnZWagAAzWYP/AtNMgpBVNRjM//Gp6me\nk0N8erbq76Now44n4Vss5QIXf3TlSCExT3fMM6vQSIOQzqneEfpLVBuptn9s\n0FiF27s0yxNCDCIqTfbCMGZY2hKEqONM9qo8DXvnD3XQaO51VeLGzdpxJgcS\nZd6Wpp6vsFKOc/FiJbGXhBOg4Pwujr66VGQl9jVdvvZ69KWkSDOdqQCBpBIu\n6YWHL7Ji00PWWVzutPeDMSKZDVTPJCTFERnCcmLI3FkFCR1VjfbtUnOcSbkY\n8I25DpXonIZJGLJTKsDaCrbRA7Xd2/JvQq4VtdCaD5zfXb80tmvcux6ZO7J1\nigDu8EcS7yRuprCPwQpKvCr/vQaaVZRP6y37lDgJFnBa/IqCu9WQy48NHsZO\nfu71Pwo41Aa3bcJs4mxPolfSwKTqxDDOzFjBGtLDuiH208ktX8sr43tcv4Oj\nCP3JAPyFzLJWeIC4liop4wCwBQArVhKBy5SYVTIav21jf1Y+rbqFkzBhvXwc\nKWeMgCkjbr2m3E5GMJk9Wt539h1Ah/Qn6At1ZUwq43elTIDWiCVze8briqfk\n0evGGIDi2OrsEV5P8usCHU9vr/f2EQhQAoXCgMUdSNfUblBhFMMVVDRewQ5h\n06dm7QdUrvQmlfcAhaTx3Bg/y+bMGKQIL1CmGbvT8cbJ38gVoK1jp8JgeVcD\n8tWY\r\n=9m/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1b1df679d874e824bc89f95054008b2f46ae76cf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.248_1627067422715_0.8114928388067872","host":"s3://npm-registry-packages"}},"2.1.6-unstable.251":{"name":"aws-amplify-vue","version":"2.1.6-unstable.251","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.251","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"3f1f759f2bc26c19ebd3e6d57146d960c0a3c706","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.251.tgz","fileCount":47,"integrity":"sha512-5LeBWv48X1atjJt4trn1fdSxUzbdG8z13rztN9/9ZXTqx5uI+/iCTrG5jMBcle/7bI9hbZ7nziL6wWJUEEdeWA==","signatures":[{"sig":"MEUCICB9OuEPlFEvFdM4Th3teRCwRQiVfRpOETQaaRI5zT8CAiEA2isWflAZqg/fCWRDoXbYzYy9iQ4k3SVAGfWwR9qefAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhABJpCRA9TVsSAnZWagAAlisP/AjVf+4VqobuUle0yZ5b\neXYGfRYkDX20EkVyLe2c87E/SkHv4xxUcfdLlv8gWkM+XnfxTDmGsQFZ3LrC\nei26hiufIMeKk9OM77oL3pnQb+3F9Lg3CIRmy9TgnFyf4xh4iky1hUfeXWPj\n6mrnKlYp034T6MybqSt+1hNKTEWuRKKS4m5MR89sa3LYmxueISm2mSOcYzKs\nM2tRp6xMwJp3nj1dbFxgIVL+z1PT312heZOEAIe4GKT7XerZL9msvkYlHtJS\nwc70j+pxCOIPw7+wixzezgw5ZUn73C9camPt8IY8NVw/GOQ52Z0VyfhfT6l0\nwRht13ZoMKNPL3hs+X9gNYKNHOpv6kdcSh+2CuH9hqzc/1J1UjQBfbAzAdOW\nbaJkWPTno3DdP8cZUk8zmsnCx6MfwNaPF3eX29Jo3Xb7r8nT8zFV5VFmXm/m\n2Cm1D7JyG8JKvq8vEr6W1kAUEVwb5tma312ZmQ+/W/Gak7n61UuAI8L4ysfM\nnqMIkFhCHr4BW/j1+wJ7O24kL6V+JkpRqcwxPQQJnoeTeb59ZPqJBFahmwDe\nwJWbn1gihFKOAoHbdcRPGzFWFpPHQVt7Mo1OCtm8kYJRpvdWdsu0FNlti4DK\nv85RQRcoLd2Eh54sAEEGSDAxD4rlbismdM0Uqsv/uj0Fi9wI+jIXIyo03SZ3\n0pfL\r\n=uMLJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"eb117d400516f509dd3cc096ae9b6c8098b29c63","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.251_1627394665606_0.6829520253683119","host":"s3://npm-registry-packages"}},"2.1.6-unstable.252":{"name":"aws-amplify-vue","version":"2.1.6-unstable.252","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.252","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"ecffa81e11e2c63eaa30fe816833d78a05903244","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.252.tgz","fileCount":47,"integrity":"sha512-6tNrHzen8I8Tv7BUCgZzqVJ/XExc4wAvoox2OZpu6KCEfWbXil70xJ1jLd0hdlnxwaTEWkXrK1eN5vE0wEmmzA==","signatures":[{"sig":"MEQCIB1HJ0CyUUzOOxzUdKvee+tDE3u+pHoC2KSSLmHTGi+KAiB1NayNT01hXS5imozWuWOMt1tjCBztoe6jdg3+Cu1GMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAYtWCRA9TVsSAnZWagAAQ+4P/0DXoSVIgHrgjjb5asX9\nGids19LolnWlY9qV/B8Y2fnELqdDQ54nzZ1tDUe3ZXfdAtn/ocNNULlEDzLD\n01KMZXdw6PdN0u9BYYbcRYojHs64d6KQB3MeXG8y8Fu072aCcjG+5pGSadE3\nO0xnVYqgcbqNdJLyFBFDTxd3b+DSCTX5YH2ZXwey4KV9i9NCHKFB+3b0KhB5\npUN2Z8s0PeGb05yssLfY06QYIxQPliScThSiwj9yVxCAZ342PA0SVVjrKv/C\n8tiJ1SidoYrOCD99U6Unjt4D7JMQCXmGN5WuZO9W1cCpGHzaSiwRTlUGm1b9\noLywLJGCbpVMD1iS0fprU/o2ZLcZLul5DqX0SZ16AZZC9xCuSWQO0er1jE7/\n2rGoU6gDPGKp4dxsCi2SgiIg/G7ITzytbBuJkAMgLOW70jv96VedeqG6k0Y5\neSCyMSTmLqdMJ61mPQZqRIJeI94iUDJ9ExHH4qmPgbkv75V6giXJtykRIjES\nt+275jaM47xDYjTnwJ9GUrmeaJ5t6z5rVHCeSfXuEx4YPbApsIgaT/LRCcwI\n8Kx0nulEpnpmv9KV2cpJY3ijCYPIyLXtDdHuhJSzmUbHIh5BrjklZi9r5vD8\nbrljFgSdBx53xluXlilKYpPRI9UWvvvhOD0Tt/cKiJyrmyHDFbOXWhqg/Oh9\nXytf\r\n=B9IT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ddc0d9303aee405b9c049a2f49d8883b1cbf3aa4","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.252_1627491157855_0.43191203963295455","host":"s3://npm-registry-packages"}},"2.1.6-geo.248":{"name":"aws-amplify-vue","version":"2.1.6-geo.248","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.248","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9b315460790803834165846d1f2d34cb47f18f42","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.248.tgz","fileCount":47,"integrity":"sha512-VerQOs/RePUsrt9nijoMYWs1Dl9pS7hFlQTN5E34KRIM/dgqC4tCgt1lyhXdjiASsZi23ynjJNtzzoj7PbjFag==","signatures":[{"sig":"MEUCIE3TIcX79J4dv/PGT443/eUEj9gJnTJTe337eu/BNWhqAiEA075RbJFBsen3fYcHGSO5Bi8pYJu+rTVy1kOi906TpE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAx6XCRA9TVsSAnZWagAAw4cP/i4NlrGGl660Dc+Zcy9X\nYgKgGRg/juj63FfBHrwGBH6eTEFFzDM9q8m8LH9a5NfTPcCDwxlrl82HQcUj\n6eQirqD05TnmZKHt5AgiFyhXmaGEYMWSemXUAOmjjNbBg5YpPns9i3NP1Z7I\nihvxIOcrZfVX6UUVSCAPs2eASoN8flF4/ekLp5k8t+unMUF4t3+wUViNEjlP\nY5aBxJvDUAECYqO2Ru9/v1RudQjf3TBO+UpmMGDDAc209HQX3z7v3K786n+H\nl2GMVbuuGNUc4f1uwt0xZAlLgrGo4INnfq6alqkmEkqPENxXopFzY3Ie9grC\ndKOGHAIL5LgeNDjAj2ubfgj1PObIkkIGiEjrObzhKsNmdSwecE8O0uF02cqt\nmgyK3WPc+7cD8RQwiDteg22hA8OsI18y7E2P/UBLB6EcOaden7ydSq58zPJB\na1UbEyhEX9oe1ZeYhp4u0FLTFR+WaDGuv5WrSGFxwlkXQEW62wuRX8a+zqks\nAtGu83ZR9R2cOzGld6SP/2nwgR/ZPjdl0Yz4DfU/TQPf/mpcaUzGmOUch9Um\nFDgIFsK4hcpE4wsBHfyXkb3b8wcj95WkXr5+4LJF/O7KOe764t2AQkpZqYNn\ngmgR9OYwLPrirFRDccGWT/jSivCvDH1W0UNnC3ZfVtvylPMBUeY0ABZ4oru4\nCuBU\r\n=TS/0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7be4beb5f12b4b007732b3627d1dc1e5b1304ce9","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.248_1627594391291_0.06156141394374193","host":"s3://npm-registry-packages"}},"2.1.6-geo.249":{"name":"aws-amplify-vue","version":"2.1.6-geo.249","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.249","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"ee0e7d04ecd7f31d391e204d5468267eec4c4118","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.249.tgz","fileCount":47,"integrity":"sha512-JhT9cO6N/3XqidLi0G7/STOqefNDt+YnTjY7MPfuwMoF/Ei9sL1klUK72Jz+y3vUZtmpkRVaYD71Xgfl8HxZhA==","signatures":[{"sig":"MEUCIG/lA7sPj3Fab/rJPM1kMjSpBSphMuNi5D5T/lcWtS8bAiEAkoPhyCzBrM1L74ASmhl5BXXd9AFvHl8LjEcpb9DUf9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhA1kBCRA9TVsSAnZWagAABewP/1kSQnrPnN7x6pN1FxaH\n89iuVzp7naaXMFqkYyx/NfjPfi5WY2npzHVOGyiCecuh4FCp6T1tzBbtvicf\nN9uYC9e8N3C09Xc44+Lbam7KYlX59Dp+uDeJyMWh2/ahAI4qjM3OBBBvA/5Y\nMDx6NjcB96TIxOwWIYXhP1NOUVuSnDgu3/Z6DCzDaH8aKaKRuXBT5hfUmf03\n4W2MVVqcVqBrqNsC38AD2JHXGlamCqj5HkMJBBd2FD/rZ2eSyUs4HC6UcASg\ndC90MblbBWvq9PzI/Ts9iNuOAKTqeoWkw3nfKk+bBKzSvJSwMGH8gxBVnY4j\nuhkdR+tnjSL8Fy3X+aTIeBcnPoN+JQYa4uhfJPFlsS8kzGe4ebCDiljwS9gX\n3T98r93OPw+P4lDapqbWuhMmyj9VzbeMNzQ3b341BORY1nSGGxzskwVa/9Sa\n3ef3YRewf1dmywioniRdH7iAdeTt++60XOSxCZAiN8gEKkUw5JQ7PtD81zzS\ntRR6VLsUOcdTgcNfPd2ES91Nj+W/qppenzvQ1p31dJ+41tX7w/kLIIeD0fnO\n6zmEosn/u50NKJjUEeXd2JlhDzXKO/p0bd7PDMxMECi+GxSIviWBGgth2ERG\nwlLsPl3DWHGQT60qiuGMxmhdb2p/4o9gK6dra0MVGVLzEgKuPH5aU2DTqRBL\nR5pb\r\n=BQNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"245967fa0a4f183010e0fe85a4c55bbfff96fcc1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.249_1627609345176_0.7789183806646558","host":"s3://npm-registry-packages"}},"2.1.6-geo.250":{"name":"aws-amplify-vue","version":"2.1.6-geo.250","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.250","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"7a3da79a2dd27bcbfd28759b0996f3f7f721e25d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.250.tgz","fileCount":47,"integrity":"sha512-0O901HARur00rLBDUAZm4je5QSfsLwEV/5vbvPjpfE/govkauDr+tfsFDCCv6SYFajYBTiYfVCpTIVjqqIc0YQ==","signatures":[{"sig":"MEUCIQC/euDkRevURqpUPOON42R+hHETJ2E3dqKIMLeXRjpm2wIgEM6syiw1Nx48rWowef2P89w0QZh/+NC6k4/TzH68GQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBEYxCRA9TVsSAnZWagAAXtsP/Rjmcc+E1nwczQrvO+gf\nA/yxKLZ2LVODVqUGGphFQJLBJuk1US6YgvsK+EBwUWCufjSNIgM/759QkNHV\nd93YFDouG/E/L3/W+UG8h1m/BWCikdQQOZEeWRMbIaB46aQ20bR9thlZTtz/\ne30EJv4gL0k6r1YWSQIbdBMHxibNRoDr6m/muoqHUwdjLAIFCpLhG5SuONSC\nvFzHjZPMftZoqnfQgEGkyNYoh6AdfPFSYUjBue6vyIgq93OePT0yE/aNzr0u\nds3xaxR8OCAaPt4M/iRqSWoDIqZf/U9CK434zFGkxdwEpzhvw54R6zUcNqoq\nETvO6QFOcsy0NIWw0nmQk5apb3q9mRLFXOH//FiqOjvOYDbh+X0hyE2svhac\nFje+lJi3pyy3T9y8R7+jSGvTyfkM4ZLqXdM5HaphuVxnjPleClUY5D0NDXth\nPg19FnePt2MeWQlZr0kQF5O+v19ExBm5A1yRzS2KNCukWPPJHNvBCPI1pyHD\nt50X41xa+MlX5FS3ZXP/LuS06Lf6SmyjDor9bHkJY8uOOqx5int3/QGS0K+v\n5FON6H6JHp9KsseHARXI24ZMiQ3GWT6zmRDjx8rF+KCZ1j84cVMoRxNKsUTu\nluTsGUxa+tm9C69vP1C2tCX7okjumrtXrOEsTr20AzE4qyPsOABoZsJhSbno\n16BV\r\n=Rdef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9038e42e140d88709706bde9c45fab183954b9e6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.250_1627670065629_0.5752412948245689","host":"s3://npm-registry-packages"}},"2.1.6-unstable.256":{"name":"aws-amplify-vue","version":"2.1.6-unstable.256","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.256","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"395ee39de52c797c254cfd25c6fd056cbae8f26c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.256.tgz","fileCount":47,"integrity":"sha512-Vwdx9Wf3VTTKPuvV0Z8RxPOwz7iMc/lnYPtbc264WCB2orVj1gXn7VrmKy8lsYV+RhPmOwQPA8wdffS/hf/8XA==","signatures":[{"sig":"MEQCIBs34+SSRwKsVcGj5JUge4/bqCFzq+LJh0JYEHWIZUXOAiBre3GlGbc1F+253e8G7iVUdbGFDjwUWMlooUQ5M+J2Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCDKBCRA9TVsSAnZWagAAMGgP/Ro276XOTUhyLDXkYFyx\nG1Y2b/WJL9h3P7MPlGaBW8VySCQfgioh4g/pD5phlFeRBfCwBgqKbDzRzY29\nQsDrnoX9EFFN411wiJhGX1rPlR+/A8DRs8g13Ab/q9sDOvzNlWFsDGK3xlCQ\nqSqMXZvzxvTJEiKLbE7yUBeiucfK363ZlmYsbCohk/9UGUIzludNUEwCDe7s\nCFhpSP6yRPMiLac6J3yCtCVhfqKaZhLz+ELsMUaS246jstht5LWwnb5dpPTH\nO5ScXPPKzNMBNsMWvarHx3d+j8M5EjPpCUDeM+CRgCei6ffl4zPQi+srOxgI\n1cDHKBjLshtQ7EePjpDYnEaL2vnLUlsHObUKWSQdofRNtuXoH/gvepPyhmF2\npab2VtD0ynKkQHTtlk2eJEaBZHaavNp5NKQNZ04UhhNCe+02TH+kRH8pOc2u\nXktaLuTa4qQBaQmZ+Plhu5esuZdw7PTJBLSxMldywnH2FgfZ+wiQV2fP86L6\nZ1UnHX9eVFBJk1IW36J9zy/BJ3tIBCXVtZwikfoytDc548bhluqzLoNuPYBO\nFlqsbC9HPIvwOmr/zAHSzYXlg2Ry9ffgT3KAEbV7xECV8OFpQA9hylLF83O3\n487bPOG0TsCenV9TDTfUMailHApmtCEBmfxt2d5Y3yiMALLiKjbrJcSPinBR\nB99X\r\n=k2+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d4f8fe65fb6d54400f5bc1a6ee85a595f2fdf392","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.256_1627927169578_0.9233351717078524","host":"s3://npm-registry-packages"}},"2.1.6-geo.251":{"name":"aws-amplify-vue","version":"2.1.6-geo.251","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.251","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"a8fb1f6ead81446e5e9bedd9c91d3f4c0b41ff9b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.251.tgz","fileCount":47,"integrity":"sha512-b4ie2jYtD+zyvEluSTXwRqU9K0BFsDTOEv5FVmAsVmavJx2CmoLQwP3/d2g9XASTlqOmTlabPKP/FK+KGfy5jQ==","signatures":[{"sig":"MEUCIQC3sCOFF3FLT3gVOSh2CsmhO4JgcBTdMTO9zllYcio3uQIgHfvIdj4Nxs6R/9jZTUwyvwbe17dgV9el2tEMgxCvT78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCIWPCRA9TVsSAnZWagAAPEsP/iik8S0/++KerWfPiEab\noGQu8XycIruGFP/+uT3D6AWeK5pEhXMlV4p1mJNi4dRZOwvDAgBg3qutXV4i\nlvgBHX9wWzYybQ3kYSj+Ecks3eyfJTiwNcV4cRKVKP4GBpg5m9e5OT7/XXfp\nXUmXhE07oanuMRTj6mDAMSpA6XxCu0aUG1W6RsUDaKpM8zRjQFF00yyKHz57\nhy5q/IPn5mg/TiPTzceVcg9zSMcPXw4jeskuK0l0C43Y+BjbfBifVdCwbTvM\nBRxCoY1jOF6aF0EIpFAxSsmVkbNYVuT0Sn9mcf6ZR+LOlecWuNTjO8hwS0tJ\nc2I77ajL9UdTsa0o5FrEEoNjKBqaWBpgJbVJr0WX9HQXWnPPVHR2oEv2cnvY\n46Q8qLn/XjFohkfuKJtJHU1aVg7EAqFCYWHv65gq6WNL08420E3pm+zRVequ\noa90oxV/JmVKyNF0xWbcz7gdzNjxac8/7i0Fq5lRf9eU7PM9Tlhe6h7WtaVm\nSkQvInyr+VaRM/SHv+6TI3WN0eXFgv9fJI5L8S3vWSRm0mqacgCGOWITZ3pK\nn4jOk4aGT5M9bUQFo8GMs14xjm6OKX1XW+XDAUI2TGXbvXt6fuT6LE+ekazl\n3rr7sPKAHHm1VVEJDj3s6sjKqNFRm53OikXKcMhx8jKvkLfMSBEVK86UfW6o\n+LsL\r\n=VCFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"98dfe1eb1572290299c7154845260f69a2226711","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.251_1627948431359_0.0075931263431174845","host":"s3://npm-registry-packages"}},"2.1.6-unstable.257":{"name":"aws-amplify-vue","version":"2.1.6-unstable.257","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.257","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"21f018db14e839918a163be1a9cfc4234a36dc7f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.257.tgz","fileCount":47,"integrity":"sha512-wydWh+McNIR5umjUoFp3uV15g0kZzGVPbUWCTRJTurqfK29AUpj+M99cRG0xK+XD7fhIZnUkvSY5EX7hX4pVMQ==","signatures":[{"sig":"MEYCIQDd4bNtQMWeZMDf6Gzjy4YkyOLgqm+TVGwciRHE4opFHwIhAOcY+1Vql5m4UQ67UEfSwZsSR9vPV+B7wZfB6x1/rQ8j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCdkLCRA9TVsSAnZWagAA++YP/jsXzXMl2XH/qj3UaRqg\nhw83dVsSH/O7YIVkvJYd8+4sf7CYluPFOjRyt8mPOBHahESlZQ2H8+IflRCT\naX3rMicN97L4PKhIs3LoqfSAGhNOftOwnOq9A0UVcFofmSl8VEvDXtDAImxe\nrULpxFtwoTocdqcktKdfPeFNMd+MN2Og7ewvjNfVZep5bVUvvcnMAG2yzwHW\nBSHyrHqmA5OuPMV31aLEoSrHd86tQEoEOUwjPVK1ZBGwAFSTlzPMTiv8/5ZX\nTrjvuBuLRHEdwv39JMEnvl+q49yjrTbsVqXjZbKWPcqw5AAwpCnpAO2LBIbQ\nFxpC9ZaOXxg9Tz94mYGbHUbTteDByvj30HYhQ99w4HJ+SiGiZ8KNdDT88Ozq\ne56BuC1/uEFT4Xa9O0/kuW1Mo5wAqg/0FwPnkloQL2yI6YIJvGDjAvZ1WGeP\nnr+M0SSMNLd/hZvvq7hU7n9mxo4HYvhwwXz1pmMQunPQmn5122K9uMh8l+A2\ntVigY2OdEcXwAo1Qth6cA5ptv+BeVoExAOiRKW67n8A8TPwpPH14bq9e2Sgm\npH9NSa+3t5VAS/mKK7Pdv4RbvmUQ4kODxBXvNqvZlU9sPkfx/YxCpYq25vh6\nyy+4UdRH6CRON7+YiLeHqDa9Xh2u1YeUUDwpNAVA8flHKVroCmA1MwGBk2zw\nmexT\r\n=tHe6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d23237883f1494dc2501f47ce1d96d082f8235e7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.257_1628035338908_0.9492017925201728","host":"s3://npm-registry-packages"}},"2.1.6-unstable.258":{"name":"aws-amplify-vue","version":"2.1.6-unstable.258","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.258","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"0ec7e867134f7e8c6e3eee0e24e142293222d53b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.258.tgz","fileCount":47,"integrity":"sha512-3dUQ9ZVzc3RTUkP25I163QviG7TlDA5KG//HbBbFGK5tdSHgLJ2g+rT/4MH7TVfRN0E7/HUUJjXqFXyGf+PBAw==","signatures":[{"sig":"MEYCIQDzVDkz2R4B8O1FSCdug3eHeuqSrizWZrxHRxgX7IhQZAIhAPslHtMS9bOIUQNNY4H/xT++WOK9ILJtfRpKUn14SqJf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDC4rCRA9TVsSAnZWagAA9fMQAIG2bfcPtkScFHK0+vev\n0/ojXLazaJff2UloPd3pwbyMVLeR20YL2VtHyWWL5WgN+IMBFWKROpN7837K\nnl1Cdnxm7Xs+njeh3u5krIXfl1vwSnpxd3W32/el516Rymw0CPE46rWGaX+/\n4V5eWgnMS3/ow1+c5DxvXaUIEHEANP4nrJclsf+myxlnJfxij63tHfKmZnfZ\nkmcyOfMPEZeo1nGeL7rVnUp+FMsC7SUn6e+gSL/HGPi3HocD0DcpUgJskKkz\n3QzjLQoTg3EvJVB9Sc4Bd9Ek5IjN4UNhHs1295ZT7fbU5TdEnxN871Vj7ajo\nCN6IVN+ovFC2MD5tT/+xLGfz+Ofe+EJMB1gpySD+czm+fX43fJQ5MUNFgtvf\nb5hkt9wA72eMvo3ZqGL5uETkVyeXbLOioHV4uQvwKiaTuCBT3JBJ8ME1BCyr\nksOjtXUculwxH44ZPWfSf8TmIkH4m0tq+mAr3AvLdwbgl+aMhjaxjxgfcfGY\nQdU2QWUYnKBRaU1GqzBHM1W04/UdHv1tpGkWpxqCxsbA7xrmaEJyakXEzTTx\nFhgnK2++v99MIHUMdsfadnxc+ADR+me68h8puzFq0aagdfY18A8FUjPiyNls\nDWiOQAlt2SONC4X7OJmKMZ0op8YqNPtIzjSLvq8319I+c+ERJEAZAqPLw5bZ\n1gmn\r\n=coJC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1e0887bdc45e178f04229c888051ecf10d2bfabc","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.258_1628188203750_0.5638746883738355","host":"s3://npm-registry-packages"}},"2.1.6-unstable.259":{"name":"aws-amplify-vue","version":"2.1.6-unstable.259","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.259","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"664e008a9c83da87b9b83f4f70bc000e86255325","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.259.tgz","fileCount":47,"integrity":"sha512-ovhLrFlagLI8K/I6jTf2aOtyPXxz9Z9yQm+3xnQagpivDkF1WYBRLxV3FRUiB12POCx0X0V4XYoWuzw5CfaYsg==","signatures":[{"sig":"MEUCIEij6g/vdHpxu3zpJVw/K9gxJ2S5W/7irJemm7wc1I/GAiEAgHmorsnh3Yk3llXw/LIUR2F9zeWR8AGHcGwZlSETsF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDHN6CRA9TVsSAnZWagAAfRMP/1hU/cZyJcieWitlelk0\nUub5pQzCDa09ANLgU22oi5UHIht6B6g6m8mJ2MJGYPGYZOWIiYHHvRY7jV88\ntmV714S34GHsF6G2nyAvEoWv41lnhZ0FN0oKxp3Fumy+PlNpNaGSScS7rU2S\nCQQiLW2ZmukEtTEguvYrdo1DRoRgOcKHwQ41qJYHSSOs8DtaZwtxW6gnEq3j\nTy/aJW7qPt3ewEiLcQNvDwno0+pygZg+cb6VMxaD7QWCcTS0I+UgHK+739dQ\nf8mhgoRBt6GtdoHoXGKklsUJQHnG06iJKLMcLnTx+0nfmABJfj+5UZZOV/ZT\nQtYzlJQFBrXWGPNE8/wmL4d50PZO9F49uzs8Rjz1LxndaD3elhHpNHU8KWP4\nn45dMAmRVcujE5IuYgopdZ//C2lK0MUn+L7XV2+udlq4gGopQAmh6y2h2/qE\nQeTgzAQEt69FS+sO9KE4yKrVuTyWVmEpCPF8yzNuFHqT0ATXi9saEXssYMLl\n/E4WM3+nPufm2/zq3f825TcOvQOLCwK+WJvbypxIQqL5uHdOV75A6nnI5Py8\nLQmSd64kWNR2pitcejxY7l94Hzz7q4pHA8qPMffyaIxqovJM3W9m9yZOwL85\n43ez+GxcwahoQxwgIALgB1QUNi1NHEelvMPOSQ90Sh7C0v/mg2Aw1QbBY9hc\nKdpO\r\n=T5Hs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"9ab6d52b5db164776c82fd5132d514d5752f6faf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.259_1628205946058_0.5095229322964847","host":"s3://npm-registry-packages"}},"2.1.6-geo.253":{"name":"aws-amplify-vue","version":"2.1.6-geo.253","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.253","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"3dc31aec8adfd55f9e31ddb27f166ed806afc4c3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.253.tgz","fileCount":47,"integrity":"sha512-GXW9KS6DP9831NWopRE3cvtopZOt3Ahk8+Caw44p7BmhDSEcMJDKkl7kJwl9A4H1kPpUH7+jr8QBOCQWOH2e1A==","signatures":[{"sig":"MEUCIH8fle7BBH86sP4itpBC3RSmEeJQQfVmdqwjAFRU7EP5AiEAoy3svcLynZnD+S7hJkgQ7IqNVsBK408MTCqry64lN6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDcyCCRA9TVsSAnZWagAAzgwQAIWwwYhWzNc5MWbtwvFE\ncPTLEQ2BXeWtInzgDLTeitdoWwjQIxU1MMaNEDVDpcfAe03jGZS9tVOphKwa\nwkNNsTpRZsDeWyrhFFufmxVE5D8iFKHxUvqZu/QUhkXVEiHts7KV+tDx0qW/\nb2a2cnjCYxOPwk4Cm9s8gSau2x7NWV/sp1Lyh9ka1oEoHQSiQtLwA8dYa8p0\n9GPMSZeS6hBpBN0MOuoovlPi6/4qM1+4ILVRF/KTaSVGf3uCmmeA49Nv4CBu\ns1jhtWq/hA9MQDfbX9J6aCbjeI99BugWAKX1pM/scYumUzQz2h7ryrQPXj01\nqGKwxLWxsKvOsJzBY6+FStF7DGzYp48iKpBN5yb2pK4u6bj0xQWvPeKlSKE7\nQ7ErejasBOYRSkhtKf61uA5/fxm/OTYgFv3Z73iAx/Lw9BF6i1kbukRNTHy9\nGZcTLvzNNE75KCtdM70cAhxwfP7B4PkR12ov+/HYGq8jGJ1eoZipV1REuLel\nTvRc5fLn1V4m2rC9W0xefctS3YT2PRS5/XMrI3EfSuPoWz3WGy2QqitfgTgl\n1104jRBhU5YSHkpssS1bSWBwut0PqRIZt2Bu8+zBollM0ip7lyZHwk+EIfrn\nq7pihpEuiSKE9AV6oDXoj0QZDn/VMWgO2ETyzSHK+9bKdU2jDcOk3KKiHPYY\nWZUW\r\n=cZ6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"03be4549e8ecf83cfd09e8ae137fe7a9169163e5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.253_1628294273993_0.6013835357762345","host":"s3://npm-registry-packages"}},"2.1.6-geo.254":{"name":"aws-amplify-vue","version":"2.1.6-geo.254","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.254","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"499410abddc89d68aad998a4ea8e51400eececa4","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.254.tgz","fileCount":47,"integrity":"sha512-GIjwZ8WfH/aKUCif8ZmvXIxEFZ2IcsxBwy4pAJwVWq3CIkUIG5LRXhye1cT/SQ770NOFa5UV87IsYWBVrnXZ6Q==","signatures":[{"sig":"MEQCIHE6+q1QvPJVaPxyD82PkcmmkNq5+m8bu8OaAuEwhaUfAiBns8zPbxrXhNkuvR4AhEDXN/w/xZwrd/a1pICke5oetA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEbllCRA9TVsSAnZWagAADK4P/0R9oSTqdL0xNJc4DN8E\nnOzaZEX195m7LrPTQYjvsqwcTcMge7O4GCa1d64+9GWJrdcrHU8w8fYq5FBv\nytPVH9JH6g1R5WVKlepI90LjemzcmIIBWfLHfJH4v8ryEt90jUfYEJXTHb4X\nfFR6TMes/uyA1gWfjeb1tdzZTqsVH+qipI8ObWmCILrNfAoyHc7NGiJdzuIw\nuvF+o77saSrpWhhHetvFxOH9Mzew2DVOeXs1cMypCjrNg2OgNN6YczMDiQFQ\nW5MAAq+w8DXpqeTDFcxBZ8uH1MrHhZWCfRFN6AMgX3zy80FsyoD9Ha4UywHN\nvyfDsyPDOcdj0JfoHAoh9+YQNgM2JTGZmYY9t6nspDrjDOwV0VN3fK+l0jc/\nPO08I4L8AJPTNcovz1HIjYSAuuNiNtoLVh174ehhFqED1Dr0hQrwl0A4tKSb\nAp8Ey5qetMdaYa35REJDRiQxrCfYFgaQHceIYDZwGshuM/rHuQ/My3kWm3iy\ntjgQTbPKFUAJLFFNPEEFimy7A0+kcXKyEDS3PaUSJFVlUuXcfMjAvb6BNesL\nd+kSJDwLoygwVEa3Y95qMeGvm2RfigyZWXBzh0vjQFgypWGSOkeVo7pex8bd\nuVhkfDG9apyzhhMIh9dFTbtZdxDMMEhkEjlIfLqK1JfjEpFM3SbbVkdcP/Q3\nZhwc\r\n=h+KZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6c63f21561f95a37047e6083d80ae29812ebb420","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.254_1628551524845_0.33154587216336373","host":"s3://npm-registry-packages"}},"2.1.6-geo.255":{"name":"aws-amplify-vue","version":"2.1.6-geo.255","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.255","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"285cbad8f4ad5e18b6396679db22b6e132c546c5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.255.tgz","fileCount":47,"integrity":"sha512-qazuOaMr+l6frxkBw8Etvub3Rp/yH7rbOqG/PwVVZEnmIxOk18F9m/DCIPT36k1FpNv1lHm96fBlBJ+N03KkUw==","signatures":[{"sig":"MEUCIQDE7uJo/YaRnbz0Jz+fZmLtzRppbq15nHxM7jnz3pizXgIgNh7suRekKOY/svets9H+Dp1v1A9u6ro1pXVM0cglskI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsXJCRA9TVsSAnZWagAAshUP/2OBAd6L++NTaxbhfBMS\n+m2L5JKUsXcTUPwkPlipeXZQnJnkwEvwTjKAY8IGSamFGbIESm3z3jrR23wk\n98wDQxoAeslAZEh2OBV9rJyLgBxacxXxP+FAleXlih5JdkoibEm4qhLDrY/f\nildhc4VFpeIF6Y9WLeyXfBRDCzjzSlehujqPKsQUHY2Lfpk3ROKQGawGKWP2\nvYV/qeUEeqXDRRrFPoMDMGGGnFX9uQK3v+jymHKnC1LpXywCO8HT6qwFM8Z5\npRKDEtWmC6Halze2DXAuRoClE5b9slhlB4DHW6o0IT4ykHuNIkIZXLrlNNja\nOBLZv43/S4Q1Aurs0LbGN1BJVxisu/Pz0kX5lwCeMdKU0XaNLFcBl/MwZkrc\npuJyE2CD+SEIA/Jbi2swBFINAkaFSRsecf8r4Rz+SVoAKmVqfEDaceJ5n6c3\nvZ1w1sIUMyoC2jUH/xYNf8paCRGDRH06liVUz6MTAZUwJpHLoOjgMyxqm54i\nn/sD9ckXUlOvkKqDfFaZJxm68Fngb2jI/ZW4Sw8rho5GZo4CgAXVPnbgsr0F\niMbkXwaI19DfCVDkXe2thUnfYXJ74YTqa1TQYxXQMhLPTq4Yl2Sx29g9WCHu\nwIWldvR3dleoNJ7ihG9dieJ4kEPYmUOYXnRffu0VbD1gDNil7qNrE0SPIiHe\ny58C\r\n=4zT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1a6ae6d84ff4317c414e60eed6d547d5f3519165","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.255_1628620233041_0.6923041517352622","host":"s3://npm-registry-packages"}},"2.1.6-unstable.260":{"name":"aws-amplify-vue","version":"2.1.6-unstable.260","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.260","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c055708e1fa1822ae1afba2dd059fda5c08498d8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.260.tgz","fileCount":47,"integrity":"sha512-xljO60jVqjsTNsPrC4PfKIE1SZ0C8DbvvubriuKJEn3X1MInG4Mjy90fTd4GvuM1ppUmJZSvnLs8jYQb4D16bw==","signatures":[{"sig":"MEUCIQDd1N7aRiikvX5IE5brQtBd2TQgd9XHFaOSundaB/MALQIgTyxWejaEhbukLlK3rKEc9zqC5tjmRBwQeE7ckvQiTh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEvZ+CRA9TVsSAnZWagAAA7wQAId98aOEB+w237/8kLAl\n2CkHi6gO127geQdyc6ejtuQQsIdeU7ndlgoQk7R2/5zJz+y59YSJsaUhkcco\nOdXvJy/1nH8C73uGC/fpjF0Fg0L9YSPuiLoKpy/SGA7Lx/MU4Xcmkr36AkGz\nmf0lGBcfhS2Jk1pOevAZ7I9ZnOHudIdrObXgbyVo4AC+PjJeeBWcegISLzV7\nfhbHtzbkVky072T/Xll4VLZQElu+XEk8C5u0J8XPAs4685sHikQp7gwpjN1Y\naulIkrOR/8ITvds0iit3yhBaMz9qgiXrSMIs5LVsY2gGtpFzG/jyyNftI9WE\nn0nkGzlqb1KtgJYtuGL96R8p26wd7gm/1U6iu6gVcQWjpiwMuatz+RQAjqge\nMGucPiFphTKBSbtmvz67DzSi/BkTKqo5m1OmBsAKMklmbx3FalBYcIhORhNU\nCGzWyfBYE7pGnzACOMThDKv5xaw4mtBe/h7fH7ny5EGI+RuqhXOPN3B04dyi\nswRjNNOvlp0ThMTT80NQGhb1fXZY32v0v5jv4cdF3PZibM5TMwtTEo5Sk0R7\n1ZndkUFD1vbfsYk2XwoFKradviXdAzGbrco7BgY4FZ1bu9JKLLDtYYAIuLZC\nz4q1/bFNXuAWujTL5relPTqi+9/uikBt9D9QdfpjFIDHirunaQvE2OjxFBGw\n0FhI\r\n=RX6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b5d424372d382e638bd58844ec34c512026cae02","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.260_1628632702318_0.6072153488864249","host":"s3://npm-registry-packages"}},"2.1.6-unstable.261":{"name":"aws-amplify-vue","version":"2.1.6-unstable.261","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.261","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c19e7918a476b68474a161090aa0f4eb2cc3892c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.261.tgz","fileCount":47,"integrity":"sha512-UKDDe2OMrmISL/nnFZZP4qg2vH4OpTnJCluAlAgHjAFdza0jFy2BzoIEqZMtV1+SgpLf2oD16sXGhp6Qqnc2Wg==","signatures":[{"sig":"MEUCIBVSB0BIPUFQjdkzaDPjrPjcCOXGxfh4a1VvlJ43h9kdAiEA19CE/Tl1Zl209WBMpQOxxCYuCiJns6aqWrdZn30SdBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEv2tCRA9TVsSAnZWagAAuxYP+gNzFEnK0pNH478Tdijf\ngZcx4gjVHU/FCtowWGZ68hzegu7ai3CPmS0a0Xu6gWXCml/dCQ+khUDTOQ/T\nT/9bA5FS11kDStERflFxgTTcw+p5Z4QocLX8pK/IvWsSxIN1jNKOf0AyNG7k\nRdtK8objhfnqwoDVy5RDiW0Lr9nCHQfq6UBmVT6tJ6uPXvrYacZPO33/WkW0\nNCARzKbYCfWSAxfvB/Pok1Fy53OdvyXKKYlfT4dA63DMHohN/dUO9alGzWuY\n8zNQ2XSo3k2D1ioSg+izdlgYUDvxVph2hA9rgSBAEo2/IOkEEn1HROdjf/7U\nTsbSUP3WPXlFn3r0zcslijpLC/sez2k7+HpsWAVRJdrgtElyxPwVnzVhoz2/\nIbwY8y8ZO80rgdhX7VEfhCLeuTC2JODNDgxO2jmhIjjQMRULHbGYA/2lqK6z\nVsxE8YzlZnEXKm2spC6Lg+KN6ghgcYGVao8v9ta1XO1QSOlkr//fqWgvrQQs\nXrvpY3vQK9oOZkmY9gO1cnbzEsYVz6o4PfnHD6IoebhcaLEWRe8lZYLhqpsS\n+moyhGS9MSEFVmK8b3IQOZ2iyrcyhOvGam24QWw0kMch3KtWQcOeS/MYxjHx\nu/xz06Ge507RcTzfoqiVnmwOTq9ppy1Frh2Z0hnuMGlbU0m8GjS3kL6YVsGb\ntUVC\r\n=dlAI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fc7f8ab6c965b980b87d9a0d47583672813162bf","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.261_1628634541301_0.13793672521914302","host":"s3://npm-registry-packages"}},"2.1.6-geo.256":{"name":"aws-amplify-vue","version":"2.1.6-geo.256","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.256","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"94a6475c5de57646c37dcd4c134176384965b69c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.256.tgz","fileCount":47,"integrity":"sha512-TXVCSxb+eSIdyNVgI9+NWni73ExKU0G1aaXKN0kuup739mAx/fk9tyYEPEJuuiGAPq6eKA0Mdl+3oYCVztmtlA==","signatures":[{"sig":"MEUCIQCegEmFN68fKgHWXYNEBC2I2WDgFIihPG7jHOyf+PwtEwIgfhfYGpkM7YacXL/MwlVz64EgR+7vukMWiIK6utD8K1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE5DCRA9TVsSAnZWagAA3TwP/i49H65EzgZpaEGv/NRH\nlDDjus5ClpJEhbJu/BjV10XH5UxEDOEDYugkNdocl1MW6/PTvTJwJ9V6zVzI\nw7MpoeTUgItqiAKyljNBTb9ZdIGmDp08lB053yD+4ws3N/WqTel04h+/InXu\nlsLZuEJbmV75V7L5/oySeTn0FL2d4CpJsM24yuA/ui35PLaoMNNai1dHEpIO\nzb9oylZmI3y6ZCw802IyB3XXLcj8PvXB1IsseBP1YYjzOKk6b6r86QnGj0b0\ns5bf5JubvV3NavQY9oSTwyYx9dbH0KFdnG4v57wlb+rfBJTnS2+ysqBMEus1\na5GRTbaiZtZ7puul8ke+ZA7xKZyLIlOaadnCR+mA4pCiyQVqQSlAFUUcSuHe\nzRSjq3yD62brfSQdQozR+K2E1GYOC6mAKz2u7mBTIsMJ0FgIKm4fdS7H5+X7\nIJEl6Vhri0CSpA+JprytcbqzdAJMEes0cua3zDaYNked1+FfHejhRgGKmjkl\nFpKAikgaxDqgZNShOTzqCpTUbGm1pu1Pc4POYPSL+nci9bS42koGewxKRk5k\nQYqnkM0qLfyPz7ofr92fh8cs+jC8bKNTXwjDFa9KUdnQU0FdRtdjiAvnL1jI\nPXkJyybPP5KYZhnhwKwROVbRvTKGu9Bh3+tw5HPh3/nQiB29ViFRilo8T1Vl\nC+Vf\r\n=A6NH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c54d3dcddaa451c8439a3153cc355d0c71f70eb2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.256_1628720706891_0.43117588427172393","host":"s3://npm-registry-packages"}},"2.1.6-unstable.265":{"name":"aws-amplify-vue","version":"2.1.6-unstable.265","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.265","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"3ec1ac2ccfded8ba174ea3380ed7a3d5e3f61c0e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.265.tgz","fileCount":47,"integrity":"sha512-CGyvJaV9xdUF+2uDeIllCaQAlSMdwYvLWZPnK3mvDJ6H9jpIB4aXuSh15PGeXC27IwZtY0+IyfgxDKkrEZtTGg==","signatures":[{"sig":"MEQCIAUcUCMPMEuH3E/y/PIZM+x0IJBVFpSpyuVHZrWVZiZTAiA32fsWRvG7zO1ijLMD9uosdxgxW4m9qgdSoQgErkZMeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHnEhCRA9TVsSAnZWagAAaGgP/iGbCf2MF5mhGNz72lnd\ntgyrGNBlj9cuNBhhoTVbKN61NhWZ5zuW8KshGkLPKujAU06V7T5jEvCJuJjj\nGvSltoGLf3IkLdmg7SCfLLAL70xYLuG4kxzgDYVWyKilWeYr6ujhU8ZI8Pva\npedy5mcaPmP0bXkAs3aOz75HAK7/JvtDGDHAR9QvNiMITNNQA+XqYsvfzv8+\nhaUGkJZUuApfAEarh9WO597F5M7q6TIH2yReIncvVnLoiV3rr8m0UG+lCLTf\nCkkj4mqUZNdltqtAMWJjFmeYKyNSWXr4vUutwlLDFxs+Pca+TeMocKSdC0WS\nr1uWX+eNsk0CAjg/ED4BAPpNTAuFlv5z6/qImZNMh1IFU9TAWGuLc0ryvKd7\nSedCVWXmeMnSJUvespP5L73dWjvLK9h67UGe8P7iJSlissfdqwV+MHkaLMSR\n0rHuR9oc+ZyxSTXbG8ew/2ta1GltKsFaq+nKogBTQVtwVEMfiQcP1iJUndLQ\ncisjG0XOaSiB5QLQZ9Q0Fg6IZPypAmXXqRRNciPdpGKglDGsT4XvOCWwADRl\nMNKGVzZaStFA9rFcJoNpvya+8z4fEqpMY7MVUXjTKrbEddfDr+GLtZcJVuky\nztUU7vp0jShbvcYKjypIENMxsiSmJ4SLw04KaIPMwcfDA5GowHyN8VmDz0xk\nBv2p\r\n=F6SX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1bd6c35c115321d77f48a3954942dd57d7cf9056","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.265_1629384993279_0.3507963990761982","host":"s3://npm-registry-packages"}},"2.1.6-unstable.269":{"name":"aws-amplify-vue","version":"2.1.6-unstable.269","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.269","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"20209a46c901efb4e977c83c0839a651b8107a65","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.269.tgz","fileCount":47,"integrity":"sha512-hE/7WDTS5UsTK1I9BjDwgAUSlLTqxYUE0einzstU3NS7rgwdGHZwmkZ/wMCrnKt6RLa+LqjltS9woFuHPXr5lA==","signatures":[{"sig":"MEQCIAYK7xnmZwxpdQ0JKVaSWkaMAf9/ktEagmyck3DRMaGLAiAWgt1G56o2iD386TLrqGx6JLACdHYnvqgAI0WNuHrFDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHw9VCRA9TVsSAnZWagAAFAAQAIa3R3nnL0EbfpuGlR2E\n1u5AGteyECoC9/GhGx4O6jnzwpYFh3sex3wwO1jCaNKykiPb7HnFknUWiuE6\nvzpQnV2DIsrX+Y09eJ3FXkVOYOWTlJMttCZlx9mmlv3FjB2tPoa8YFFsUSJz\nL9AXzuX9SCWZxUT4vxqVJuVNSxuC7W7OTZKmB56OrJZSNrzJw0nfa+PMhRr4\nsw50r1suJiy35uiL5sLsPV7iD8HU3s6JLycEzg0i7E4c45IefTc2shblVQ8x\n6mNO5v1ir2ho7xAjLp274ekBCLfhGbn58jo3g4YMkf6ee1XVzF/AF15aaZJy\nafyWWamEI34AY3KMbyMz3rnb3czMZ6u21d8+IYEXo18R+5Xg5644E+3UxzgQ\no8kHkf5lS6hxl9cSdLKSMNNAKyU/+TBrYHkJysYBUjikrPdmtNaaHHAmDXtG\n6L5hurRWLMD867rs5iCrAZBeFu9gCXX7YZ6GgUiQTzJF5YmmK1mz+fPJMixe\n4n2VbMxQpHXR6cf83KdWZdeZVSCFlNp9dsgegfaBEBCiImxfEjESfnCVTqNn\nB9IODsA8XQlb99vqbnfivcBAScOkOqV6sjT6p1YhEfYVGPnd7DihUAcNIcNt\nibvosejfTEoYTOo/FMBJ73sXqRK2UX+yGvPu3UdLBoIrQZP4WhXwZ1STsCvl\ngymj\r\n=4EO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"da8ef238928fdcad7ab307350ffff8448eec5b26","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.269_1629425493172_0.5241774926242428","host":"s3://npm-registry-packages"}},"2.1.6-unstable.272":{"name":"aws-amplify-vue","version":"2.1.6-unstable.272","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.272","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"4cf3a512ac939d0307ef83235aecb52afbc44874","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.272.tgz","fileCount":47,"integrity":"sha512-rHnPhgD6DvtJ6LhYYfHizj0wIj84z3fVKNQ1TnfPvObiSpvclppMrqoPlmBqMHLA5eVG3bhF78JS/b/6zgmSWg==","signatures":[{"sig":"MEUCIBKO1tlXjA5u82EDg5UTeQPHDrHIglY5dcB8c862LNL9AiEAzcJ+emRzUG41cNzWLzI8C1M41SyeCBsLHNQV6Jf9n7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJQd1CRA9TVsSAnZWagAANnEP/1VeEpGQNQSmnVcvMhuD\nqOXIYv4YHOoUAkzQPCzXayKvTA3nZ0K6bfn9oZjRsXIVqodIQADXQgPlwzIH\n4ok+Ao0AfIqofCTgBedFhZr43uQC91qzhS5pp7rx3t7Rbuga5w5LLRb+ONu5\nv0zUOsU/FJW2BFag9BnQhbvXI4kO3IiFhGzK/+IatxHHNgClfnVc2oPrtCjH\nczxTPJsZUMWysD9kcVCewOfcmt2JFVX7FxeMxDHE1rKDxFDrIshiNRXrHHKz\nnepJTz7SeQ+spQRiSRPl7XcydMz7+KVZnAeZGAcpi6+97MZxz5895zBDTomV\nYtHA7UYTeqPTUs2bU+2Y5QWiSizZkIIPmSxKWsutBMCSWIzp4rYYx2WfjukL\naHOKJEkyhkI3esHg20JJTGOgPJMNxKxDxouvJM/m6N+E4t1RP14oZR/MhquZ\nfBNA/1f9MSsMTPJAhuYI2Rv6rO57cbz9xPMA5B7vWLKV8eIehb5ZNS513DAx\nuegbUS3duFB8jHMvQzgijZDPrr/KvqaLKN+Mk4KlE0QpA7qtFojB66cMQBbR\nrx8+34nYZMb8uvwOnU+RAQQrlG0rKbHO9u6Lg14AAibSzMFk48/CzNbZRGzF\n5x2+UqpYr4xwBJtZ7m8dZX3GMVUIKjYaloNoobuTYWK3k1lCCxpabTCvXEUA\nrtTA\r\n=8muL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3075dc9af6ef0bb54080c52eabcd0cd1528536e1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.272_1629816693288_0.4173404943303902","host":"s3://npm-registry-packages"}},"2.1.6-unstable.273":{"name":"aws-amplify-vue","version":"2.1.6-unstable.273","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.273","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"b4a816edfec86c151606e341f69a7912d2e76c40","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.273.tgz","fileCount":47,"integrity":"sha512-3E7brqh6rH1wrspr55vs4I4Q0t22inJs2X3jsUDMsXVahig1SmA5/rd7ODVZP1S1NrmgHUY4qRChODXuFCIemg==","signatures":[{"sig":"MEUCIDX5zKb6c0sKuEjHKvlckWDvTgGUfJsBdYNX9Zn94pTQAiEA3kFmANJW9iFcksRUDLmzTeWspUtQXOHxtMVVBY6jSPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJSUTCRA9TVsSAnZWagAAAtIP/0tDM+zQomxubFPV3Chl\nybQ2+CQtAqkeRQ6hyRNxgGE0/zG5XKIh4bMTzrlX92dp1qx107JEL7eM3eei\nH2RTV3jf+FwcRTqQawJPJqBiyuwsdp1iyUCqdpdUi0P9FYuYYTYCuu07mLgb\nPICrlXX279+EjbbZ/q+zmZTfDPG+WOYtBAFx1mEkOkz8rNRwS37sYN5iJlyG\nGl6F7FPRP+nXKI4ZNyEuChNS6wapw8RJZIPyErC+2rxf9xgBJXqAjTPHyKZk\n89LKryAwEBgQrJ7UX4/kwNv6SuOVwuXKYyA2ZVkEcBSKX6VGehRQRkdM6OxU\nXy/6M8rqAWI/LNjeh4sY8AqmmgBO3gNEiTv0fWV7xDD6ikbY8Pupevelhw9R\nk011eedXP1NDs2G74yuTPH7Ppobd2KLv/XP4OvEM24Rmfj/iVeL3Sb7DPI61\nWcuCgNuYsPlYMbRDGWzJj/ahxRSvTKPD2tD5vWBAIFPs1J28edYjb/iYrYSc\nbCI6eAFR4Akufdv+k6xuASwm1mVSFQpMuBrStncKSZyfLellUefDEHq6Ytsm\ndC8evHZopeIppBsf0NqGxR7NQWLDMYcxtpe5dM+yleMUQT+Beq5XtP14nmCy\nD8ZkMCrc4qbqshYlrr11JK/JuoVf6BiEebA5v03wnL+ixXlWVC1qd8s5ytqE\n/5A5\r\n=XiMF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b278875491bf6959591d5aea6fbdddfc78f3fe9b","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.273_1629824275561_0.8093498134955928","host":"s3://npm-registry-packages"}},"2.1.6-unstable.274":{"name":"aws-amplify-vue","version":"2.1.6-unstable.274","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.274","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9be722794a3ae1ef29cff23656ffce3f3bf0c83e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.274.tgz","fileCount":47,"integrity":"sha512-CmHujNAG2xKUnfVb4czYWNuDIQ4J3/ZHEwylun/39fOQAVP4prP1Hw3ufjnmZX+SbAtaYhJfrxoiT8ZG9xrUYw==","signatures":[{"sig":"MEQCIEd4Ia16qfhFShj8Oj/UOfFZmcivcng3WORJ7S/teCbuAiB3+o3XXZgHeQJ9eOgRZYBKx4tAAS1tACemP/CdNMNHSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ+qbCRA9TVsSAnZWagAAxRsP/i5UjLSULj/1FthkcMJq\n+tHjLv8bY90GfSaCpIhkQ30v1szEoL0rQQU63uvYNls6nwymeVlTx5mirKEa\ncvPACXsbRBpxfphjhCRhbDjqFDaIJEJcvIpJSDLF7f9VI+6e8EZpmyvd2POP\nCSXqhz7qujYX1xFpGqORy5OqWrBpx15tcjl/VOyUE1Piea4U3fCOkmPjxEf8\nJsFMblyCJf7DOyWR1gxAEX9FqU7YO0NRkuBd6h23vfSz7Qa52qnZxvg+UhMn\nCKl3FHEfj/6u4P9crMYXQ1pp7+JzyntMYidqtns8U9bhlObTm56bUoTBs4E7\nnyqytlO1HtVg4srUlTFJHauzezj8UiuMZJsO0otzqWMhZ0utNTTG01YvoiUg\nnYrZ29tc6iSJu7Bfh3EkTGR818YH1Og4ZN24bL4bsZEPRwd1k11fVj+po+uu\nnzBBEZC5ZQK4ZcT8kANbrFG60BmvMXS4fcRnGOWk2yoOh65+MO7rM/9OJXXY\n/RQx+Klrc4NwGocGyZ56YE/m9X5RRG0FdmEGsXpvJDeAsKBstAu5EAo4l301\n+4RtzKMePm+iZE4jkIn5Mb5HzlQ+0C/xmqN7zoHkx33E7TV3zUMQapT9LxDq\naBEtf5Mz7XIeVysqjTtvxkhNFd80Mw/Rdy5VYhA8vobasAIeVZBG4nxelNaL\n/DXi\r\n=hZlq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f1dc4a24330bb41295621aaf47f6c4e26828fea5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.274_1630005915351_0.41372398495712526","host":"s3://npm-registry-packages"}},"2.1.6-unstable.279":{"name":"aws-amplify-vue","version":"2.1.6-unstable.279","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.279","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"4f1f23c126f06aff5e5a2c91cda85ec3a51871a3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.279.tgz","fileCount":47,"integrity":"sha512-LqAyJ9rWb5g+QnhoLPmSQ4N08z33Pe7CVD9ER4jqVRvkRqluT0EozRZEsO9HkZVcwxzb9QhtGeVOJT6TkxYFfg==","signatures":[{"sig":"MEUCIBwVYdZYDcmyS1pi6YCgQ8jH+O7zV749FZY8cZn/ucWsAiEA10tMiFff8tirWvh224sQ9GPrqnhYKmsmd24JT3mN5TE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLsGiCRA9TVsSAnZWagAAXS0P/Ahp6Xa3I4lLajkGL2K4\nhNT7EglHlColqfxWUroy4KiGnAKjpWIgp52R7VpHsU7VMpHbKfqBpJltDuO4\nCJp8MAwZrIDJKQ2eJteMuzTf1mu0LjMwe5HAPPu7m2hbCwJc9EaQky+dwxmw\nxRykuzJlTDoVUIlrEMfbHpkJ6LvGFTtM5cdJHjz5t6sKGRY4vUzCq3gd49S9\nMcfxYShY7N4DxyzGVVMKW13OYAWMx9hmO/CdHO7kbqu8Wp/m1A5zo/lQ6TmF\ncdVjJzyFN61NUHeX3rPY4QU+6C/u0OWwvn5T0IYsdB6/biNBHyR6zDt78MnL\nR0Uk7qo7idq7tRdiRSrs4wAn4qSTAP+qMxcN2L+BUzWHp8AtieKaN+0Q5f5I\nj4+WtQBrvzVYtaXpRIwHr+th1F9Sa654ry5akeaCT/ZHJXo+9Z0v1Ijvr0sx\nH/487eYSl+qbx7h3npc8A3QP7FzvAiPLKp/NJX68seqUZRX6fe0j3vB2fSdV\nJXK32ap1P/UebFawAc4MNT0kTrGc+lQ9xF4TFAJdksKRjlNDqkVrTGUZvXa0\ng16gZoOTDTVYt6JxP6yVGLUHyDFSwDfN2QhtsWfBqX29YLUq3vKE+hO4jcg0\nMI2CInXm7goUNBpyaMSaf85mtEhiaIrZUP06QNNU/UhnugkrNmObTXO+GzNo\nTIZR\r\n=WMjS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"48b76e10602b0b5cc9bc43b9b3abd653e27e1817","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.279_1630454178392_0.8698083754984616","host":"s3://npm-registry-packages"}},"2.1.6-unstable.280":{"name":"aws-amplify-vue","version":"2.1.6-unstable.280","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.280","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"cf0112377ac5d99997d4db1dab2c5a4efb76be19","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.280.tgz","fileCount":47,"integrity":"sha512-Y2RV9vTF6Mtv3spUJ0T+5kdQ6Z0qwoFZmcbfo8Szhxbosrj0Yo3mmo6XsmopNKrkV6lJxALNIv+/q/xloLHFgw==","signatures":[{"sig":"MEUCIQCLjmOhcB4PysoHlPFfj5s/cbCUZl31581KmcWxbtctMgIgcvzUmUVw9+dFa+rpkwEM2cV9EquLy+IYaIg2tgxWan0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMS2GCRA9TVsSAnZWagAAkl4P+wZY8VHb5qAdS67uAUsg\nC575TVEfrQVmlOzUpeSxoFJdz1vFdGeN5LiImHwWhPtfhusjPqTVUQn7FB94\ncwCYfyepVhD34Le3QKiU/i+FlT8kMEmMunkvOMRtGIat2BFqhxE/b8w0l055\nc3t1Aq6/8QMA4IAB93dao+YXm6SvdrU3sEeniUEVgMkgY3vVbKUVAaFnkLWe\nEtSCa1e113JL4aiy7BgwsDP6AeGJXT9fR100PFmtt+3vatLF5E5UCuI6MPeQ\n0B4abFILFVpnSROx7L2gMPPzYOV3BQDaLW+noJinhak04xPJOTtY4TezGPN6\nCJa40Gsj0/vSn5M5xqgG/HcHW6TcsAwZR+ivcdKhbFqhBMhXEGpuNZxKHw/x\nXLwMlL1JgzdBdRCmUJ8s9i5HIyj3UI9QM8n643YZtNtgdb2CJZUn/F10rlOm\nj2fklihfSmCfE/7/ViZzHwSdEYCJpPA6AijkGKv7XV6OQyC1fatePLhXP1jr\nq8PLhev1gT6eC/A/6aZ+p8qP0w5xkq/8J2M6ZsWKa0KbjdZt7dNDfLyGVNl/\nQQHDTDsOO8m9BYWc1z4gNDmXUXQk512+VZwQ8j+OZdkMVQRNv6fqdQLzfGrU\n/0VhKn2+GQGavnCpEekrMlnWFoEHBJYH/oMP0/azPRvZJVR7yYAIu76FY5rc\nRqQn\r\n=TVqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"46ee5dd91c61f49bad4da8286b2f97c737d96631","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.280_1630612870057_0.8244440690440242","host":"s3://npm-registry-packages"}},"2.1.6-unstable.281":{"name":"aws-amplify-vue","version":"2.1.6-unstable.281","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.281","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"709cbac792752863d8c104dcd1d1dd41445d0a11","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.281.tgz","fileCount":47,"integrity":"sha512-sALjLYL45uGN9TqBOmkeQsSFI6ZAo5p4CrkagwRajsQn7JdcAkHa5ekV1uigXlL5ZgiJBp0gEs83ihr9R1IHVw==","signatures":[{"sig":"MEQCIBP/8wgsi3ClLPgZqadxEyUJMA5CmAF/+4mjYNNLG6bzAiBHCoVoMQsmdTCxm3x/VATJrkV4AynE1MhdO8Y22Wj6Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMTYdCRA9TVsSAnZWagAAoY0P/1oQV6MtOm5Oku15xotK\n2weU4CJ7GKFPV5Ww2VDWiXvGAWI+S/zlu9rl9HP3OPguE/NIklIRQlIDgFIb\nNkM2AFJotqPPaYx+Z5qVkR0BSL8D8ORWxhePqWhFfZREnlmJky3VG60t6Qvw\nIkKBTBPFOsoKOhj6reY1bJ69dlIH2/gai7kvixNNJ1Nm5s+69Bq6EJIUNrPl\nT/e3S4Rikpsem0nET8VVaFBJptcbXmUVfJPmSlqcwmoRV/BPkTe6/xN+QKiC\nxkukJUco0gaMx3EIKj48v6XYz7adqCCylgwnB4gsqmVCGyFoC0jy+l9eeLfX\nTB2a+9q67jEjSe7YCBJYUHbgU+2Z9MR3A/cMb0RAiBSFEpgM6J+KInTOtyJ5\nK0sFwN0m88LAyvEFpVua7ngccT6h6asTAbCFgQY8VsiUQyc3TTN+YCc60smu\nYhuz2zi8fM7m92zpzKY8cGl6gb13YmazHtvGNZ1yQ4cTlmAAEhil8qyxGoGT\nd/FIuLh4NHxt/beUeGQ8Xm8T2B6QAnvZQf8p49xiajWeK99yKe+V90wz6Qdr\nmJpBlAOvFTZRJjg1OBgHb+mGdWETGYGHjXtjrtpHKp17dqf0487rsVCKMzyc\n5lR8IfhFKTDHTyYhrlbkerOUWM2iu8TBKqvU907Fk2r+YbMkSrilVV8Sv2hw\nrH3o\r\n=2m0N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6521a576572f21a91738e2bdc37ffb21350392d0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.281_1630615068880_0.562629514338562","host":"s3://npm-registry-packages"}},"2.1.6-unstable.285":{"name":"aws-amplify-vue","version":"2.1.6-unstable.285","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.285","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"7d7963708a9065461c310fc9f80836f4e7741291","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.285.tgz","fileCount":47,"integrity":"sha512-Wuo99Y4kbt8iyYQKPnd0xrJFSKUVOpudNwWZQGe9YW+i0ESIOBPVQiOrQuFX6GHik/ipIFuDJx1N3iVxlzer4g==","signatures":[{"sig":"MEYCIQDndpF4yd9jHQv0ssWJGhjxodp4kkM8z5D/Kdwo1kcHHwIhAJCK0lgEBBSOrO65aTAm6SosrlFt0LaYyDFzZtGE7JnS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhM8c2CRA9TVsSAnZWagAAt0wP/2vmcUkCLR0u1wxDyDOP\nBc15OxSUdKhY7hzsqRr0GvhPKfsLTBHIufTsiMJOHD59rkkcejsHfVS6+2gA\noGcLuBORgfNWrnx/Uv2VSKfmSK8630X5gKWww8mT8G1JBHrIAXu4KG5p1+zD\n4hJ/GxxJNCikrOemDRzai8PAyZLlUfBix3qHc+OpsHxBuNaLmCn81/dztm2q\nenJe63rruwpVgQhDtm2n7noNdc7IvHX5qE7pLAhFkHLP+g8ExGX/GAa6HZxp\nU3NkIxwepUCs0d36FZJy4uFu91nwD9Nz8v54oMPtSTRUUiKWpQoaFG6/M2qM\nayPIebwwMQyzuBLZF+2mp9LgPJpRHsmvoTWCwe/KUZi1kabt2ryO+S1NGuAx\nrSMxGWw//ZOy8PJSwi0GL28PUiuJo4Vq762DAd3+SS7jdKmLIZJbCg6yne4t\nX4i2qS8KqK18Y0+iWb/hstRXPTbQksjzzBN1w+pDNEbJVHZGH9WfzO1GqGkH\np+W9q2DwwwdvygL5xGWriEK4WT+V4Jy+hSo099Iw67J5aR09SD1he40rSdmZ\nkKdgyulQuaHih73r58QXQOartLEyyjBGHiXIsM5r44mGqhfn0vtQMd1J+Qlz\nHZq2SH0txAFqLQbsx4sZB2qtVCNar53oW2sQ/GUielF2rVyoGIt1dCJZlmL3\n0zR0\r\n=51aN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0febaac79af1b9fd0621dce1e63a139bebdb46f5","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.285_1630783286458_0.7345906539612612","host":"s3://npm-registry-packages"}},"2.1.6-unstable.289":{"name":"aws-amplify-vue","version":"2.1.6-unstable.289","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.289","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"b1b58e5894c63012205dfa253d3485323d5ee659","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.289.tgz","fileCount":47,"integrity":"sha512-HyzPRu4JuzShYgAjtK4c2hkzmOgpkmQnbZIRJAASnxnZVyOrxT0XNLmWS3GwgQiCOzoBrwktD8ixLUZc0EALUA==","signatures":[{"sig":"MEUCIG4KxOdCkK/nnLFrk6xErMoXCM9eQ4B8mMQY53ZUz87GAiEA2Ka8mKDEtYMcPoPNEjEISNJcGhmPxfjZrRJu0+aiz3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN7BgCRA9TVsSAnZWagAAbVIP/1rY5/nLh+ky+EvH8eqd\npvIyMSd92wrVG7aj606uQn9nAw95byxl9NqftQrQ4hp/VorWe7Um6oNHVTVn\nUud3XfW8y7f3vpsh7BJEYH+lg8r7t/duTMYeDV9azpTGIvme904jpAqk+/fO\nWbxiFHjur4cA0oYCnSnIgm85dvFnRsh3en5ZFxlXaMduCWNJg3ek+OgZ6hXF\nweVNatA3/QB0a9WJAkwsEKhvmkPbkwssameFpoUlLGLYyJb1/LZbu71+txSg\ndJbV5LBZ/zZVpr/782jBMGoLy+LJ+YtoRMnyJxl6k1KAslqmZg9pA9AMEjKk\nKpwhX1KvewelOdkugv8OuTmQyFkIryHlvtc254ePIIw414eMYgEUKfVSYrIL\nfF43zVtqt618bzEoXWQRz0qQ4buegAI1GH/rA/DwkzPXQrT5K7Saeulcs6nn\nL46W1TQ32h3q/A6maRliJAyHeFuJlbOfMSj9KmR9MObaGIJpRimIQ68rB0cu\nyoYwnVqycvA3FbU/0dv3VueUiFxretMa183a/UCulqIR4ooFlc3QNoDgwG53\nYiH1FU0IBPKgMsiD61W0OyUQMHoHk7kRnsIpn+u0eS7rvvKUtMM4pxFyZUZo\nILU86mKw19Bke3KZBsyrtLUMagj/jbfwxTYAVf4W6u8kFCYUHvgLf+0LaeDJ\njvDw\r\n=crEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"836c94aca1676fcd1684f9fcae9587a2da14945e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.289_1631039584266_0.7740533723956906","host":"s3://npm-registry-packages"}},"2.1.6-unstable.293":{"name":"aws-amplify-vue","version":"2.1.6-unstable.293","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.293","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"d364081b04163237f5309a3206199ae7a69cb40f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.293.tgz","fileCount":47,"integrity":"sha512-pVOWEp77pogc4duwljg02RH1Qy148SbRLGgD9UtmAoAPlnu5DHLUnPW8OXFjEQGS6xyeUaam7Y2ZqspudDahVg==","signatures":[{"sig":"MEYCIQCB73oKwm22m3OZ/ynvJ7Ws9mMvF21pt/tsQKnzja/8+QIhAI4dKmg6shomy04UA1Cl94r4nuu95pI9SgBuNzb/fATl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOStYCRA9TVsSAnZWagAAdnYP/i67g1iotsQtbFz38XrK\n2r8q+P3UGwlCeVvHpfLFcSiAhfpd63sr2l1ZRzxLxdnsY+iPCeZd1vgXybL3\nyU8/2Bn+RK+7JmqTyAyE0a3Y+b3sDX3J63MfP2JRLVfBcbcWFj1tDkt47nLa\nZIedKLNZC5WYoLJ9I1EakDgkniAfBdA8I4Ldo1ZMsGu4g99ABtaV8fB0Ov3I\neof04omEuaIuogKZ417Q4JT9BHMGGVexad7Nkwr/rcQBqxq0RQveZT7NuxPR\n57SdRSU0YlLyIDXYMdZBTvr0c1rrDZP4LdY+KU0b5SDSuEjB8uHuIFzOFmlM\nfPw/vyEOLLQHuX9kdS8uYL3FfUyOzU4epomy7BS57ZQh1DGlAtRbIiUzRyIf\nVSCm53QbAH9w0gbIxTItjidKTp/B6b9gJfLV/Hi9naqc9DZ4JhS6ezdmfV/+\nWO2IUkMGc99BmuiRpSlwtyJyLtVxlcB4FwipiWtocChG4WqLizPqx3tmiSnl\nP6IpfQOZTKdbz4cZMIGiTgB62M6TBeqEvI6FfgkazRleaEMmjNjpn7zMYtX2\nmKg7vwW8q8eBJcEQ1d/q7VeqKqTnDF8o6mn1YLZYiNOTLoHD+VHaQykQvblZ\nJQ0fUcAQomIHUobt9K+zCkcVpTbFADKR2cjLcenih7sPMaNbrL6jloYxk9da\nrDoo\r\n=hUjP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"82544a6c8e0c0ae30f988b066e7e250f49862f64","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.293_1631136600021_0.7725477202906061","host":"s3://npm-registry-packages"}},"2.1.6-geo.259":{"name":"aws-amplify-vue","version":"2.1.6-geo.259","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.259","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"ab7b71f3200bbfde3aa215520f265cf1ef3cd5d8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.259.tgz","fileCount":47,"integrity":"sha512-EadbI9bBeAcduJS9XGw8v3ndsiaYA6tEBARXNFUU8K8uFG0D4zn7c2Q78afiyysim1JIMgrgc1LBlgBWRAZwig==","signatures":[{"sig":"MEUCIQCljDWqj0AYKvJKV1ahXqaRYBVer1WWS2g/Ce6cADtrVAIgYhmlY5ENhmK0GHBuNzHqrWGDQSv5np5XOJBBDDJGTjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQRP+CRA9TVsSAnZWagAA/iEP/in4GhKAEhp3vs7caEQ3\ndWD3l9wIR8Z15df35z7YqKf5rZ7bmqV8bhxHWxfSJ8Ko6hzs7K/vtzEwGw62\niLrU7a6cWcaS+h6rK/rdbQhSfIW6Uo9vZkJ5ARGNIkAsnfNC8oTUGgMOlSNY\nd/TRkXo6of2phHrIZ6BbZYiyzv2flz94GMEGxH9bJ6DqIcbS93Wkf/ZPiOzD\nsc8bwB/ZkCn2oefSC1wdjZ4hfxWjEU/f8KQy9x7k835JCFzjleazWKHBVt8Q\n2XTvqCJp0pxYm7QUMiEjhRgce8vuykrCRKAvdjBu21YFBaKaTymfkTe7gplx\nhfLohnlrxjlQp/3eBCYehbzgqvlZyc8Jv+QVnLGNXfN6qRixrYPVE9IPRNdX\nsryqxVSggvnsdOQkj5hrH0Qo4uSdbbzA1AD80S2+xOqSZozAj5QoDy3RvzY1\ngapTqQWNnJ7ksg6OeV7157ujTW9dwrjX9dNp2cOzgBPUAgV+MJsW3pH5lLJy\nku8YvP1+YGU6lMDQ2RF4icv1/DtkNbBIFcHf4Ms8iKGgW5I+Lc0VbS8PLCFF\n2d5/M89xBqTFHtqoxJAJO5ckdFQVcIoegVA1xDw/qV87dkcSY2laJqP5v63g\nBTDpiGw9gNbEN+eAXRQbl7jvQZz5gJkkKHZJhhHSDV9j76umL8fKeMZsosLZ\nrnTK\r\n=8oQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c4fe1c46f21267f8d219d1c17fd7f75fca0221f3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.259_1631654910732_0.6893038849426425","host":"s3://npm-registry-packages"}},"2.1.6-unstable.297":{"name":"aws-amplify-vue","version":"2.1.6-unstable.297","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.297","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"f6945876df0d00da2dde4a2966b482bb8b2aee3b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.297.tgz","fileCount":47,"integrity":"sha512-93WyWlVjY8CBDRI1umR3zqDy/si25PaMcni8vfiUXm06E6nLSBR0Wq83zAY+INEgkhtK4DtBd0srtRaSY0Caqw==","signatures":[{"sig":"MEUCIAvCrwryupBNy2sjLf96UvwS9Isg1kllinRYpZUf6k2mAiEA5q3bTYgxsTf3OY9G5YXt9+0w2POJvSgHBRKrYd+jJlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f405f0ec6f0766bf66bc77d1450579c61f587979","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.297_1631909552926_0.20093389955417607","host":"s3://npm-registry-packages"}},"2.1.6-unstable.301":{"name":"aws-amplify-vue","version":"2.1.6-unstable.301","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.301","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"d3607c11151751833f0336f42164367f20408239","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.301.tgz","fileCount":47,"integrity":"sha512-iUvIggb/mPRUCLf/vD85MqCl0Xk3xa54VlTs4VHKykOfg4Dyh8OtWqrnaoCZttDR0C6KnY87LWTUgq9/f9REqA==","signatures":[{"sig":"MEUCIQCJI6w8eajQ6V2XZKNFlwAuj4w+0088uEV4aYni2eOixwIgHzDYuF1hBy61j1QkCkjiscWX4hkKxqYX4Qcltu6TTVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d4e343fbf1b39bafc59ef3dd94d3ef7322322fc2","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.301_1632162177023_0.23212686267255678","host":"s3://npm-registry-packages"}},"2.1.6-unstable.302":{"name":"aws-amplify-vue","version":"2.1.6-unstable.302","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.302","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"f283c0642c695684216b9f49fb1ab5f9cadcf22d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.302.tgz","fileCount":47,"integrity":"sha512-XqyXHMyLo06mzroMU3zmg0fHmoJ2fZMv/Xo4w87mi79hCnW5hyR2g1fUHZuOgY7CZYMbGwOSiccgBPlnajS10g==","signatures":[{"sig":"MEUCIHU8MBB4Vjpsel4IF2vDHzg7MWCirAvkFaGvqfKEpB3iAiEAhZZTwzswg/OO1lbHdB0kiobtqWNB1lZiWVIdEGPZCHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"0918a0741d1e90bc67cbfb10f3eb6ce719fee58e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.302_1632246365151_0.48098956215388866","host":"s3://npm-registry-packages"}},"2.1.6-unstable.303":{"name":"aws-amplify-vue","version":"2.1.6-unstable.303","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.303","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"289f1b601b004a23991491520fdc5695114e9ef3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.303.tgz","fileCount":47,"integrity":"sha512-OsWYVYsvXMCobUZ6sflt+MMsJ9nMSDlodI+ZoELW8FYKeIKlt07+QAlo+2AiryjgiGDr1BmIFlK6JadOOzj0LA==","signatures":[{"sig":"MEUCIAOBrjxHsEnKUre4fvlI3NkWsr5gNmWCH3zq5ro9lKJgAiEAogttat4QB0D9OU7GjYowt91MKVFuMy++cPLoTtIXcw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1c3b281d564db8745d3085489643bb33ac067177","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.303_1632275875197_0.795809019792943","host":"s3://npm-registry-packages"}},"2.1.6-geo.261":{"name":"aws-amplify-vue","version":"2.1.6-geo.261","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.261","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c8612c3d95b3c020a9b5e5c41063ee11fbaf284f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.261.tgz","fileCount":47,"integrity":"sha512-dvpEqqlmBq7279n0TbAqQtHtzzqBWRQ4PXUzkF6pNxza7ZHrhBo1b4ordsLA5WMn+QFjXynyGxxcAZqE882Ycg==","signatures":[{"sig":"MEUCIHtc0fHkW5hFc9nBCDKf2xLTWdOOvoC6kSxToArEHfV5AiEAr8QyASJpR/XQJFUi6H3K2jnHBuohXvg9mGrIHcZGFXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"991c6fe85f0c19e681ff08ee8ed6c0c726265522","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.261_1632278450373_0.5633362611770691","host":"s3://npm-registry-packages"}},"2.1.6-unstable.304":{"name":"aws-amplify-vue","version":"2.1.6-unstable.304","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.304","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c46d21e3ce6dfb8daab22b5c6b6a5069e3d314db","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.304.tgz","fileCount":47,"integrity":"sha512-LV3YkZmW4W4F8zW3ZeAOSlNCSGzv+CUWBOj3lNw4QZj5+rBH8ieFN0pUKQtXkrao6qS0QMMqh6KHGHuco+Q0TQ==","signatures":[{"sig":"MEYCIQD3D/GXNyP0jCCHXvv/sj+lK5yyWwGsEdwNtgeL6U5UewIhAMwv4m8sKLKMQzE08S5qdFuESBZTKJ4vZU+WhMYg+8T5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"41664c36d7cd7249ddcdf421490d6501c4248f3c","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.304_1632334798747_0.09193740602799894","host":"s3://npm-registry-packages"}},"2.1.6-geo.263":{"name":"aws-amplify-vue","version":"2.1.6-geo.263","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.263","maintainers":[{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"f761c07d759971dcc1232e154c2b3141647b9e4c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.263.tgz","fileCount":47,"integrity":"sha512-p9seDjjn2aXljf6O3GPtmtWaFDLu037BS5u5gGOfNxS96ltciNh/fAikIUt2I28nXxONfs/iXAqVB2yrC9lw6Q==","signatures":[{"sig":"MEYCIQC0inFf4+vdpLphVtV0JN5CKwwdqeev+AP+uDFeg8GY7gIhAPVrox3kmY7t8V3mN7CoQ1oeP10v4D3R7bk2TgNgvIV/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e2bb669dcbd25dc73d453207e5d8e114e7709531","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.263_1632358069657_0.6669689683649289","host":"s3://npm-registry-packages"}},"2.1.6-unstable.308":{"name":"aws-amplify-vue","version":"2.1.6-unstable.308","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.308","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"bf1b17e1f495da510cd166fe2b4d1576bcf03bb3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.308.tgz","fileCount":47,"integrity":"sha512-xW01B2Ch5rzKALbmKc4GTaaVgIE6i0gmiic7sUB40lQ0tG/PFuPb3bH3+Qr7ALrBeMr6zfFK07B+OAYaNQNPIQ==","signatures":[{"sig":"MEQCIDLPFHT75gBU2VEsQUnNKqMTsfbazAun3OYMU5mDqCkSAiAY6cc+ITNft7rzC3x5mUdyga7DhM50laeJ5YvyQqGVcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e8c905b46c325ff6e50d69e10f3491409ca9e921","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.308_1632409453332_0.0035666033470422853","host":"s3://npm-registry-packages"}},"2.1.6-geo.264":{"name":"aws-amplify-vue","version":"2.1.6-geo.264","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-geo.264","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"50ada23a22bb208675e61817818c62bb96ddeb55","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-geo.264.tgz","fileCount":47,"integrity":"sha512-F5eW/z03ovn/r/3mJ3hQD0CDDgkKprXiw/JbpcyJDv2pB/qwETjlVh4+Ow1LxUDOUny1Rw9RzY1DgndUS2JQhQ==","signatures":[{"sig":"MEUCIE58GZ77CPActiwhtg42QcO5PhSP+ZMtxQyw6HFkI3fwAiEA4REdWrZAaxxdTRqnOm4pnojQgZVTNh51rAMH1NxQWuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957584},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"c24cc359160c4fd89fd56fa40d5ba674f037149d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-geo.264_1632426024144_0.36180330199774735","host":"s3://npm-registry-packages"}},"2.1.6-unstable.327":{"name":"aws-amplify-vue","version":"2.1.6-unstable.327","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.327","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"d64a235c037d11f9d4f192ace14fb304d7517951","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.327.tgz","fileCount":47,"integrity":"sha512-HLJk3OCh9Li4BaP+UGOHc8dYI/dj57l2NBMkVXPKETBRstV0rZAMoLwn+SRQFdsYTYYLPxXpNMhR5ckGahsI8w==","signatures":[{"sig":"MEYCIQDnIm4Cc8McJn2IrMCDBsqLLHhfDzRqq1DUMpYSHnZV2AIhANpTvMBH5h1eu+T8014q3S1dp9HBbjBcKcAi6CeobJ3z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"86aa92bd753d136e3592cb544ef1fb219f8a7921","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.327_1632439236835_0.7977538983371395","host":"s3://npm-registry-packages"}},"2.1.6-unstable.331":{"name":"aws-amplify-vue","version":"2.1.6-unstable.331","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.331","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9143de8f1c3d0b77dae733b96d6a4d1aec4717e0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.331.tgz","fileCount":47,"integrity":"sha512-In4JY6EPfzy5oQX8CZ5/GtHJYr7KtXYIfITPU6/nplR3cGq2GfHsdFu3WJZJx4SBHRfIFs6LPq6QhcpTB99iig==","signatures":[{"sig":"MEUCIQCbKjWdxbXIbV76UNyrpDPly9yq/bEyVZMCur4L1BLvUgIgZ+VPHMruuZZsxarKA2qcPoryw02fL3F1zFyOMytaYqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"77f9d2e4d91351ea2146b95068f8d7941622e846","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.331_1632839062733_0.36118908658687077","host":"s3://npm-registry-packages"}},"2.1.6-unstable.332":{"name":"aws-amplify-vue","version":"2.1.6-unstable.332","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.332","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"07f01b2c278d2db60e0e578fe7b8c70250889d0b","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.332.tgz","fileCount":47,"integrity":"sha512-zXs3i7P8Pz1AOL85zM0N1TTIcrGkH7nCfKTLyhacBEsb5ZzNaPYX2wuK4yB/4jf05dk5O4lT0Wi7w5fs7Yqydg==","signatures":[{"sig":"MEQCIBuHBB9rG6xiRBczef9CamISrqYinrIMB4Md8anV7oJpAiBvps/u0Zq2TXKcqUlvMtPwJ11C/0HdU7jGiaGKdcrPVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"806d266ddba00f5ab42f8c6c83c7b8c94aad49aa","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.332_1632869959589_0.4741303506421026","host":"s3://npm-registry-packages"}},"2.1.6-unstable.333":{"name":"aws-amplify-vue","version":"2.1.6-unstable.333","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.333","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"5d116ea15ac9898e199c2a794d050fe130e5983a","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.333.tgz","fileCount":47,"integrity":"sha512-kn51+G++XsJ73Bfz6v50fkmlorAj9AlYW0R8myDoOTEMbWZ7hzhk466R6T7sjwTnZt1mZcm6d8za0cJY4nMzFw==","signatures":[{"sig":"MEYCIQDm7cIDfPTaYx+Ookrmg5Z97LGaRxi4IGbEdoKOj2xXyQIhAP4c0R61ttkXA3dEyOwdtWp1qksaijYONdkyBITgM1N9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f21c2d146fcabacf0584918b286ec68a644bec20","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.333_1632957123896_0.6691411818855837","host":"s3://npm-registry-packages"}},"2.1.6-unstable.338":{"name":"aws-amplify-vue","version":"2.1.6-unstable.338","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.338","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"cd61c435d1d241a85bd1fc1204fb7bf7db8d1e51","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.338.tgz","fileCount":47,"integrity":"sha512-FkYZxU2YWpM95XIrAw/ugefF/H38DWcyi2kwaynZqgkFH1LHNlplYYdHH5xxi0vEOhtyFwmPOAtGl+pUGnVyJg==","signatures":[{"sig":"MEQCICPUsnQmvHlhVl4BhF5YFw2yWjodO3HgVwwd172gzGyQAiAiTbtoovud6tONi/JoaQwfk3WFm2gMxmJ8XdQS+yeRqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d578e7debf5bb4dc97ab6711e22300d7e5d38a33","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.338_1633125379427_0.15400176168445934","host":"s3://npm-registry-packages"}},"2.1.6-unstable.339":{"name":"aws-amplify-vue","version":"2.1.6-unstable.339","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.339","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"3d37920cc455f348b15776bff1b0ecf0614c495d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.339.tgz","fileCount":47,"integrity":"sha512-fAmYCst9XrThRw/l+7OHgIc0ZW/0HkbbawRstK/5xx9w1+/nmeMzcL86K13gVdyK7Htvmkns5BSvC5Y1gJh9gA==","signatures":[{"sig":"MEUCIQD0GDnlE3XtdSp5WYCUPDuatk8btrbsgEI/56kNqxFW9gIgHm0iNCJgJd7yS05jJXpV7WG9nO7zWHpcScVJ8OH9rIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bd528c7c2d65a7476bd8601d7f3f135d1a24fd53","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.339_1633447653427_0.12276398795021315","host":"s3://npm-registry-packages"}},"2.1.6-unstable.340":{"name":"aws-amplify-vue","version":"2.1.6-unstable.340","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.340","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"a84d65fbe63c7087f4bc7752713a3ba5b35d41e8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.340.tgz","fileCount":47,"integrity":"sha512-rbuNG2ZHx3dRUPZ87qOIPoaJhJp/OeKXbzd3tspTTCAuW1FvDx0yXIfL3tV1+liQTjeL9golX/fgXElPMEQ8Gw==","signatures":[{"sig":"MEUCIQCGGcAxB2G4cyeS3JAgetpLF6zo9TDPfxm3d//iBeKnBAIgPtOWVP7rrZFS/aP3MztkRUZypBsDNYToDoqiYkvj5+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f8b10613819fe125e906a4eced1143b14f86d080","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.340_1633521933476_0.3379326834828926","host":"s3://npm-registry-packages"}},"2.1.6-unstable.341":{"name":"aws-amplify-vue","version":"2.1.6-unstable.341","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.341","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c2e524a127378b37ae1de6dfda54bc833f0986ca","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.341.tgz","fileCount":47,"integrity":"sha512-BPsA+n0ZV6BS2Q/THYdroSr5bCYs29sou88ta9l0EIbMV6hvroR/iDVFdVe4LXQRSitedKGltk1eUMg7im1v7Q==","signatures":[{"sig":"MEYCIQCHZ6Z68SmJtNDCvYmGic76A02QzjkYa9ig8H7TuKbLnAIhAJkidZlqdIuwG3BMjVtZut0F7DwIfNdcdX0sY8m/5R1V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3402060a040c89ef90199f61d1eae77b0a2830c1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.341_1633540360934_0.35891650692209054","host":"s3://npm-registry-packages"}},"2.1.6-unstable.343":{"name":"aws-amplify-vue","version":"2.1.6-unstable.343","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.343","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"aeef61e75b2c2e4856f1157035ab5e28152ddae8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.343.tgz","fileCount":47,"integrity":"sha512-K2JlwncZtpcajw1pUm9ysCA/ocrOOh0T6di0ANNARd4c8b+1qDVFNJ4xNiIVlKv3scbiTTQros1gbLH5BE06jw==","signatures":[{"sig":"MEYCIQDPtnuC4WlSnM8hB9gofQaZOlmsomDrb724VgcCsa7ReAIhAJpQsDX+UDJk/Geg0m953i/rhyIo9NCTzJogNJ0f50ja","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"90ca3addd53f07dce87b5feca846819caffe5046","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.343_1633611750260_0.9085042839170612","host":"s3://npm-registry-packages"}},"2.1.6-unstable.344":{"name":"aws-amplify-vue","version":"2.1.6-unstable.344","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.344","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"e2d7b4ac802445b703422adcdb2282ed3f23d9a5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.344.tgz","fileCount":47,"integrity":"sha512-W/ohL8719oHoA8w9s2Lgauu3rBQmmGN21cG+Xnn0E6hl9Hw5h2etkipw4Np5bRAqyQ9KjxYEInbXZHFlDwkWvQ==","signatures":[{"sig":"MEQCIE2MSEKjoTVVql9xdy1/Xp/Sz6Bz+Tm5rZvXXWhS/kJ+AiAAh/6MvJs5glVeKDV9fnZ+1Kjin9eDPVCohDN+LesETw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"1913beeecd1aa409fe1c028729e7cfc92445c1bb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.344_1633642622318_0.605666545362376","host":"s3://npm-registry-packages"}},"2.1.6-unstable.350":{"name":"aws-amplify-vue","version":"2.1.6-unstable.350","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.350","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"4c53a75c819a5cde2d8c09865369ee92111925fe","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.350.tgz","fileCount":47,"integrity":"sha512-siZDoyQuQi1Kd+zYEhcgVfqXSngFVSWew61V61Z9z5Cmuqj37g9e54h1pg7MF5C3UYuXpF1D9BhZAd7TCnu4dQ==","signatures":[{"sig":"MEQCIB/lQ2kKYW3P3LJwExO+23OBbK1AloWriu9ZFBhMSpELAiB8s52lVXXDqGwEFk9ZoX/1S27dOQjmEkmF41MylfOr/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"63ab545ee27dd4b86b6fc0e1fc004a368d653139","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.350_1634332644871_0.39137600839036923","host":"s3://npm-registry-packages"}},"2.1.6-unstable.351":{"name":"aws-amplify-vue","version":"2.1.6-unstable.351","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.351","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"8c29a7a7f57156972ea95adb33a15859b4eb0f58","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.351.tgz","fileCount":47,"integrity":"sha512-ggPYHROWyVxUfYTmKO/58Xc/0I0tfBn6oukHv51MeyOx+iWw3V4L7BZq8PLm8/GUHiD1zbHhmoDr+glR17pFXA==","signatures":[{"sig":"MEQCIDtxq+OlsMNwt3IbkYnPQcRATLVQ2oKj5idOKqmc2O2wAiB4wBOjn9n9GnxFj7HDOlNZNkXUtai6IEuEXGI/FlOk2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"edfff507a3b6f4f8dda850a0919190f3e7ac5524","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.351_1634336889257_0.8643690540834155","host":"s3://npm-registry-packages"}},"2.1.6-unstable.353":{"name":"aws-amplify-vue","version":"2.1.6-unstable.353","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.353","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"0e5cf47d71876e96ab7e456fc3ad7dcc9b19ad02","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.353.tgz","fileCount":47,"integrity":"sha512-a4AcIQ0pYmD+LkcRmb6PN6CpmhM5/1zH7IVlLug+1KT8MV2rr6mW0I51BG6BU7FWcEsV+VtSEKxup1SSwj5vHA==","signatures":[{"sig":"MEQCIBRC4re+B6KiouKt22o3uiayIY7XynbShC75U8B7OaIeAiBnCYOcZHtmVh6F13S6vtSZjpVeRKFagCZdc6LVjhK7VA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"e1c20b1034f964688939959666646be4e0b011ac","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.353_1634754523233_0.05615879503390642","host":"s3://npm-registry-packages"}},"2.1.6-unstable.356":{"name":"aws-amplify-vue","version":"2.1.6-unstable.356","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.356","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9ad86ff2fb0b4ec45a861a1b5ba47e579d481fb9","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.356.tgz","fileCount":47,"integrity":"sha512-+4SFQ0rR+LumIM0ot3EfDhnB+SibDQUBn5Ni8No7kQQTDjgoE5xvF6m8O1xkI6O3G+Ct+TBNTPBF4BRdmxqgWg==","signatures":[{"sig":"MEUCIQD4SliQ+JVhbQlbaBdK2PfD+xGAbs7eb5Mkr2oKxpxpaQIgT6UMKM4cO48zHiAnW2CuMJVk+1AcDcoKUJrDcboDvHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"91590e353af09667ccbd4c4fb6860322a095ef23","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.356_1634829425192_0.5807493027559103","host":"s3://npm-registry-packages"}},"2.1.6-unstable.357":{"name":"aws-amplify-vue","version":"2.1.6-unstable.357","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.357","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"75083eb0b47526e81430ce8e426fa5edfa7a33e2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.357.tgz","fileCount":47,"integrity":"sha512-9O2EtnuDG1lLS/l67JWt//7FCfigAfl14kZK6cYWpTJHwnLQa3NJmDiNZxvyePVsqrTpeomBnd/Fjhb5V6y9WQ==","signatures":[{"sig":"MEQCIDu05zS4GZzDVSMv5BL5X+C4KTQz0IN1lVLhxPmssudLAiAjYt5kWlhpoPvH/ylDyU7Ee/E3QuLr3bVNo9AkVhcenQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"f8faa1c86f0707b4ac3b8a3fada15d078712cabb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.357_1634832146906_0.12000143529100527","host":"s3://npm-registry-packages"}},"2.1.6-unstable.358":{"name":"aws-amplify-vue","version":"2.1.6-unstable.358","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.358","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"aac9be7db77abd7adb0778508cb854fab898e3f6","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.358.tgz","fileCount":47,"integrity":"sha512-Kzon7Gh2Zz4ukr70Or9m/NvM6xwlnz1aLhv67jWdvF5C18szkZOOP0gHaFbLq8fEeo3355YFJlbllBtKVuvfBg==","signatures":[{"sig":"MEUCIQCiRZUFeIT4mSO+AcblW4C4m5QQ+6OH5tiuMzsdu+xwdQIgCkXpQPihm1mL57gDZqjuPcOK1jK5VOVuCtL61f043eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"70eaabdd45b77261f94f76cbca047ebb86da9180","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.358_1634837138256_0.9101580652763213","host":"s3://npm-registry-packages"}},"2.1.6-unstable.364":{"name":"aws-amplify-vue","version":"2.1.6-unstable.364","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.364","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"a4aae5317e588451736c729a016d34440c4fcb59","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.364.tgz","fileCount":47,"integrity":"sha512-3Tz5ZYxL/Jz78FL4xTSYkSA0HxCdx09xYfGMb+ylgbpZGwUvZbmqimeTis7ddtYvFIqg4tAc5+qoZqY1zftOJw==","signatures":[{"sig":"MEUCIQDiFGTpUSNUjNPAl2am4Oy627Hw1cVstuVYVdWEHvGWwgIgZ8V8ae2avxwf3VitaO5xyHki6t49lvaFzCc/uUxtI4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8c34ddb622912172a635d21ed0fb64081bd5828e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.364_1634849111437_0.1794761146667203","host":"s3://npm-registry-packages"}},"2.1.6-unstable.365":{"name":"aws-amplify-vue","version":"2.1.6-unstable.365","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.365","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c72ae1ffe63615e92252798b40352f4e8b617f14","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.365.tgz","fileCount":47,"integrity":"sha512-wGvl3Xzu9o7oOLorkD+F62PspRbWKLblar9d820OavsvdMprFPc4kV0l0/qJDFx2SkODnxldxHWINaNLjsSE7A==","signatures":[{"sig":"MEYCIQDu6TtErxMdGdakZzpzQxlgyyd703GHYougRFmanQArPwIhAPQMex+84M11L01OhcVu/CQnbVb/RPu2qAZu2pyq3M+7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d7b4f49359e4b3964456cdd746f5b4512b35948f","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.365_1634853843690_0.6620515324162226","host":"s3://npm-registry-packages"}},"2.1.6-unstable.366":{"name":"aws-amplify-vue","version":"2.1.6-unstable.366","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.366","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"4eadce71530e149b7463cd9b13205c45e6fade58","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.366.tgz","fileCount":47,"integrity":"sha512-crPhc4GY/VVePsTqpukjBduApjozv0oEo9NiAdnjkGoOxcdnOnB00uGKHD1sWytxWYXUHpO8kV5C652GmbsQnA==","signatures":[{"sig":"MEQCIFlxdaJJCMNPrNcGkVFdWnAxkOi1phDWhv2Ijs8ywz5EAiBzHIVAtVMTN7LPRaRFVwIbgZ0gyKw3C2cGn/lx0sdPVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"7cfe5817be664bf09a8766d579970e3f7fe8ef6e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.366_1635186616314_0.643674255256196","host":"s3://npm-registry-packages"}},"2.1.6-unstable.368":{"name":"aws-amplify-vue","version":"2.1.6-unstable.368","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.368","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"bd5b0c18d6da1afeab84e841c52e92075d62c30f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.368.tgz","fileCount":47,"integrity":"sha512-gwPvnpiGjlvsoJ4djf32equJ4P74S4cYi4pcZqrp8080cpwTlQ+xeRIrbxKPk49fJAEXvd9ALYfCQOQ8pjjf8A==","signatures":[{"sig":"MEUCIQCGOR7atSIeLZxQ60YvZFAHOm+w2tg0tpbV3LO4i4yTSQIgG/Z+9jQk0OHbpdpMROl+KyOMCUPnBe3V455slhBImOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3f8c0008ea46fb144e5a312a9d09c88bc65b592e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.368_1635227233809_0.755210752036086","host":"s3://npm-registry-packages"}},"2.1.6-unstable.369":{"name":"aws-amplify-vue","version":"2.1.6-unstable.369","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.369","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"7ff66bfe9f8b905b1efe234827490f99d896c774","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.369.tgz","fileCount":47,"integrity":"sha512-f4TUkCd+c1pZx51SjhS7kxB7ytxBO9ZLOr0WXdlGJPckwoSIS+pc3yaMdOiHHM+CNczTzlspH6+WHQrV7OlhpQ==","signatures":[{"sig":"MEUCIQCptK3g06/5zw2PUzs+n+ym59SFoYhHoVU5xlyVgHfk4wIgQoz+jlYRCIdWmkRlAk/WYHRcdPeYB9HViYjequptH7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"5d5083c798e2499405973f04986c5d7c5107b41a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.369_1635289350534_0.5406257797897893","host":"s3://npm-registry-packages"}},"2.1.6-unstable.370":{"name":"aws-amplify-vue","version":"2.1.6-unstable.370","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.370","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"f58e86f6e67f3549334a392e39a163d6ccf96c6d","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.370.tgz","fileCount":47,"integrity":"sha512-X1lf/ZUKTVRg6qeUcLtkyhK+/UW3BDOZmARFT/nKpOOLs4J//cu2DKFPc/CBATEngIESiGypCrQR+MGSKFHseg==","signatures":[{"sig":"MEQCICLNdzg5aonQNa6uo54R9dPiJs7b/h8udP7bUYJC+AA8AiAVq14hu7ZjYsMDjSnTRKUJLc0WVA9A7aLKbEapReE4dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2b800f51e41f6cf951162ef392e45af35c354f40","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.370_1635352870253_0.06019366884520738","host":"s3://npm-registry-packages"}},"2.1.6-unstable.371":{"name":"aws-amplify-vue","version":"2.1.6-unstable.371","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.371","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"820e511f8a85361dd6b9d372bd6df7e8af841a22","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.371.tgz","fileCount":47,"integrity":"sha512-yMpHD61q29Rz1XY6PCJyRokQsQAxM1jDZ3n/PPOWBKTsEfgE9gbTFDGHzXe/UAvrdpH9zAJ30R3LdakhGAfIsA==","signatures":[{"sig":"MEQCIETjx0ifgZJHwx1CNpnDOrG4tnnu1fXbkF+6PpBVya+xAiAjJYy6MFmILx2Q7Uz0X7pJ1SwoIG0mpxbQnYMQGkd/5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"55a78d6471306143eebbd855c246af225e8d90d8","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.371_1635452784778_0.0047124410105927605","host":"s3://npm-registry-packages"}},"2.1.6-unstable.375":{"name":"aws-amplify-vue","version":"2.1.6-unstable.375","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.375","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c3de11693bb4614abd2b89f2d250b4d2611350f0","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.375.tgz","fileCount":47,"integrity":"sha512-DJFkx3iEShJDLsDHiu712hDL3TqSIBd5VNSETSqnstQII0IWz960N7NBrm/OJmHrBc04PawnLqfsg4e19P1pWg==","signatures":[{"sig":"MEUCIEiwaFLM7FoCzQOz4A1Thw2jqr2u4xK2MhUEHKYlmQhwAiEAu1APIsru+uCqXjiF9n45NCNnSuW6Dzq1PE61RlFP3Us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"853adc7554f0a61922e3348d3626c73a5166266d","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.375_1635877469033_0.07918946122857773","host":"s3://npm-registry-packages"}},"2.1.6-unstable.376":{"name":"aws-amplify-vue","version":"2.1.6-unstable.376","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.376","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c549bdd896296c12fe02bca7a536f409c5c75d86","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.376.tgz","fileCount":47,"integrity":"sha512-xBB4W1X9ebdD6EU2d/ztCKYlY/1QgJEIw5QIj94CHCzkaB8DVdhIjuQc4BHXgtcLlYAMqEZtUA8wvODnfDdxvw==","signatures":[{"sig":"MEUCIQCbBZ6EiELXAaj9bNbiszYkDA8aQw4x7C3wUaHgtnv9+AIgTz3aT9CRR7P1JR9MpumQDzeZzLrTSyCvtwNdik3AtjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ec6ee1c066a283e4e34a287db5712f2bb944e6ba","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.376_1635952388493_0.4965455944621162","host":"s3://npm-registry-packages"}},"2.1.6-unstable.378":{"name":"aws-amplify-vue","version":"2.1.6-unstable.378","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.378","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"4b8d77559dce6f7025e1fad5de9c2c975cfc114e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.378.tgz","fileCount":47,"integrity":"sha512-6u0HX4pWHeHPz8BLawZP43CMvGmKAujgtwBLIxS8sSh/XyC9wMR/URH3S4w/ILtrSpqMRwF9UA/gCMvr0D8Byw==","signatures":[{"sig":"MEUCIDx9I2IMZyKrjZPQTy/ktAtIKRRn+kwOXhM4bzqQaYxaAiEAzybTHrl9mYsI+Kq1fKar3xeeO1tRrt7P3tEfeCskUO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"4ef8aa9c7c25dbe921fd02b6205b8defb93fbaec","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.378_1636058203486_0.3994135335740012","host":"s3://npm-registry-packages"}},"2.1.6-unstable.379":{"name":"aws-amplify-vue","version":"2.1.6-unstable.379","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.379","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"c613b7f65daa5968cf8f2d732b6776413fe300fd","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.379.tgz","fileCount":47,"integrity":"sha512-r5lLLMMpgJoitSOlPXHRNLtL4iFOLx81YFpg5+s/eZlhgoYjiIjbPu7rn2zZMpAW8B/n87PYky1rAusErY8AVA==","signatures":[{"sig":"MEUCIAZqKdQpVXrT9YUoSSVP/sP9uVWPPajyfrQ69rATq6fYAiEAuoyti8uv1i1g0JNr7EbYLtSLwdpQ6pfvZNHCmnAZe2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"873941c655d9fe87a75238eadc0ae57dacc2fa16","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.379_1636069395289_0.31964569439847046","host":"s3://npm-registry-packages"}},"2.1.6-unstable.380":{"name":"aws-amplify-vue","version":"2.1.6-unstable.380","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.380","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"04d7bed5c42b4d20d484773e73e00ebf6a7c1d35","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.380.tgz","fileCount":47,"integrity":"sha512-m/wrmKHYcehfgZyV5jc9paP+TURARjYohXa5onLrd7LbUxVGCcBwgymgSTJTlAY+XMd4bnoq0SE+XSB7nphElg==","signatures":[{"sig":"MEUCIAOqVssnLa1oCciANuHMVlwYJ8hih577V8tcg5IT/2UTAiEAyivh8xUsa+EyJ9qDnqkp/jfvi63WqS4ykWyu+kj5KKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"fbe1f2ebddb1a155d74e7f45e30a61b95a608af1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.380_1636151817153_0.0923924100955007","host":"s3://npm-registry-packages"}},"2.1.6-unstable.381":{"name":"aws-amplify-vue","version":"2.1.6-unstable.381","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.381","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"80adba28f52057b42b23e0b4377c8d11a1db2a1e","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.381.tgz","fileCount":47,"integrity":"sha512-pJ7CBIAwTBD/5roFPK9iDmcQvACHa+BFZmduRiUbFvX+S8vhsm343n5lcbdFqzKc01XTtfRbAElfWycW3urfsw==","signatures":[{"sig":"MEYCIQCq3aCQLAREj4C+0UATmxrNAUZZPY6TPQPnKpB8Ii7mQAIhAN9LkFb2YilILRJcX1elB6IJdng4ya2t7SS3LRV271PQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d55d79749ba679c8f743a4d83098e5424a3f71c1","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.381_1636414645327_0.5729519232096807","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.382":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.382","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.382","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"0ef855c787b24db9ad1328b8cbb0aa87be1e5a62","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.382.tgz","fileCount":47,"integrity":"sha512-I6FiCizb59mIfAxTqIfK54ckSAEVhnT6AjZBi3iggA7yMyZFoT4qLHbrpMQS72JThcfOB9eFji2P/1V2X5l03g==","signatures":[{"sig":"MEUCIQCUFMoZlnqNZIKWd53z7yadBFZcf5T6RvsA+epVaF+NEAIgLRWytb/TFSXBO0ao5hFYx5UV8ZXIfoWiz+lUimWXFdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957597},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dcee89ab81dbd6e6e90777abae16194a05e614b0","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.382_1636478209429_0.6004320293876824","host":"s3://npm-registry-packages"}},"2.1.6-unstable.382":{"name":"aws-amplify-vue","version":"2.1.6-unstable.382","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.382","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"719d05da52ccb44a587f508fae6e864fb35c8136","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.382.tgz","fileCount":47,"integrity":"sha512-2aRbDX0SWk8wxQreX8uPEJjte+Mvbm3T1r5kdLhGWY0NEsMTJ+Ifxpw3sgV/0Lu5QPJeYANakYIQAp8JJy/Vsw==","signatures":[{"sig":"MEQCIAnfwE4G2o9CeIPcetqX6N0wkYHugJHjv4+EfM+2zD76AiAsMDcWYQoJX9ZelWt+cabpuMIHUG8xQQtmGSmBNKp4vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cd7a20a174a91e59bf0ac24d83d9a7aff7c58c5a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.382_1636479876498_0.8681631467512765","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.384":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.384","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.384","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"2e562fd95e730ad0899e235604a5928da42c9627","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.384.tgz","fileCount":47,"integrity":"sha512-NnCrNxlYhDAa04UKhmkXL+ceGvuiljV77/mJ7G7KYX9kS2+YoWZVbC/1eu35bVWsz8+YHKev9lOOle8vHn5rKQ==","signatures":[{"sig":"MEYCIQC7zK3xqdlT+fksQq9zDt9CS4koiw34zRpHgqqWrdsf0AIhAI8/bjhP15cboUjLHqaXQt5WVyeGPQlyHhtFxgGkpHOB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957597},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"2bf08e8ff66b43d90144a559c0802ce07e8ac7d7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.384_1636491456296_0.12624482023575956","host":"s3://npm-registry-packages"}},"2.1.6-unstable.388":{"name":"aws-amplify-vue","version":"2.1.6-unstable.388","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.388","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9164b7e8962dd05f8cecd828f536d0c10e89b381","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.388.tgz","fileCount":47,"integrity":"sha512-Tlfq+TQHa3KgFn3IBPPc0+GUeR3wXhGI9xuIl3niE3THLZbOyxRS5WH2oqux9sF2CVSgRY3e63rL/nOZF8fHcg==","signatures":[{"sig":"MEYCIQCRG/lShng4rF5Grlg80rZ6Gv6Rk9XJswBcKPPEteQ/TAIhAM4s+vhJv3nu7b6Pq36Ak5lFlpwxua/jJMhlAhwF2O1A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"36fe26243247c45cdb3f5391d91f0641c9cd5b99","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.388_1636493651332_0.8208036229892783","host":"s3://npm-registry-packages"}},"2.1.6-unstable.389":{"name":"aws-amplify-vue","version":"2.1.6-unstable.389","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.389","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"d5b6f52af44f16df93818bc50e917332067224e8","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.389.tgz","fileCount":47,"integrity":"sha512-TW7THU8BBTK/KQoj+a4WY8UIfu8PZ1Pxho7MKihnCEAMEdwo8/5LvHya+JwPJnkVmWSNima+RMqjpRTVoVR5Uw==","signatures":[{"sig":"MEQCIGBe6bn1fT3sQ9iz83iYbN6PzDM2h/u8mzw193QhM9YbAiAIP1CiDPBMriGdlMVOkCZ2e3KtF4qffcGime+c9mAWFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"755ce09f5152c54d215f023089f30b2c98ace33a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.389_1636654604383_0.8291562622367081","host":"s3://npm-registry-packages"}},"2.1.6-unstable.394":{"name":"aws-amplify-vue","version":"2.1.6-unstable.394","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.394","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"09203c3a1eb19fc059fafea3c8229efd82b9e920","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.394.tgz","fileCount":47,"integrity":"sha512-KFiH3TMPVI0GPXrKNKUlrEhVsuy7uftnvyhy4qDotj5pKncKIbrfyWbOCM7xeuRTGnjgkiU28SMJEC7zOvz58g==","signatures":[{"sig":"MEYCIQCT+Fbr/1hHnPpH4veW2D3dST7bUq5XjndbaqyqPD/2rwIhAJTmmMR9JVvpiKBxWDUnevQlAxxgK8+Ww0hGpCQAj4Nf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"99dbddad8c8b0d017c9004961b53b6f9198719b7","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.394_1636673730745_0.5051746879103058","host":"s3://npm-registry-packages"}},"2.1.6-unstable.398":{"name":"aws-amplify-vue","version":"2.1.6-unstable.398","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.398","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"aa8db1c0ab02b324c6e8983f12c56c2f5c68897c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.398.tgz","fileCount":47,"integrity":"sha512-nsQirppnKG4CfWp30g8D4D/NW1faaK4A7hqptiPCsnyf2q/iNY0RzypcUGpqkr049ZPB7bTmKfeTOp5GbWoMRw==","signatures":[{"sig":"MEQCIAa1TAi3ZH4bFD2F4DzZz8TV7v0s4wIHlsjj8nmFSbywAiAobBNHHgC1FQaUQ5IClkZ8h5f1+oxI57/PnldSqtKeHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957589},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"04762411c44dfc927dacd2dbbdcd945e618da979","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.398_1636767281121_0.8864943777880778","host":"s3://npm-registry-packages"}},"2.1.6-unstable.402":{"name":"aws-amplify-vue","version":"2.1.6-unstable.402","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.402","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"55247260b2bbaa92c83e7cf796d2167f6c2363cb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.402.tgz","fileCount":47,"integrity":"sha512-SS8k76fKO1uu1EJUZFty/q59vkmQLlNunJs048HR/AJLM0/PT9MhosybE+QIec6jFwV2zBZ2cbyZs+IyPP8fbQ==","signatures":[{"sig":"MEUCIQDis7mTtL+UtM3/cmWFSCsyqKJoIuty96cGgl9tEzicEgIgayNgtlfDm3HFlytrm5XeZGGe5mP5h+UkQON28Ga+1CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlWxLCRA9TVsSAnZWagAAb9EP/RFEQDJf2JlxuguRYm9N\ncu57g8O9VYZ7ZaPOI7y7RYAA9Q235Fgg4m9BiA9ntsWJ2gtJMcq+EeioqzNh\nyZePsoOj87dIQhuRjyMxreUBYsmY1a2K9w35V+fHG269V+pJ4HeS1mhz3qX9\nEhqDSOIlstzbK2mOtAvNYXgwoZIei51w+cYQ7j/PaoESrBuZZ1ifSICMQbBn\ne19UG1wuwIgunOWWd0LzXywoIXhM/jWipc1wvn545CaKhpCJ0RGx9tVCqOZp\nmc4pjK2UGP9oEUnLYH7lZl7z/ZL6XEwx3sg28LN274vF07kLQ0eO+iAVpjKn\nF8xKFCZ5kPk1hrU89p7tg+bx2aMlXN5l33J7NO8itYoNNZd0gau/dE6GQ/64\n2IbYUVpUFerhcoFmgwgROHYK+5DHdmeRP/kKLOHLQIcVcBJzPmNRZFfWdLHm\nL3cINtXjsjJX/bHwxw0n3j6LlNO+isVMZ8v0s9KPVDQeIZSNRZo57r8loVPB\nuPcyZaiMjiXY5GSS4G4629pKO//SBZ2EzZTmtH6TsZ7GIUlb3mVctqsW+dh6\n5ywLJ6wKrbu6KBeR/08dMwCuOXJo+H8PgU4i3tfmQ/PGUarJsSUTHV94YLwH\n5UN5ajhTwnHeoyOFoHP0jxySdN6UJXOihF6MIGzv2Jtg3jFunP2yb5qCRKpS\nPX3G\r\n=OrGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d521d17c45a246c63c02a29e103e8a3db374c11e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.402_1637182538824_0.542665294565337","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.394":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.394","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.394","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"cabe0d7acd558e22c560270b0ab53164348fd92c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.394.tgz","fileCount":47,"integrity":"sha512-qtNhgLxk/PP+KutLzWxfsbR9ecQzM4sACoQn1JtbwAl3xb2OkEClLKjY7hz5I30ijll6fh+nnxjVzaP11FFc7g==","signatures":[{"sig":"MEUCIQCZb7oMns0UTz//Rq/4y5Oyf6W2+vL5pE9XH7gnchHm9AIgNgtCeWR5HG+cns5WOyWZZ7hRu78aUJpFmIHBBtxfSw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlXkDCRA9TVsSAnZWagAAMxkP/1e7x9K3YSFic6DevOpG\nsX5yYX1NPrc2f+UGlCZPMMBbwyA5NuHvqtu9tH3IKMDl80zmv6r0t1eu7oG9\n8CvLaEITkqqgVeAhTOJHo5Oyjw/xjEYFGzEkBcyBPeeamdKj7BAIqIU/Tb/U\nLSz0RGOLvfGJ/MNdBuY3H3eqwDzug1+uHE3TOgvQP1brlsKGGj+FujDiOKzG\ny/HVl1kd3RigaUtquaCko7GMqAAd4mGz3iiI3i5dhGDthvJNISV1o0ed+4qA\nJ4uJKojpUR0NFwW1t5Vtv9pSj2IGHD7ePErTUd1qYdZCVpDcUnY80SLbAVDZ\n/a4vl5ktg0vCBDdufUFgPji/ZVvTheRESyZY+U91/88qGF9HJ1zqfhKDDafA\n7Bwe+k5GCtPjIHqqzXtyc7tEIiUTXaWnKTP/n+JGKy+wP42/dEQ2XO65y2U8\nCtt0LMnXveAy6DHYloWPvqnZUJpmof5ZrGoNEGtA27csqE9FlTIZInmaNGsh\nerIj4BiYYnaI0vlI8BTUjDhzl75S4oK6Grnxpb5ydDyRAAfEASAol3daZv0M\ncViK6eTYaJQoTWrXUByWmRVYgQxhMEqxxoZhwzEq+9RuZ9drlJcqhzlJLcNo\n+0jGLnGPVpI1ssCe732wyYB0aY7X4LZhNhSnCWlKvYuwH/LwEnES41uImJQZ\nVq6a\r\n=nu7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"8ca87d65e495dc6cc4b6e089be36b051747d25bb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.394_1637185794978_0.11799918250763342","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.395":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.395","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.395","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"2bc6bfe0503ad956ba4adf76ca878e7cd6bbb5df","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.395.tgz","fileCount":47,"integrity":"sha512-54fPPWqHT40GKjxKSyCnmvAbiQnYM/uC5DuBtZ5zy6OTwPkB+hv8bRnz10dIMp0ZUj+KxK6Vj4ThDwU9oi8/hw==","signatures":[{"sig":"MEQCIFujnD1AJVceJLzOCBN1ZUNFrbJEnEQhI4mvzjZvFkc8AiATnsndiV4dZzuyoy3Or9J/NukDpzV3twzidly9k0JZVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlY6sCRA9TVsSAnZWagAARc0P/28/QRHIRcQdkLwNl/Nm\nJO7n9gC3lpjt5sv/7FVXe+DiqC1EZZ2JfnEp3A1VCVA3GHTLpbu4woJ3yUnk\nBGwJYLo0LgES7VTTa4tJMfLsNhqg9vbbAL9t6+U8+liydq1yfWH0tvzl8iba\nByIhyuzIGTCSNHbsOCewWH1ykg9nomi9EWupoloQNBQEo0eClZE5X7r4JfuM\nIjiPv8tFV4YqnOQbmQpME7pYyxOPGweWvJn1R84uQRGiG0hadBLIWWRqcY2C\nY0V3rPxOqq+i5nUyne4CjThwI60i7WmIz882R56WNNdVVjZPXMG96TdhoCcG\nt80g7O0OnqtWieOveqduVlx40lXuPbVXneaRmQtbeVhE6pCv9LZRv3P1snb3\n1dAxQ/VceSCrkqSgdApMZlF+Py8nXUzkmatYEDYJvqYPOHW1MpZb/UMyYBIb\npZPf8HqZT/6AzDrbYcK/mQ1tXsLfqP5tF8qe5F+iWGi3Sh9H0G01VMo5yjzF\nOWEloQtFSTQVy37flKpoEYydfMcSpzLOzrulAOtXD5UBtmq3u5xqlsa4w3Qt\nLdwZSL2QO0NuMcv9jlKm6m1BEQgkiS11pChJPlcxLCuV2FH7+xJ/5Lhkubl2\nSqcPH2bLohAxXzGzxDviH46UJBeU25mAuzODYIh6y8DhCHqbPlDSRCJ0IZ5K\nUwHh\r\n=teWA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"72e99b94afc8408ee2079b09897303b84ab5f15a","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.395_1637191340387_0.23957485320766514","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.396":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.396","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.396","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"22e44011ae6c13981cdea3e25b85378fbd0ed637","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.396.tgz","fileCount":47,"integrity":"sha512-cPyxVWnil6ILX6pakAnWbQgo3BQFvs+9OCZYnsZ/t1u90HVbStWieN68j3TrvJq2GggSAzhX7sKY6YXlHwhYiw==","signatures":[{"sig":"MEUCIQD7OauPJ6mTVewUzoPUwZYSlCbpMW13D8ORRHSGGc7W0gIgWkf0IWaHqDseezSsxlLjTSZXfGt3t4C3/MPtgE+P1Xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlaFyCRA9TVsSAnZWagAAgGEQAJ4gv5JO4ecUz9bfrO3B\n+9NdWzdjiCXaEcIp8NE66/UTecgFJUXOKO5/3mmXxmWTaQg7ApFEILs3uG8F\nd36ZddJxtgYG6DMz6pLFGANDcUv83qxS9jjsWXbNvUEA3pyGIGN8MNIb6XhC\nUOYhk0Q5k9ZaYkhAl+CW5+z8xvYWTCxHJOB9hYM/B6bDDz3M2143ez0YxGtZ\nJuu5G1bdWpax9cXrUbc5N3T4AVtPBIW+jUBM67OLDp35ZMPWKt/MvOu5R5bT\nw7a8F0jGkWYG0MAYKcwJ5/Bv1yg5qq1ArfH6T/CRmdIzkJPCyX7R1LMkHzeQ\nBZpHVMo/0hs+C6JISoz8UotIWGdSWHAtL1XNqJsXae5A6E80j0o3zeZoXbpn\nYtnWM+IEC4S8/OQZLJkLFbsAbtHwrutqBHAoge/K4xia48SO9/8X7I+93SD1\nimpxrZnfxtmud6WC4ww6reGfukPvx+zJXflcwQBaGaQaA2MJFVSFpBeEMoIi\npeYIS90Vz1Tf4FACoKWoMS5oDKhN6BvG2Nh6+svaVzgpOTLlC/cXFT7KiJv4\nj0gJPTjexzj6a0knrt8WSq21Do+JlaCjaUZX52PabIi/TmG5VbVIzy3dJ0Sp\no5+HQUNIZ52/+ywwHk9WJraH52gsCUTgFJnBna1OqC8+m+uZXxdtoTxxpdB9\nQ0/m\r\n=5dzA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"91ef04ded25e8e2d088b88ede8188ed0807fc7d6","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.396_1637196146056_0.7328823843247365","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.400":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.400","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.400","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"50b0ac96baa40064e25ed65887f5aa54dd3527a2","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.400.tgz","fileCount":47,"integrity":"sha512-g6NYKoFvy6LSVeC9uMk0XoLz6EWhd+loIgwqMoH0CfQA7snDL6PUUExYsfLJOEeKP3X0JORrPR8vDl+V8tLJLw==","signatures":[{"sig":"MEYCIQCgHIceXFkSCgqqarj8q9qMf23bs9yIbzFwYLnde3zMuQIhAJuFD01IaDhqZmUTNmIIQgx1qtW5H5tjuIARN+QD3/j/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlrlACRA9TVsSAnZWagAAisIP/RZMgBbx+QD1TtUeStTk\nqpGZQkor5sf66eSHq8q7/rle9argw6TGhIXDKgLF/RTUJCoUJs/7DlldwCx0\nWV07eoJPHOZts3XRLKC47sL/a2cE7PPzmHFcYCyRj5B9iRN7YkA22NOx0V4u\nMkiBvLEjSiO2s0rvny1zis0xgf9N1ArsG3JnVhiiuMDCqYCBAcCoo6ozIzJY\nLPx3FNKXzG/6M5+8QzRakRl+z8bTOEzUmPscpnFCb8Hv4Ss/kN8BFs9Le/FZ\n1XCsctc2wl0pXcFL9ts1n3YepHFwps8+9GqtVCnIVj1jJnY1UtfEu/IBe+cP\nu24IDyvgSNzVzEKS+pjg3cssIgqWElimkYblWzTnGl2JfbckVyIgJ/BZFW/l\n5bspCHsJNtWv3riFtiT6lUFK86XB7V5QTyhegwORbvlh4T/8kY92YRb3OS8O\nI1K9a4F4DOuV6ZnFZRHnjZ5MgHGcC45oEtZTQ/acMEoro6ifQ3HGBgNKHPi6\njUBTdZifwwaTZmfAH2OLEboUQzX3t+iFDAfmRQzxqFbjJt8PUreKxEi06iob\nUpPCW7vLownPKUYxkJLd6Tm0Kj9Nh91F84ZXw+lFH16zS20b3HzQygT7eClo\n+Nfspel3toGpjlneDUWRlMjaZaQpbVDjhAx4K1QDY94ynBkocvc0z1D3mAAO\nQT7y\r\n=vbnt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"770278b2c66d25c4587df98b1079ab9d4adb17a3","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.400_1637267776085_0.9192013995876103","host":"s3://npm-registry-packages"}},"2.1.6-unstable.403":{"name":"aws-amplify-vue","version":"2.1.6-unstable.403","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.403","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"bf96db0d51c9f0b39aeac093031f46c3da49ffab","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.403.tgz","fileCount":47,"integrity":"sha512-c+5djg8EDSMT74ZprYdSc8AEbHvVlM/2BTiRq5tyvXHq3s/n+Uaw0J9IhiUFW53DbIBGcJOBmDzGlh8DuAU/Yw==","signatures":[{"sig":"MEUCIQCgBZmeHwPwJYW/ygVoJhsnKk6jx6hwz0SNvZgvC8yR5QIgFtTw/VWfUvpKPqxaNwFqJnRadnhfmsveilwb049se0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsf0CRA9TVsSAnZWagAAZlsP/ArG1dcfRty+2p3gi84n\nLWMvAMx78kFf608TpLrwfrd/1m8+aB6vyre+oXrU5KTjnpSVnYFri4ApfhKp\nhIkgW5345HGPAtfLCZi0Dcnny9GiAEQyFo8UaxxGdgq3nhenKle3IRNLfD+j\nV//B2e0GjIWA9xV+kHS0eBI1k/2T5zQ7GvRC+CP8aoLnTxfUryWK4b8GIEFS\ny8usbGnji3r8QWuH0ON/uoJ0LcKC+98NQtlqLU4HN9XSHwmKMWKaTBFjTo+O\n12lql/IniDzEfy2u4iuyFpnjxwkq7+Fl/uTTYhiQzu9jgibqZjnqJO/MhmDO\n2ShL+xfkT6KBN0HvgJVR6cy/e62Re3BhybVBwTkGq4dm84gHzDgs/cf/agwR\nJik7bktz66b8FQUKfXP7SDGxoIxBo5J3azNUH30hq050R9L46VJGsSmZrstf\nPJCy4JlwQ9CKJX0W6o3nL86gdy/Arbjd+AEecW+xwvrpSQT2IURcXe8GFUAf\nsPMxcCGepjXJsJVzPIo4nCnjalwiy/emn4beO1rLMFm6rEEsnYJRh9WtkAoe\nHp2p8znSt3o6ccfHxw++NxVNFhqT4ADegr6Cpbn8hb/+tbPtSFZtHhsoSGKh\nYabxjkPxPelhHIFgqZnNIpG3UC0PyF6FqnnDMVY1Y9634dRbRYIsnZiknGWM\nsR0r\r\n=Q+Dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"47f29a3c73cdf667d70142c8ee367760bd1f86bb","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.403_1637271540149_0.38214636718694495","host":"s3://npm-registry-packages"}},"2.1.6-unstable.407":{"name":"aws-amplify-vue","version":"2.1.6-unstable.407","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-unstable.407","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"847850ad46a05cd32c2870b789832fe70fefc00f","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-unstable.407.tgz","fileCount":47,"integrity":"sha512-H2rAcP1E+gH5wUV8l+mVt+h+4/1CsM+0zx7t8SpXY5+krw3klvVMSC1NhXSrfqCKBZrqF4olXtIf9LhKdtTAIQ==","signatures":[{"sig":"MEUCIHcY6LpvVtHdqO+sHjE0A9Gm9JL9Dxl1tP0Rqf4tFQBmAiEAiUEG52xzpCuSiPQxt2v9v+TliHaoeBK6sAWyOHCRiW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmD/pCRA9TVsSAnZWagAAK08P/ikYY6+mjc96UVurskDr\nggRf5N+rcliiV4lC6YXTuu6oTbTqFMEylHT5nEL32sRWKe4fQXPr5SsxDYGx\nboM6hvw1Yo6eqFhPKbi2p8u3+ArZfScjnssbSDf/X1pxtijKBqU9fsSuwJQa\nLANaDk0Lutgz/UJVNDx1ma8HN73o58EAtW1mJk+weLh/Bg+vyUrRH1Yjdc6o\ns+vMVYfGx52Btmmd/OkR3g07iIbxFfp/vqc2ei4qlx/VdVju06sMCop3CdMz\n/wcFKnSi4RY8pEKn7O4JhCJXUFO8fkM/z04fU5xJRHv+q9xj1GChH9EZslKB\nGMrJS0HJrvOcW86iJDklK7q4hazWpivwm9ltd94iPgRyQ/dPtZpp/KnikYoe\nf+gthH77GGPl3uwItXYa4OqZ4P/KZak/pClVJsDLSMTzk/4CB4+0ZauwgSz/\nKDWGjMfq1gvL1Fwe303qtSDWpVup1diWMImCuqafu/iJwRMHVJS8p9v7drPY\nUl0b9TwwZjuUNwhZPlHNP3ppVk3S9baWOvbGum8hvyKcwaPoEa9KnlJy5epa\nOMyDv0OYI2JzAIXDv0DZGAEaZUrXoCFAryw9lxLaHEl7x4gNCNZduByvInbD\nmSaKs3ELZLZpDwtQE+PNQ4gdGYIiU5FnRl+YHbt2enfH78cUn5vH540NUbZ1\njNuY\r\n=voTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"a67b31bc5b602a1da45452104d1f018c6b94c813","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-unstable.407_1637367785043_0.005531271857736053","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.402":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.402","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.402","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"ac0e41dbfed67a5e29f526c2d12fcb02ff56e5a5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.402.tgz","fileCount":47,"integrity":"sha512-6hE+/bGWCQjE8dNhYK0eG44WKbfpX+Y8FwEoqtQjmUysI+Cg8dQsubFKgUhmUgAkqBFOtFa5gwJDunxiLkETBw==","signatures":[{"sig":"MEUCIElyYvQF/DDiaAaJ+LrsIZ3IJaaQ/V1+1AOkixaguSlVAiEA8HMliXgY0W9uLNFqpgnzpOa5H8GYLl0xLFdXoA3AGnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmv7WCRA9TVsSAnZWagAAHv4P/RyFtlknAY4UPBdWJKRN\nDaS44Uzy8eDiOTwMqH70lgNmiMCtVylPJ5M2/UIY52B8z+4FC8YDnsTnQR8X\nhVjSoG2YpBfLGOkHmS2HtOI1Ic1pfWruISnuj2arZdJzVi+WBQDmxG2SQcd4\nYAyTNdO5aV7fKzo20MsfQy8OP6s/EibyqP9hjldclx20I08gTliVJ+fWxNRR\n9mXvshbvILYZuloElP3W8YBVY6K39yLpZG3vAsD4osIxbRBuhiCpqc5LiZ30\n2AQilcFbqZo6CEawYTDEDzF54H+OOCXy5e7mdZFzkihIe0AizZy2fTon7TrK\ni4Uy/WS/whs9kclolwcV+Pbj8DD3DUFCv3V34wUsq30I7/yW0LMXJ+yG1Spz\nHAdUNRCz+mvqT/hW5TRjZSbyoGJJ8vqsRLxZ1lcJfNfvjycL6ElKq6+YqtQz\n+9nTETX6TMHCl/A2rKDZX4w5uWPCG8Set7jrpfpWIO9iVBKaqNB5Gh7B9n1S\nl6IYfXgoHLpwMqX0t/kkom7ftHI5EZJgUI2/hSMjbj7aXPPRRvVaNhFiDL87\nqHgiwYCiuEBDDwVLBMakWjNKtVLSzRqV52qBh1UMPe+lTGdWNOKRHZTZ9BlH\n/uNZ2EzZdl/B/r5vJQSuFAJ0toOcxKBiB20sCU9qu0pn7Sor9x+ZDGgEOU2G\nCzXc\r\n=RyOT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"887aab1dd9b81fb9258fade98a61b7f309fa93ac","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.402_1637547734154_0.7319779485356155","host":"s3://npm-registry-packages"}},"2.1.6-in-app-messaging.403":{"name":"aws-amplify-vue","version":"2.1.6-in-app-messaging.403","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.6-in-app-messaging.403","maintainers":[{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"cdad82d8649149bc2700db7e3f342ae6a58c6345","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.6-in-app-messaging.403.tgz","fileCount":47,"integrity":"sha512-1rHQTt8c7ga+jPS7S9XiYX+k25kmf3P8fdT+rYs1CfCRFZfxrwA/b09wBzklcOuUsdywA6ADi4XZ9/IuoA/D6Q==","signatures":[{"sig":"MEQCIF1ob090llRNhhvSi///6zdKvu1zaG32k14fRabQ1EfxAiAF4d18bFsV2dPehzy420yROZi3pABkKeK213l6pkjyWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2957723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnDLkCRA9TVsSAnZWagAA7jYQAIkyzUCVXYaPuH7p/J3G\nsxmzqydLmCTEUlrqKhmr8TsPxM5Bcg/TVkGCX45lmkJLgx5rB9uR1Pwf4fEG\nKbj9ROZs1p6jntVx1VSb8NJKKvrquir5W4IAF8U+oo0a7y4lICcmLJPpORs0\nwP10OJh/Ed2wtJcsHX0Hoam042KkWCSonMe+Bl+BLLvj4eNZfdDjQ6zb1let\nsfzMB+Q+EGBlaBhXQDZIMa/aPGkBW9LH0ojXBf+oxXWIaggkydJlEXPaLbhG\nTvE0mAZW+xWXhzfB+FpTw4ao1t1zm1OeV9hh+6p0uvGognDoqBVOdRqOtOwh\nXNS88+RYoPsiSAWnQpcSbBb6LxczRlP4+qFvBsdFVFgmRP+BfyO2dggYgHx1\nAElYOzfGKxRUZ2Wi5es6rEdYU6+NLyX4PuNwb3QBJLxQjbu71FKyyWVnnGNP\niw/vyv9huZOt4X49JILm+DPGhkEUlX/JTZXXwCTNeVjnzWFqdsFgwPN0dzQh\nNQhLQN0TFwlyCPvHxxeZbC9LSUdDqIqQ0uc2DZrRO9tSE3g8FoXYx6DXP4w+\nr10mj2jhnSmnxFZC0zyeCEBcCY6bT/hscb73aIk7bbBIkm74pInvKHkOv+yC\nzlGFTmDxxszSc6XqnOHwXER06GcIyuTlN5uEVzdXfInWvv0WqrP3ldX0ObZC\nIN6o\r\n=f5Xk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"74d739b71ef33dca208cb40b2320709a90bd038e","postcss":{"plugins":{"autoprefixer":{}}},"private":false,"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v14.2.0+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"14.2.0","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"^2.5.17","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"^2.5.17","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.6-in-app-messaging.403_1637626596099_0.41890959508762116","host":"s3://npm-registry-packages"}},"2.1.8-legacy-ui.77":{"name":"aws-amplify-vue","version":"2.1.8-legacy-ui.77","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.8-legacy-ui.77","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"79fc3be425af72003a97169e594d1bfe5a435237","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.8-legacy-ui.77.tgz","fileCount":47,"integrity":"sha512-E7OnVVy+8rNX2fKML85Rr5WogHof8Bfg7QB31R0MozDpaHv9tmz1azkv0uTXoHSVeOT4fQnK+q4kPbaGcXOZsw==","signatures":[{"sig":"MEUCIHqhGiKmNbPdShQCS4Kn6v5cTxBSPkvpNejhl6QSzbk/AiEA0tFdkQBxalwge4MqEFQDzEfMtdcX+mKyG/COuqmOusg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2993085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjL1beACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3hw/9Ek6WENvcnikveVAYtyhz1DY7Z9dNiqNWtVoLXBdlC02rAOMw\r\nD/DinAun1UTsoD89E+7nii+XPFnZpcQoBheeI6bUpXO5s+hup1mTmCA+kPhc\r\nAilgMBeg0i4xpZi4DyIAapHPCpiAOgQlPjLVDDvE0ksfN+fugkQPGExQ073M\r\nBSsWi8p19hoQrSG7DsL+is7L6okFP37/xJUkmsn/wbUxHWKHOLYhxQhqcN27\r\n0oPhIs20z3eRJfPz22pcG+++rNitpizXGpMDiNaHumlvn0GujqfrOIxZmC8/\r\nyCYgpbuSuOAxEvkNFW8642HvM6drcl9+f6mJjMUH0BX6aPDyZBAZeVinN8zM\r\ngeWDiFlq5cqEVeA2itNOzfVRwqgOYqf2RIFdnNDMgnaDkpTBLI5Gx2Xrshe0\r\nYpqOwVISgsb1pqkLZTzqZbWbEtguPIk098nYwS9VsoG9mEcXclhqTxNwj6Uo\r\nr6uBy/jdUA1O9hJ/6bFvORCk82t9lxQFtyXNpdMmT4KUIcy96Bg0cy65YF+q\r\nmRinvYGLYUVxV9svBDC9N4jY7UpoCDK761EAlziSuZ43nlVyb4HY7Wojfqy6\r\nBwjMAPIW7qtVmwd6R384vbgOfRG12GA5q9GmcKtds52SigO/wWvz0ZfzlZcf\r\nP5Jv5ofoYEyfU3nTbwUGnKMGtmBNRZhzuGo=\r\n=rhpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"28a3e984074919b130048b45f0b3e94fc8fb37ab","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.8-legacy-ui.77_1664046814643_0.17714586066806826","host":"s3://npm-registry-packages"}},"2.1.8-legacy-ui-tests.82":{"name":"aws-amplify-vue","version":"2.1.8-legacy-ui-tests.82","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.8-legacy-ui-tests.82","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"78a267c4e20ae2d4dc5160981e4f14558dfe6ccb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.8-legacy-ui-tests.82.tgz","fileCount":47,"integrity":"sha512-aASWW0SJ4ePdZI/IOz3/jSh0w9NNCTJSKbd5nZzYdomDkoVybHac4MtH19kGg0cfMJ0VyFZ4oav1akechhPjwA==","signatures":[{"sig":"MEYCIQCZ+x5n9sExv+Mw21XCpahp1q4zfp04ittdn25JAIUAhQIhAM5bi5MZCiDlNyEBYTdWvcWsJC9zMpeG5X/cAEYbD3Un","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2993091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQH42ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZBhAAoqaZOpmb2ihOCrczIQZlmx9yRBOrKOO4l/pAHP+ip3NsJli4\r\nl0I+IzbeYZwQmBLRTT23xS+TOHLyqVwOx0CZNRI8B7LB+8HTEu+20ZgCxtie\r\nl2Qg5WC7Hv9FqFpbgrcdVIoa/4Cbu0Mybmm3+rQ6YexH6nXUliE/G1KzFGCC\r\ni3VrA/u+0FipbT4hDDMtR6JY4dNbxnrfvCb3bmSnsoudU//IhX1+8F0JF+Oc\r\nMBPVH+4pUT8TGCqmElNHBXgT4MTvqzN/bt2/+GYnyVfbrmxvRpab7EsUcCTw\r\nSX8hhYhMk5nc9NmlOh97euGtc+Ww5sTk5gc0ouGl7dGyZ6ymvO2x4DHggvUh\r\nFo5gQslsdzdbbvYKcZix53UNcIlD59MimNRglpyfDXOTTbY8eqMCFOHAL48u\r\n3fmG831u4IJlWoA2AHfkNqci+WwqNDgqSulk3LzHG1F/vAlmrdxD1LEn6msK\r\nFsT7nV/2ebP6ltCdB68tI7Lcc/f61xmNTaAnDEFGhTo5VqUQizfMU9QpEYXO\r\nDQyKFuZWU/Cf3GO8jsOXWB4ttTzFmotbE8KyNOH7XDvjBOJ3IOFqxWB9I+8R\r\nMs3UYjFEoHc0xhNr6MhzoUz5nEQsLkNOvXw4T1Vavp1GCGYUk8iFNkKZP2jT\r\nwKgBnk2pV/2rGIDBWM5hW2O7+WQm8NlkJak=\r\n=UZcJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"32b969e877df6c6f4e7c0070f0529d4c93c9fc71","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.8-legacy-ui-tests.82_1665170998472_0.6397713966040974","host":"s3://npm-registry-packages"}},"2.1.8-legacy-ui-tests.90":{"name":"aws-amplify-vue","version":"2.1.8-legacy-ui-tests.90","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.8-legacy-ui-tests.90","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"68a4672a399a6bb705aeda5e505c14d6e3ce62c5","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.8-legacy-ui-tests.90.tgz","fileCount":47,"integrity":"sha512-Q7xw1PxRUs6rMmf7JiMt+wRmfOo3CfPPLJqh2fRZ6grOiEa76/7YJX8rKgDZwN/liZOc1NlYEveNJcjmLoDhPg==","signatures":[{"sig":"MEUCIDnSA84CQCzCWKE25FkwmCMOoAUk2kkgqOwuWIkq5+6LAiEA77uEbc5RGyuHQuLnKKT4AnLFd8taRNcmrSDCpxB5orc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2993091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQK7AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRAg//exqLaqf6+EenWZ3LQuNWxHn/sSiPBRY/E1l576oSBwXfXYjk\r\n6Bq0o0IsAR1+wSKP297rPI5mMsvBS9vpbO2fuMNeECH/+fHx26DQlMTPs+mO\r\nchxObZd+m6Tmox4z8d1oeUYGfMqBaSA4HvjgE+fWdHkoTnk8Wv9Ma8I40EZ0\r\n+q02Cahxvp9mPGXa+a51C2lVnStbelCYVQcyui6PxEuQPtlLPzABGVPn60X1\r\ndyYzZAQaEqseRFiqZ3mrF0mEajpsf0+UvU2p0E/Ny1FN6RPiI4SbZDSUYVDD\r\nESqc5VsA/SRsCJLNtvf0LqXIEC7Vqt9RPT4UH+LE7AGxQbWNYYbvc5HcjZ9Z\r\n+8lTdmoidJsixGIJ2Un44NOToogo8DZv7cwmGmDRNO67JPFdjw5iqDU21dQV\r\nMrmA3rUA6ox/K3p367Aein67imOCPL3LP/37pUw8CP+b42OxW46NGW3Rqudr\r\niLuNgU55fz7bAwCffmxGRaHjtLqq+GseOIgSq0PEwrCoYznJZ5UV/R8GY58A\r\niQcoEQ2eVvjIV2mKmW29QUgFpxXR+GOpDMDQHMa2SnLa5LTG2JZNy6cebgD0\r\nLG3zs/0mXdIsCj39d4ZN0Fb9/SZSHZc4NOArF1rPe50EmDAec1j3AnJfoW1u\r\nCDV8OXlg2JE8hq2KmjmMEkbuD4jR4QLVjAo=\r\n=68yN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"bfe798c475feb910e06b533ca45e0d845e6970c2","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.8-legacy-ui-tests.90_1665183424180_0.8888316957731959","host":"s3://npm-registry-packages"}},"2.1.9-unstable.10":{"name":"aws-amplify-vue","version":"2.1.9-unstable.10","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9-unstable.10","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"15dc64d496e7577e4548513baade87aa76a1f9ba","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9-unstable.10.tgz","fileCount":47,"integrity":"sha512-0MydXncgFV+jyV9GY2q98xKr2VuAh3AVJTFIcHUy648mtTMTkRG1mgY5uezEgVIHyACpQOs88rMt3ou/CzD4eg==","signatures":[{"sig":"MEYCIQDtNg3aNnG1vt/EaYFGGwHULCiTJrcq6p6OxL6bGa7NAwIhAMJOjUemuvT2BkdtxJSf39iLQ1Y0TaRyQWkcgl1uspNj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZLwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrk/w/+K3W2KdcOATvihSWrDi2BVtXXJWwSsOn+JNZ3E57cMvxYRDPG\r\nhQqr5gFxaa+hO9nBEAPEGKrmvb2XVGBin/jLqZCpRxveq/Bef+a8GFC95AEo\r\nyUSJQEEXafC1pFcFyQwp1DWo7ARfnicpzkEeIZQjnXLwUsnZO960H7+jAXiu\r\n7eS/SSBuxgPOjXgDkEmSu9koFQBU7VAoZC1gpIVeQqsoZzqcEPt3IukEUqMs\r\nSP6tyb6sUa0CBRUlcSnAqDu+ZMJ5Ece5pr1ZNQvEtqrGMkVa4rpVqgDH/AA2\r\nmFE+RUmAWwy8NH/dJ2n/4hbcyeh+MPCBy8vdv815ma2Cd0XepvlrT3tVrgi+\r\nSX28cE537Bxa8+3HrEP2MgbR9WWtMq2netiR3/IkyJ6tegBmyUjLbxjgegGP\r\nbgpyuFMlzDuAlOceLfcjJWHmQdo/QfYpBlNe/CbVmJrD09kW4bhxo4j8kPeX\r\nOg/vKjXc6ELAh8U3FV4sDo6q/HMY41lgSDnwEdbrSlwq3fSlPR+y9RNnIOVJ\r\nw6sibrb/Yn6jAABWCUF2VPZ3S+SdODazoSzbEbKU2sXjzq9L39R8uHWEaeqp\r\nu6i+bhDqHfEyCEJoPKvI9Zz+qoO/HslFHZJ6D7PqzVoZ/wLsm6nyAp8pYnIO\r\nExSI15s++ssfamCXsgxPZxOtjyyDYLaRKVw=\r\n=4sC2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"3c5a4337e158b974797c2fbaf49315272bc7eac2","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9-unstable.10_1666814704027_0.9763736056138006","host":"s3://npm-registry-packages"}},"2.1.9-unstable.11":{"name":"aws-amplify-vue","version":"2.1.9-unstable.11","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9-unstable.11","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"72d79c1d83d383d37c8ef0969b32da1128ad6304","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9-unstable.11.tgz","fileCount":47,"integrity":"sha512-WVHYS6rjqkImTx0MAs7eMm1NgqDPi2RNEwqtHE/Gd/ZdEKVUeShpP6FEBcgksyGGdOlfecRtz5i9BGH7Es24vA==","signatures":[{"sig":"MEYCIQC6u37Hef6PT3T1+U184IXnRkg2+H7kSF8tHltZsS6mzAIhANxn+aahXoL+K9zVZ6Aw9Q2sSH8FBypcA5tH8ohCC8Do","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWbaVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrabhAAgUboJeBYWcrB6t7aTylms7pbcv+pucYPK/g9OVpwiMf6sPyW\r\nly7b5M9P1DaeE9x8gBEfd8KETcjg8emIwuQG2Ux6dxFrQoif5E3kLzkp6sqc\r\nQmBdYKRPqsKmgI8LxDvkFNLePWseWIjJJA49WLvV5/oGROS7ddO7suAJQLZb\r\nS+KGrEvH81R+yJfELmb28ExQ3P9UJv8+69vUel+rcI2XGSIzg5BWdpjww4i3\r\nCFswX541ahPmyluzgpvnU6rNonkqZUXxP0b3hf2nl84tIRPj6v+wgMJKQoeC\r\nh05m7LcJkkHsYpO5qREcv2l75ZJ1eGrboQkQb9uw0VcZ1umhqRy+igAv5oBT\r\neohvmRdyDPbibRP305RqnNCK1HjilbEoS5nHc+hJ7e/6U/BZwFl3qkZHPGEV\r\n6/91kNZjsaGx4vfOotOnNTyqvJ3TtOGoh6u9PjV+q09RTaTn9SA1rQqbxrKE\r\n5OmmHh4rjcteaRrbynSm6ZEUhU6h/5Twvpko1Q/sMTxPzZSRIT3kHwTAnkPg\r\n/aWYkaYppdVFg0Y/3oWmbLpRcqepqaNDldOZ53kKur/4ttOOVsOiNAkrf+1x\r\nkBdGSxVLnPmHn2LO/kME/YNxl/K4LnIYX72rD9F6W8WlOc9oyC6Eoh6G0v29\r\nImH9dUD9pDhZVsWUaDfFQrrzX2c0srzKi84=\r\n=zr4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"23ce5fddde4f6b7a84527dd5d81156e53e97e5e5","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9-unstable.11_1666823829125_0.4037240140799945","host":"s3://npm-registry-packages"}},"2.1.9-unstable.12":{"name":"aws-amplify-vue","version":"2.1.9-unstable.12","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9-unstable.12","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"d767cfed64d5a168f3979f439589b0aaa50c15bb","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9-unstable.12.tgz","fileCount":47,"integrity":"sha512-Ikn8QzGBpF43fnEsUGCYT9cfHcHx2w+ua8OZAtL9PqtDsuiX4HHiTQHAAlXA68Q7lswXX37z18deeQ9jX+IldA==","signatures":[{"sig":"MEQCIEP4PtMaWBpwcPAR71IX//FM9+ZmMMX3z0DrjgE90IZkAiB1/rnlgK045Tpn7Tjt2t0pVCMIlZpEZjX83acD7QjBpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWc/dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4fw/9GJKwOn12v2iQTiiS0hXuu/A5dD+ECkoeYjZE/54YfwUwwwse\r\nHY7aJ4R9w3Ug9UQ1DHLC3ybMOVZhuPhsz+7VqAGXbpZ1MjCPWqTBJj9LPkCh\r\nF3ou1cmdOxqF1jUgSTQo7KB+s2+Z0nbWVRYJKOcOVyqq485j3ZYggPdCEvw3\r\n3Kd6RiI0dXX8JCeO+O3cSnhZYGLmbrPdnjRvl5yZ3dq7HrrDxJ6l8xgbH357\r\n1NM1MuRkiQ+ujvk6qjoE+goAZ+zbWHP4zT1aP1nszqNCN/Z50LFHeQjspTXX\r\nSWNrLc+YVJf5N5Wq2OfHFyabqSDw34OygM9/AB3Y9DdwxfFFdiFg9Ouowzq4\r\nuy+2w7qxr5b4AbPrFDnDHqIMiXNmDsiTjcORh7oajVil2omXXMHGkX6SykH/\r\ni338lz4NbpZIoNg7RQYAFO89hcrw2ENyy/tQsFxCI5vimDPFg4Ysj8OxLLp+\r\n44xL4M0kcAuVqgDopzo4Q5qABgXtjALORNsb4dGZWTEdQTZPhOoynJOltkkl\r\n/SKuyJxNbFUIrHUQMKwuxIqNWZwehtSGTp7RT11TaITOHcxg0z4vCoXpZi9l\r\nfDmiz/7mEnpFIl48O6r6/stJ/MEn4bE5I6QSv0h+/5SLB3awoIv0pAa6S3Mp\r\nAjTUAW3XfWaiLUMgfrdo5XQ4paHiJ7h4sMI=\r\n=/Hcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"b81d184a248b02fe9ba8b3656375285a0f1d6e92","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9-unstable.12_1666830301118_0.08540564938614481","host":"s3://npm-registry-packages"}},"2.1.9-unstable.13":{"name":"aws-amplify-vue","version":"2.1.9-unstable.13","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9-unstable.13","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9a1eb265cec1449b3e4ca1eb8cfe356fe80de56c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9-unstable.13.tgz","fileCount":47,"integrity":"sha512-yGiHgy4GOX4iWw9LIkGMcOAY+uKg/w5BgoP+XHn25Sp8wYrNBx3kOlise2IjU2QreWRR+q1j/ccV+HK5M0AXbA==","signatures":[{"sig":"MEUCIQDy+T1ai0+faGiNX0GJCEURTZ5vS8OclIT2h4T0IqbYngIgbDc+mLlEHdGU7sFzBNMH91xjVh/LU9CPvum/wwOs/A8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWqvKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmollQ/+KeyWzu4BzAfPp7pHnfwlrQi0hX5jWYpsAQsX905DP3eRctnh\r\n0pSfj48a8bilahA2joEuX2HnoswolvXTbm5Vnv6YHAkvC/Fsgd25iKrE3qLp\r\nWguGzNW8FQIB6cdGzi/6sD7WDiQQm0+RdOjnQvlTgSgi5wHWqDMbH7poGbPs\r\n3gHtWnRh3Urv8GR8r7xbrt/YYHy3ZIdu+Qswz0XNu2bqfFXzupaaDFOZy/To\r\nkFUKVpP5XOfO2eCJv03IX175yF0AsOPlI2EKY35h/q2qv2p23wJPjM2S1IaT\r\nFH8NI+ShkFEK5cVAjIvNtroBQ6J0w3Kh9e8lylmL1rjdTCbfgO2tON13T3SF\r\nD0cFXcNukOQ3/Vbn4gSJnejoh0WDt5JjzEzoYLaXqLnkBAbD31QhfQB33gL8\r\nwaY+IN6qKf4qtIf0K9mMRw3Csjtr96hpk7rETUD7j3+3/OAr4hbJ8tmn+NPd\r\nltgNFYbnlN7HmI4VISG+ImjS5oP5ohcDpAjiogG3PzeVAj74O2hLDCxqFlfL\r\nx2q7gUCzGqCjwunDYvfa861hK63QwDC9ZT7bDVv8c+qwd0klTj0s625/CzSW\r\nj2/wnQ9cawLa3evJw0TBIeV0799tZfZukFBQbd4Abtqz1lOsIlqZrOx1ihCU\r\nMbz4+k95Yo6sW8sWL7O3IINlSv/0ryZX20Q=\r\n=e35p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"6dec7766badb37117e0a5215384694aab2998733","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9-unstable.13_1666886601928_0.6309720000385348","host":"s3://npm-registry-packages"}},"2.1.9-unstable.14":{"name":"aws-amplify-vue","version":"2.1.9-unstable.14","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9-unstable.14","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"7531fb70f2cdf94d24f81e38a50089da398971aa","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9-unstable.14.tgz","fileCount":47,"integrity":"sha512-6CWcmmcdpBMAz1WOCDJy9bxdnNGSz6pBo25E9RCzbt0Pom/sUiqGuIsAfowIKc2i0JdNPkOa3MnJt+K86wCiJA==","signatures":[{"sig":"MEYCIQDPaL65FEh6KycvbM1DRDIdzV5ccohRUtMDLPN4MHZw9wIhALtsQFbhm5xkh9lulLKSmKndpTXHstiQ9R44fsOPFja+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWraJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozthAAjOMyWU21iBakprh62SfJoalx+3N3yUhTFttikEPWBB7vrmyH\r\nMHrsMr01Qfls7qDHdM7ZxKlpowTikZkfJA6LA49ITLNh5H2cA8cF9ZU3svAL\r\nHOuvBkTxsqsvUM9VG5b57JJAJKrHVq5OVeUWawZX0PL2WSe4F1t8BdqcD6/f\r\n9uMzswMu6bXRroyhAv5MZXNj2xTOpz3FBS4R+TDins+A2OcdEk3+pLyaK6FU\r\nraqRwbG4aqJsf1whlK70GttJfPZt90pNpFn7oPD1rp4/Xqo+LIJHWxUaU+yq\r\n2DBkJyjozuZ1DlBUJA4br6mBsl2xlWknvhVGEltzVbN/oAllEOHmO33fl2Y7\r\nExtba1s1pjuxV2N+GgURS7GdcE8ojxTE2gOvTeHVQSoJYhmzOHhLARH+dTsg\r\nEDPQRRhYX99nGE4UsWKdxUEmIjLgLMbHA/h9NHXuiASdfxRAJ7rSKjaykqok\r\n134yoFOk9lz/D78RE9RkDAgE24SfgYi6u4iKwiAXKcgUjte+aV7oWW+RQjAo\r\n89rR+6MqpYGmEWKY6CQfC8BtmTDvxY4qke5cS3mqFu7atYnBN26eihWV0qA4\r\ndJ8y6nwQkjZpOeBkrSBxjdorZ2aj8eYfsTUgOtuVTSYPrBfj7SiWS3RSgKil\r\nEknzkInBJyWxn7eNrjKpbRUjjY5yn4Ibs9I=\r\n=FiX4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"d05426630bbfc5a9b08b8165e211f4b07cf11a34","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9-unstable.14_1666889353676_0.6064945629228371","host":"s3://npm-registry-packages"}},"2.1.9-unstable.15":{"name":"aws-amplify-vue","version":"2.1.9-unstable.15","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9-unstable.15","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"5871eca27a8a52e68bbf82d74da92e8a329da0d3","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9-unstable.15.tgz","fileCount":47,"integrity":"sha512-gD6kA8ddGCRRux35qHsv5RngCrEVhKctdF1NIy3KV+RxGzITHfd79gu7bDxCso9R8TADOR2ri2m4aIyuIJSB6g==","signatures":[{"sig":"MEUCIESMmbsV31Rkp37o0wDfvoUbpaFeFBpAItgm5JjVrHMSAiEAqyg1y8wNwSBRC2GJf/tBiU3iqIsxRUM5hti082FgDP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWsujACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLehAAgxNcRSZZ5461IiAWw6aEe93jtfbuaaKTcn6zqWUZMPU2juOB\r\nY2L+copS7am7GbbvASSn4sTPZk1nQU+X7xX6uUTtMfoI3mQO2CwKl/Zvh6dz\r\nFWW6SA5elIypw7k4UDtjlevg2wqNN9g1V3ApUwJF/FTK5GPm5VdilxWe2OYG\r\nUtluTzUpukhay+PW3oqmkNrnkeyCLo+vKEOW16nPbP7TaHZCHqBPc4Uoqr2t\r\ngjwF2UMgWJeGYr1TUlBUdIVuL2GNfOidtumdnqIdOlF5RdIOxtpdhYkTIKg9\r\nrwwOS2yBRS3PB7jIZi3bqYBWEiS4kjaWxvQpFARPFOqeAAjyX1XoPYNUswcf\r\nVv0GJ/dr7Tn8PKz0HHc/Fg05069Il5k4QrSQ/l8zlV3ZI+DdVTkxvjlVqCrV\r\nOuK/Hec/dzJUCvrtvKR+TvtwzpRA4qamn2vNwd43wA2hQWFqxQNMA8TayCg+\r\nSu6sd16Lq56Amt216IiSy3uA2mMBUcEb1p1byweXZSGClOSKNeQONjbRrnQG\r\naT/lSzcGc3EAQTAy33ruy9nSA7EDuN+v823DDfKJmExNbRhUvETtCWEsWneh\r\nMH/T6ZON1vA4QiXOWHzOb1N7PIbN1c+Xqgi9dcSmUPytdd0HST99qq6+sB8z\r\nD7KyKSE7ySYNrxN1aMprsC+hx6o5d8C0zkg=\r\n=K4y+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"cc35ad1943f91b0559438a832ffb8d72215558d5","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9-unstable.15_1666894755445_0.050192885389198416","host":"s3://npm-registry-packages"}},"2.1.9":{"name":"aws-amplify-vue","version":"2.1.9","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.9","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"5f2a3044a986a4f24c0f8b024a9d9654e31af93c","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.9.tgz","fileCount":47,"integrity":"sha512-TyizMyr2E8pznigkKwkgzf2pq8a0N82fMQNcrczZndxheR2TSeYvu0Rj3ENPdcmYAaf2dx8YGbPWF4Y2No3X0w==","signatures":[{"sig":"MEUCIE7cc5fybI2H8zc3UoLL2gKFI5CHb4axkr5gbZiZMCpWAiEA4AddkgyQhhcGvImw3Fknu7D1dSbPHMD89Uh0JZBrYbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWwHkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS4Q/+I0rCbD3GiYOkJayKryaAq6yy0uKeOqecJPs0aOLQQ1hqPOFH\r\nKZK8zDg9u4vltwXPDabPUCVusLCyzGwMrkOP3m7UpQEtQP3T4YvozNPZkKPW\r\nOPPm+bzTN5Me/QbDk7ILeIrgco7+lad/8Q0Rg3wA6ivc3NkrcuRysQaOALAC\r\n8GCquQrgzoIUapWYmaZmbfpWSOcidjLJwncImDlyOwTDW8x2Gv0Y/WuO6QKN\r\nTtfkE34O7OkXLvq9e4qyBPpADcs8RqZW21+HnNtLMxe0A52PPqZLqxHrA2YM\r\n7nzD+h+LpWhPWPzntzs3a2TBIitb+DKDtGCIVgjWGXiTc+Fg5sCK/EvKWnvu\r\nb+XDMSQDUaeLTjOXhXcIgSPjyYErSLs9Iydg9OXbQA0OlgD2BTkG9d7VIHHQ\r\nqnNicUVNA3dba+J2WMqN4C9gDl7+UDZAEMCU74jMurKcfiMRxyrHVHlJlkpc\r\ngOaUuMz+HOBkoQjohbByEw3zm0WHnbsxDtkHt8jGLefYlXMlM8gxjDGqSAIM\r\n57gV/+hKR3/MvVUi2B8xUvcN/FpBVO8uMuwsHzQZ2xCGh8AwSRHqsn3HDW+u\r\nAYLcGmIDLxPgkkjw1auAOKe+CCeZYlHljxXBbvwKfzFlRc66wxUBQZ4ti2Y8\r\nvkE0FIgp0Om4WiRS2enCaDCR5JxosEFoR8Y=\r\n=M8rE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","gitHead":"745cf5462e07317da9f404f39d8707681463a701","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"deprecated":"The 'aws-amplify-vue' package has been deprecated. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.9_1666908644377_0.12396973464175454","host":"s3://npm-registry-packages"}},"2.1.10-unstable.1":{"name":"aws-amplify-vue","version":"2.1.10-unstable.1","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.10-unstable.1","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"9e5fc12718ee5a395b72efb7dc4be9adb96a6981","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.10-unstable.1.tgz","fileCount":47,"integrity":"sha512-dbLvkg4k+aCm3gG/9mUREifIZZrbg7Zj85E/32x6vMJr7rh2MaMOnNcgoELP9AzHlhSq2A/fjB8Q9nxC1hYO/g==","signatures":[{"sig":"MEQCIBPQNbleoBGvV1x0Hs0LhWP76ZflbLLEmmuvZ+Z1mWvqAiALk30byvD6u2Bx3CwAasNC+s8pzqcP7aWKbp5GCdCMYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYUnyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG4g//e7C4TyfI0PCIY/giVHky9RQl+8VeWMd5h069wBwr7IUPR241\r\n7eCvO/pZC7NYPazu9thQhIHFNFkEugMhpLQtkGNlfQISCM1Wkc24lgPWysz1\r\nWvdjiBHcZQZbpOEK92QXuqv+PeomFhJ4mEcDxg0NhpxmKvLVT1HnaR0ZfpEz\r\nNxiOvJFraThIXcctxZF9rmjHEEMLJdgYb0nd5bLqB120hovZEasvjb9EapTZ\r\ncKbXGCqDd0u9SUxGg30l8CmrKpsyDeXmxoIrAR3KQgcggshvZyt2YPQnjC0L\r\nwzsff0nCanpzm4buZABMbflcz3xBeve9/mU7SCLZCb4UxvwGHEVIdY8F4PnZ\r\nlnfzRDIDEdI4WLo1PSh6IJpBdtAraK9+WUWKLemkRyvf13bD/bYMBAAWQkO4\r\n/5py1PL3YAY4cj6Hgb7Xj2KJV2v+wsIOEjpo3t0RG5XwVfHQ0HQw2QcxSQfB\r\nhqdm3YaJ3mZgLV9cHIfqrFfvCuiX2nrjPNJ4KOv0ezKqmkgvpb4Qx4o8uefC\r\nISSQyuCKzzH6WZ2+8ZEOnYutrLjHFF8K3GV7yvqbNvCNkThc9IhV4t3dMtvc\r\n3DQTkCbgJw6NQsIZUotKgrwpOE5LTpjIuWD1pI3FupwOijgJ7/Z//J25RzQz\r\nsTzYbvj1W+8G1Ri8fMCaquicDa/p0SU083U=\r\n=LCWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"dabf01a76ea7d6133fe3d32fc24a9025c0b03c8f","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.10-unstable.1_1667320305758_0.6333450523283071","host":"s3://npm-registry-packages"}},"2.1.10-unstable.2":{"name":"aws-amplify-vue","version":"2.1.10-unstable.2","author":{"name":"Amazon Web Services"},"license":"Apache-2.0","_id":"aws-amplify-vue@2.1.10-unstable.2","maintainers":[{"name":"amplify-data-dev-npm","email":"amplify-data-dev+npm@amazon.com"},{"name":"amplify-studio-uibuilder","email":"aws-amplify-uibuilder@amazon.com"},{"name":"amplify-codegen","email":"amplify-codegen+npm@amazon.com"},{"name":"mlabieniec","email":"michaellabieniec@gmail.com"},{"name":"amzn-oss","email":"osa-3p@amazon.com"},{"name":"undefobj","email":"rthrelkeld1980@gmail.com"},{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},{"name":"manuel.iglesias","email":"manuel.iglesias@gmail.com"},{"name":"thaddmt","email":"thaddmt@gmail.com"},{"name":"mattsb42-aws","email":"bullocm@amazon.com"}],"dist":{"shasum":"b44c98a900483aaa154241ef99c556f83dc2f720","tarball":"https://registry.npmjs.org/aws-amplify-vue/-/aws-amplify-vue-2.1.10-unstable.2.tgz","fileCount":47,"integrity":"sha512-axCymy2gTXzhwibAYq1q+OMO82DqOSBfDdD4qy5Y8XDydPytYSWhfuH5rJHG3DAtMEH8yyJuqZuvxfy2q0AeoQ==","signatures":[{"sig":"MEUCIQCHmf3Rvn6XgsLJRL3K6deFJDz2ykynRl2XBpYTClQMCQIgHyC+2xXjEg3bMbwsLDwgZV32kloiv9RQpS+Y5rS++is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2980475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYthZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz6w/+Keku2vYC4dIjC9Fv9zsjtjxfnUg+OWYDyYSL5iZHPOmyMZIb\r\nozy/bPamJzd0xzxSbBWXRKLwTfGqfGwPpFbOWRP+WgR1doKVeRed8nVwm1Bb\r\nBA9y/7cTXpKdOLgvM/5/BB8B/o7uCOlILhVJ700FwthTPX1uoG93QRSey3n/\r\nCfpvlWmo0JZp1EtDUXEgdaTfnaqI+GuyZR3NtJArV6p/wWxLEGISjjqfAwsE\r\nX4DkURGtq5LFm5u9ghXLkhZrS7AtR8oFDz6ylnF5xd95Zm17R0fMB6vPVu2w\r\nQ+w3Duk4uqWUgQH9kKi4oAA7crU3MnmBckdNGpf/p3byO5qhfWeGOcDJBPy+\r\ns8Qx5+7C6/jx7H/EOk/p3zFPD78FSa+SLcc3VRUUKuKUihVh9t1HdRMF2VzC\r\nMM4n8QRXulo3jP+Bc+nJxktExJclTJsAb0YlY8Msr7wDK5yVB7LQx4JaqyAx\r\n7bepEHg/LYMErhXIyObKXFK7AHLEbJF1xgJ77FRLkr0M2qkcf8fIxHi+bZ5b\r\nq0UL3m3I8F9gsFLbXKwtQvGrBkqu/TAgT1AB9dhgrRGmqhprwtIMg6krdjc7\r\n0UcBUsAixqPR5QJIvYEIVFjFmvttiz81Bnq93dOgxEaj9q6jv6trPc6/OOdd\r\n5+E6dQK6xE/MX8BeFgJNJszxtnilb3x1Zwo=\r\n=M4LV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/aws-amplify-vue.common.js","readme":"# AWS Amplify Package - aws-amplify-vue\n\nThe `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.\n\nIt is intended for use with Vue applications using version 2.5 or above, and was created using the Vue 3.0 CLI.\n\n## Setup\n\nIn your Vue app, install the following:\n\n```\nnpm i aws-amplify aws-amplify-vue\n```\n\nThen, alter main.js:\n\n```\nimport Amplify, * as AmplifyModules from 'aws-amplify';\nimport { AmplifyPlugin } from 'aws-amplify-vue';\nimport aws_exports from './aws-exports';\nAmplify.configure(aws_exports)\n\nVue.use(AmplifyPlugin, AmplifyModules);\n\n// It's important that you instantiate the Vue instance after calling Vue.use!\n\nnew Vue({\n  render: h => h(App)\n}).$mount('#app')\n\n```\n\nIn App.vue:\n\n```\n<script>\nimport { components } from 'aws-amplify-vue'\n\nexport default {\n  name: 'app',\n  components: {\n    ...<yourOtherComponents>,\n    ...components\n  }\n}\n</script>\n\n```\n\n## AmplifyEventBus\n\nThe aws-amplify-vue package implements a Vue EventBus for emitting and listening to events within it's components. The events emmitted by the components are listed within the documentation for each individual component.\n\nTo listen to these events within one of your components, import the EventBus:\n\n```\nimport { AmplifyEventBus } from 'aws-amplify-vue';\n```\n\nThen, register an event listener (potentially within a lifecycle hook):\n\n```\nAmplifyEventBus.$on('authState', info => {\n  console.log(`Here is the auth event that was just emitted by an Amplify component: ${info}`)\n});\n```\n\n## AmplifyPlugin\n\nThe aws-amplify-vue package provides a Vue plugin to access the Amplify library. You installed the plugin when you set up your application:\n\n`Vue.use(AmplifyPlugin, AmplifyModules);`\n\nThis makes the Amplify library available to the aws-amplify-vue components as well as to your application. Please note that you can restrict the modules that are made available to the plugin by passing only specific modules in the second argument of `Vue.use` call.\n\n### Using the AmplifyPlugin\n\nTo call the Amplify library, simply use `this.$Amplify.` followed by whichever module you wish to use.\n\n## Authentication Components\n\n### Authenticator\n\nThe Authenticator component provides basic login/logout functionality for your application, as well confirmation steps for new user registration and user login. It uses the following components as children:\n\n- SignIn\n- ConfirmSignIn\n- SignUp\n- ConfirmSignUp\n- ForgotPassword\n\nUsage: `<amplify-authenticator></amplify-authenticator>`\n\nConfig:\n\n```\n<amplify-authenticator v-bind:authConfig=\"authConfig\"></amplify-authenticator>\n```\n\n| Attribute                               | Type   |\n| --------------------------------------- | ------ |\n| [confirmSignInConfig](#confirmsignin)   | object |\n| [confirmSignUpConfig](#confirmsignup)   | object |\n| [forgotPasswordConfig](#forgotpassword) | object |\n| [signInConfig](#signinconfig)           | object |\n| [signUpConfig](#signupconfig)           | object |\n\n\\* The attributes above reference the config objects for the components that are nested inside Authenticator. See the individual components for details.\n\nEvents: None\n\n### SignIn\n\nThe SignIn component provides your users with the ability to sign in.\n\nUsage: `<amplify-sign-in></amplify-sign-in>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:signInConfig=\"signInConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                             | Default   | Required |\n| --------- | ------ | --------------------------------------- | --------- | -------- |\n| header    | string | the component header                    | 'Sign In' | no       |\n| username  | string | the default value of the username field | ''        | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully signs in without answering an MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'confirmSignIn')`: Emitted when a user successfully provides their credentials but is then asked to answer and MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'forgotPassword')`: Emitted when a user clicks the 'Forgot Password' button.\n- `AmplifyEventBus.$emit('authState', 'signUp')`: Emitted when a user clicks 'Back to Sign Up'.\n\n### ConfirmSignIn\n\nThe ConfirmSignIn component provides your users with the ability to answer an MFA challenge.\n\nUsage: `<amplify-confirm-sign-in></amplify-confirm-sign-in>`\n\nConfig:\n\n```\n<amplify-confirm-sign-in v-bind:confirmSignInConfig=\"confirmSignInConfig\"></amplify-confirm-sign-in>\n```\n\n| Attribute | Type   | Description                                         | Default   | Required |\n| --------- | ------ | --------------------------------------------------- | --------- | -------- |\n| header    | string | the component header                                | 'Sign In' | no       |\n| user      | object | the user who is stepping through the signin process | N/A       | yes      |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedIn')`: Emitted when a user successfully answers their MFA challenge.\n- `AmplifyEventBus.$emit('authState', 'signIn');`: Emitted when a user clicks 'Back to Sign In'.\n\n### SignUp\n\nThe SignUp component provides your users with the ability to sign up.\n\nUsage: `<amplify-sign-up></amplify-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                 | Default                     | Required |\n| ------------ | ------ | --------------------------- | --------------------------- | -------- |\n| header       | string | the component header        | 'Sign Up'                   | no       |\n| signUpFields | array  | [see below](#signup-fields) | [see below](#signup-fields) | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'confirmSignUp')`: Emitted when a user successfully enters their information but has not yet completed a required verification step.\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully provides their information and does not need to complete a required verification step, or when they click 'Back to Sign In'.\n\n### ConfirmSignUp\n\nThe ConfirmSignUp component provides your users with the ability to verify their identity.\n\nUsage: `<amplify-confirm-sign-up></amplify-confirm-sign-up>`\n\nConfig:\n\n```\n<amplify-sign-in v-bind:confirmSignUpConfig=\"confirmSignUpConfig\"></amplify-sign-in>\n```\n\n| Attribute | Type   | Description                               | Default           | Required |\n| --------- | ------ | ----------------------------------------- | ----------------- | -------- |\n| header    | string | the component header                      | 'Confirm Sign Up' | no       |\n| username  | string | the username of the user who is signingup | ''                | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully completes their verification step or clicks 'Back to Sign In'.\n\n### ForgotPassword\n\nThe ForgotPassword component provides your users with the ability to reset their password.\n\nUsage: `<amplify-forgot-password></amplify-forgot-password>`\n\nConfig:\n\n```\n<amplify-forgot-password v-bind:forgotPasswordConfig=\"forgotPasswordConfig\"></amplify-forgot-password>\n```\n\n| Attribute | Type   | Description          | Default           | Required |\n| --------- | ------ | -------------------- | ----------------- | -------- |\n| header    | string | the component header | 'Forgot Password' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signIn')`: Emitted when a user successfully resets their password or clicks 'Back to Sign In'.\n\n### SignOut\n\nThe SignOut component provides your users with the ability to sign out.\n\nUsage: `<amplify-sign-out></amplify-sign-out>`\n\nConfig:\n\n```\n<amplify-sign-out v-bind:signOutConfig=\"signOutConfig\"></amplify-sign-out>\n```\n\n| Attribute     | Type   | Description                                 | Default    | Required |\n| ------------- | ------ | ------------------------------------------- | ---------- | -------- |\n| msg           | string | message displayed above the sign out button | null       | no       |\n| signOutButton | string | text that appears in the sign out button    | 'Sign Out' | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('authState', 'signedOut')`: Emitted when a user successfully signs out.\n\n### SetMFA\n\nThe SetMFA component provides your users with the ability to set their preferred Multifactor Authentication (MFA) method. It has the ability to show three options - SMS Text Message, TOTP, or None (depending on the options that you pass into it).\n\nUsage: `<amplify-set-mfa></amplify-set-mfa>`\n\nConfig:\n\n```\n<amplify-set-mfa v-bind:mfaConfig=\"mfaConfig\"></amplify-set-mfa>\n```\n\n| Attribute         | Type     | Description                                                         | Default                                                                                                        | Possible Values       | Required |\n| ----------------- | -------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | -------- |\n| mfaDescription    | string   | description of MFA for your users                                   | AWS Multi-Factor Authentication (MFA) adds an extra layer of protection on top of your user name and password. | N/A                   | no       |\n| mfaTypes          | array    | an array of MFA types which will result in a radio button selection | []                                                                                                             | 'SMS', 'TOTP', 'None' | no       |\n| tokenInstructions | string   | instructions for decoding the QR code used with TOTP                | 'Scan the QR Code with your phone camera or authentication app to get the MFA code.'                           | N/A                   | no       |\n| smsDescription    | string   | label for SMS radio button                                          | 'SMS text messaging (receive a code on your mobile device)'                                                    | N/A                   | no       |\n| totpDescription   | string   | label for TOTP radio button                                         | 'One-time password (use a QR code and MFA app to save a token on your mobile device)'                          | N/A                   | no       |\n| noMfaDescription  | string   | label for 'None' radio button                                       | 'Do not enable MFA'                                                                                            | N/A                   | no       |\n| cancelHandler     | function | function called when user clicks on 'Cancel' button                 | None                                                                                                           | N/A                   | no       |\n\nEvents: None\n\n### SignUp Fields\n\nThe `aws-amplify-vue` SignUp component allows you to programatically define the user input fields that are displayed to the user. Information entered into these fields will populate the user's record in your User Pool.\n\nUsage:\n\n```\n<amplify-sign-up v-bind:signUpConfig=\"signUpConfig\"></amplify-sign-up>\n```\n\n| Attribute    | Type   | Description                                                   | Possible Values                |\n| ------------ | ------ | ------------------------------------------------------------- | ------------------------------ |\n| label        | string | label for the input field                                     | N/A                            |\n| key          | string | key name for the attribute as defined in the User Pool        | N/A                            |\n| required     | bolean | whether or not the field is required                          | N/A                            |\n| displayOrder | number | number indicating the order in which fields will be displayed | N/A                            |\n| type         | string | the type attribute for the html input element                 | 'string', 'number', 'password' |\n\nBy default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or 'required' booleans for these fields by passing objects with 'username', 'password', 'email' or 'phone_number' keys in the signUpConfig.signUpFields array.\n\nFields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.\n\n## API Components\n\n### Connect\n\nThe Connect component can be used to execute a GraphQL query, subscription, or mutation. You can execute GraphQL queries by passing your queries in `query` or `mutation` attributes. For example:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\nexport default {\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    }\n  }\n}\n</script>\n```\n\nYou can also subscribe to changes in query data via the `subscription` and `onSubscriptionMsg` attributes:\n\n```\n<template>\n  <div class=\"home\">\n      <amplify-connect :query=\"listTodosQuery\"\n          :subscription=\"createTodoSubscription\"\n          :onSubscriptionMsg=\"onCreateTodo\">\n        <template slot-scope=\"{loading, data, errors}\">\n          <div v-if=\"loading\">Loading...</div>\n\n          <div v-else-if=\"errors.length > 0\">{{ errors }}</div>\n\n          <div v-else-if=\"data\">\n            <TodoList :items=\"data.listTodos.items\"></TodoList>\n          </div>\n        </template>\n      </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\nimport TodoList from '@/components/TodoList.vue';\n\nconst ListTodosQuery = `query ListTodos {\n    listTodos {\n      items {\n        id\n        name\n      }\n    }\n  }`;\n\n  const OnCreateTodoSubscription = `subscription OnCreateTodo {\n      onCreateTodo {\n        id\n        name\n      }\n    }`;\n\nexport default {\n  name: 'home',\n  components: {\n    TodoList,\n    ...components\n  },\n  computed: {\n    listTodosQuery() {\n      return this.$Amplify.graphqlOperation(ListTodosQuery);\n    },\n    createTodoSubscription() {\n      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);\n    }\n  },\n  methods: {\n    onCreateTodo(prevData, newData) {\n      console.log('New todo from subscription...');\n      const newTodo = newData.onCreateTodo;\n      prevData.data.listTodos.items.push(newTodo);\n      return prevData.data;\n    }\n  }\n}\n</script>\n```\n\nThe Connect component also supports mutations by passing a GraphQL query and (optionally) variables via the `mutation` attribute. Call the provided `mutate` method to trigger the operation. `mutation` returns a promise that resolves with the result of the GraphQL mutation, use `@done` to listen for it to complete.\n\n```\n<template>\n  <div>\n    <amplify-connect :mutation=\"createTodoMutation\"\n        @done=\"onCreateFinished\">\n      <template slot-scope=\"{ loading, mutate, errors }\">\n        <input v-model=\"name\" placeholder=\"item name\" />\n        <input v-model=\"description\" placeholder=\"item description\" />\n        <button :disabled=\"loading\" @click=\"mutate\">Create Todo</button>\n      </template>\n    </amplify-connect>\n  </div>\n</template>\n\n<script>\nimport { components } from 'aws-amplify-vue';\n\nconst CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {\n    createTodo(input: { name: $name, description: $description }) {\n      id\n      name\n    }\n  }`;\n\nexport default {\n  name: 'NewTodo',\n  components: {\n    ...components\n  },\n  data() {\n    return {\n      name: '',\n      description: ''\n    }\n  },\n  computed: {\n    createTodoMutation() {\n      return this.$Amplify.graphqlOperation(CreateTodoMutation,\n        { name: this.name, description: this.description });\n    }\n  },\n  methods: {\n    onCreateFinished() {\n      console.log('Todo created!');\n    }\n  }\n}\n</script>\n```\n\n## Storage Components\n\n### PhotoPicker\n\nThe PhotoPicker component provides your users to select and preview a file for upload to S3.\n\nUsage: `<amplify-photo-picker></amplify-photo-picker>`\n\nConfig:\n\n```\n<amplify-photo-picker v-bind:photoPickerConfig=\"photoPickerConfig\"></amplify-photo-picker>\n```\n\n| Attribute   | Type   | Description                                                            | Default            | Required |\n| ----------- | ------ | ---------------------------------------------------------------------- | ------------------ | -------- |\n| header      | string | the component header                                                   | 'File Upload'      | no       |\n| title       | string | text displayed in the upload button                                    | 'Upload'           | no       |\n| accept      | string | a string representing the 'accept' attribute in the html input element | '_/_'              | no       |\n| path        | string | S3 path for the file upload                                            | N/A                | yes      |\n| defaultName | string | the name of the file when uploaded to S3                               | original file name | no       |\n\nEvents:\n\n- `AmplifyEventBus.$emit('fileUpload', img)`: Emitted when a file is uploaded (includes the image path)\n\n### S3Album\n\nThe S3Album component displays the image files from the provided S3 path.\n\nUsage: `<amplify-s3-album path=\"uploads\"></amplify-s3-album>`\n\nProps:\n\nThe S3Album component does not have a config object like most other amplify-vue components. Instead it receives the S3 directory path as a string. The path is required.\n\nEvents: None\n\n### S3Image\n\nThe S3Image component displays a single image from the provided path.\n\nUsage: `<amplify-s3-image imagePath=\"path\"></amplify-s3-image>`\n\nProps:\n\nThe S3Image component does not have a config object like most other amplify-vue components. Instead it receives the S3 image path as a string. The path is required.\n\nEvents: None\n\n## Interaction Components\n\n### Chatbot\n\nThe Chatbot component allows your users to interact with an Amazon Lex chatbot.\n\nUsage: `<amplify-chatbot></amplify-chatbot>`\n\nConfig:\n\n```\n<amplify-chatbot v-bind:chatbotConfig=\"chatbotConfig\"></amplify-chatbot>\n```\n\n| Attribute     | Type    | Description                                                                                   | Default   | Required |\n| ------------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------- |\n| bot           | string  | the name of the chatbot as defined in your Amplify configuration under \"aws_bots_config.name\" | N/A       | yes      |\n| clearComplete | boolean | specifies whether the chat messages clear out at the end of the chat session                  | true      | no       |\n| botTitle      | string  | the name of the chatbot component in your frontend app                                        | 'Chatbot' | no       |\n\nIf not in your aws.exports file, the bot can also be defined in the AWS configure method:\n\n```\n Interactions: {\n    bots: {\n      \"BookTrip\": {\n        \"name\": \"BookTrip\",\n        \"alias\": \"$LATEST\",\n        \"region\": \"us-east-1\",\n      },\n    }\n  }\n```\n\nEvents:\n\n- `AmplifyEventBus.$emit('chatComplete', this.options.botTitle)`: Emitted when a chat session has been completed (only if the clearComplete options is 'true')\n","gitHead":"ec59a62d8534481938383cd1c1085d7f7bf49241","postcss":{"plugins":{"autoprefixer":{}}},"scripts":{"lint":"vue-cli-service lint","test":"vue-cli-service test:unit","build":"vue-cli-service build --target lib --name aws-amplify-vue ./src/Amplify.vue","debug":"node --debug-brk --inspect ./node_modules/.bin/jest -w 1 -i","serve":"vue-cli-service serve","build-stats":"vue-cli-service build --report --target lib --name aws-amplify-vue ./src/Amplify.vue"},"_npmUser":{"name":"aws-amplify-ops","email":"aws-amplify@amazon.com"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","directories":{},"_nodeVersion":"16.13.1","browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"vue":"2.6.11","qrcode.vue":"^1.6.0","vue2-filters":"^0.7.2","lodash.orderby":"^4.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"babel-core":"7.0.0-bridge.0","postcss-loader":"^2.1.6","@aws-amplify/ui":"1.0.10-unstable.0","@vue/test-utils":"1.0.0-beta.29","@vue/cli-service":"^3.0.1","@vue/cli-plugin-babel":"^3.0.1","vue-template-compiler":"2.6.11","@vue/cli-plugin-unit-jest":"^3.0.1"},"_npmOperationalInternal":{"tmp":"tmp/aws-amplify-vue_2.1.10-unstable.2_1667422297376_0.39047277193366914","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-09-12T01:39:34.595Z","modified":"2025-05-22T20:13:03.197Z","2.0.177":"2018-08-30T22:33:42.672Z","0.1.1-beta.0":"2018-09-12T01:39:34.885Z","0.1.1-beta.1":"2018-09-12T23:13:49.459Z","0.1.1-beta.2":"2018-09-14T21:17:07.805Z","0.1.1-beta.3":"2018-09-15T01:46:17.132Z","0.1.1-beta.4":"2018-09-16T02:10:01.643Z","0.1.1-beta.5":"2018-09-19T16:42:45.079Z","0.1.1-beta.6":"2018-09-24T15:44:29.791Z","0.1.1-unstable.0":"2018-09-26T22:46:03.867Z","0.1.1":"2018-09-27T00:44:38.665Z","0.1.2-unstable.0":"2018-10-01T18:14:22.585Z","0.1.2-unstable.1":"2018-10-02T16:53:20.970Z","0.1.2":"2018-10-02T23:42:09.499Z","0.1.3-unstable.0":"2018-10-03T00:19:11.201Z","0.1.3-unstable.1":"2018-10-03T22:58:59.383Z","0.1.3":"2018-10-04T23:34:30.262Z","0.1.4-unstable.0":"2018-10-05T20:10:41.909Z","0.1.4-unstable.1":"2018-10-10T16:18:45.307Z","0.1.4":"2018-10-17T20:39:53.133Z","0.1.5-unstable.0":"2018-10-24T17:35:28.900Z","0.1.5-unstable.1":"2018-10-29T20:17:31.374Z","0.1.5":"2018-10-29T23:13:31.578Z","0.1.6-beta.0":"2018-10-30T17:06:53.060Z","0.1.6-unstable.0":"2018-10-30T21:35:27.092Z","0.1.6":"2018-11-01T22:04:33.079Z","0.2.1-beta.0":"2018-11-02T20:24:43.271Z","0.1.7-unstable.0":"2018-11-07T19:40:08.890Z","0.1.7-unstable.1":"2018-11-09T16:35:37.466Z","0.1.7":"2018-11-12T21:57:35.274Z","0.2.1-beta.1":"2018-11-14T00:35:21.442Z","0.2.1-beta.2":"2018-11-14T20:38:45.298Z","0.1.8-unstable.0":"2018-11-19T20:05:03.100Z","0.2.1-beta.3":"2018-11-19T21:52:59.467Z","0.1.8-unstable.1":"2018-11-21T20:34:20.441Z","0.1.8-unstable.2":"2018-11-26T18:09:17.485Z","0.1.8-unstable.3":"2018-11-30T18:13:34.039Z","0.1.8-unstable.4":"2018-11-30T22:10:48.513Z","0.1.8":"2018-12-03T23:40:10.434Z","0.1.9-unstable.0":"2018-12-05T23:29:44.005Z","0.1.9":"2018-12-06T00:45:09.576Z","0.1.10-unstable.0":"2018-12-06T01:00:46.033Z","0.1.10-unstable.1":"2018-12-06T22:50:55.894Z","0.1.10-unstable.2":"2018-12-06T23:53:39.557Z","0.1.10":"2018-12-07T22:13:04.090Z","0.1.11-unstable.0":"2018-12-07T22:28:16.920Z","0.2.1-unstable.0":"2018-12-10T21:30:45.505Z","0.2.1-unstable.1":"2018-12-11T18:55:31.217Z","0.2.1":"2018-12-13T22:24:31.846Z","0.2.2-unstable.0":"2018-12-13T22:48:52.746Z","0.2.2":"2018-12-14T02:50:50.645Z","0.2.3":"2018-12-14T05:33:13.528Z","0.2.3-unstable.0":"2018-12-14T21:37:53.365Z","0.2.3-unstable.1":"2018-12-14T21:57:25.303Z","0.2.3-unstable.2":"2018-12-14T23:22:25.800Z","0.2.4":"2018-12-15T00:17:00.856Z","0.2.5-unstable.0":"2018-12-17T17:31:27.205Z","0.2.5":"2018-12-26T18:56:46.500Z","0.2.6-unstable.0":"2019-01-16T18:28:00.266Z","0.2.6-beta.0":"2019-01-16T22:38:18.316Z","0.2.6-unstable.1":"2019-01-18T22:12:41.821Z","0.2.6-beta.1":"2019-01-22T21:36:28.209Z","0.2.6-unstable.2":"2019-01-23T20:50:17.571Z","0.2.6-unstable.3":"2019-02-11T23:00:37.089Z","0.2.6-unstable.4":"2019-02-18T21:10:04.949Z","0.2.6-unstable.5":"2019-02-20T20:51:32.282Z","0.2.6-ops-test.1":"2019-02-22T18:52:08.111Z","0.2.6-rn-hosted-ui2.1":"2019-03-03T18:37:45.050Z","0.2.6-rn-hosted-ui2.2":"2019-03-03T18:43:28.191Z","0.2.6-rn-hosted-ui2.3":"2019-03-03T18:46:10.485Z","0.2.6":"2019-03-04T22:16:33.819Z","0.2.7-unstable.0":"2019-03-05T17:41:58.893Z","0.2.7":"2019-03-06T00:58:44.395Z","0.2.8-unstable.0":"2019-03-11T21:18:22.587Z","0.2.8":"2019-03-28T16:24:32.190Z","0.2.9-unstable.0":"2019-04-02T21:42:06.854Z","0.2.9":"2019-04-04T02:35:57.844Z","0.2.9-beta.0":"2019-04-04T03:13:21.968Z","0.2.9-beta.1":"2019-04-04T22:46:32.266Z","0.2.9-beta.2":"2019-04-05T19:23:50.191Z","0.2.9-beta.3":"2019-04-05T22:59:57.488Z","0.2.9-beta.4":"2019-04-05T23:41:44.384Z","0.2.9-beta.5":"2019-04-06T17:44:20.691Z","0.2.9-beta.6":"2019-04-06T18:23:37.549Z","0.2.9-beta.7":"2019-04-06T18:44:33.149Z","0.2.9-beta.8":"2019-04-06T19:39:23.164Z","0.2.10-unstable.0":"2019-04-26T17:04:50.214Z","0.2.10-unstable.1":"2019-04-26T21:18:51.565Z","0.2.10":"2019-05-06T18:56:46.358Z","0.2.11-unstable.0":"2019-05-09T23:36:20.565Z","0.2.11-unstable.1":"2019-05-13T23:15:51.674Z","0.2.11":"2019-05-14T19:29:55.769Z","0.2.12-beta.0":"2019-05-16T17:38:36.589Z","0.2.12-unstable.0":"2019-05-24T17:26:24.381Z","0.2.12-unstable.1":"2019-05-24T21:01:38.091Z","0.2.12-unstable.2":"2019-05-31T22:25:12.414Z","0.2.12-unstable.3":"2019-06-06T23:52:57.642Z","0.2.12":"2019-06-17T20:14:57.099Z","0.2.13-unstable.0":"2019-07-09T18:41:45.825Z","0.2.13":"2019-07-09T20:43:54.888Z","0.2.14-unstable.30":"2019-07-22T22:03:22.166Z","0.2.14":"2019-07-30T22:17:17.311Z","0.2.15":"2019-08-21T21:30:39.966Z","0.2.14-preview.54":"2019-08-21T22:03:10.671Z","0.2.15-unstable.36":"2019-09-05T00:37:08.379Z","0.2.17":"2019-09-05T00:51:42.882Z","0.2.18-unstable.10":"2019-09-13T15:58:57.664Z","0.2.18-unstable.12":"2019-09-19T00:08:23.015Z","0.2.18-unstable.13":"2019-09-19T22:54:12.024Z","0.2.18-unstable.15":"2019-09-20T17:30:34.026Z","0.2.18-unstable.19":"2019-09-26T22:08:21.533Z","0.2.18-unstable.20":"2019-09-30T20:41:11.883Z","0.2.18-unstable.21":"2019-10-01T03:33:19.271Z","0.2.18-unstable.22":"2019-10-01T14:46:57.607Z","0.2.18-unstable.23":"2019-10-01T14:56:16.398Z","0.2.18-unstable.24":"2019-10-01T17:28:53.287Z","0.2.18-unstable.25":"2019-10-01T17:43:15.624Z","0.2.18-unstable.26":"2019-10-01T20:53:28.980Z","0.2.18-unstable.27":"2019-10-02T20:34:28.046Z","0.2.18-unstable.28":"2019-10-02T20:46:40.702Z","0.2.18-unstable.29":"2019-10-04T20:02:52.387Z","0.2.18-unstable.30":"2019-10-07T16:10:09.911Z","0.2.18-unstable.31":"2019-10-09T21:43:51.704Z","0.2.18-unstable.32":"2019-10-10T20:17:31.783Z","0.3.0":"2019-10-10T21:53:08.652Z","0.3.2":"2019-10-10T22:27:38.827Z","0.3.3-unstable.0":"2019-10-14T15:11:13.804Z","0.3.3-unstable.1":"2019-10-15T15:19:02.544Z","0.3.3-unstable.2":"2019-10-15T15:34:56.093Z","0.3.3-unstable.3":"2019-10-15T19:40:53.997Z","0.3.3-unstable.5":"2019-10-17T18:02:26.794Z","0.3.3-unstable.6":"2019-10-18T01:41:30.455Z","0.3.3-unstable.7":"2019-10-18T03:04:47.392Z","0.3.3-unstable.8":"2019-10-22T17:41:20.788Z","0.3.3-unstable.9":"2019-10-22T20:05:24.976Z","0.3.3-unstable.10":"2019-10-22T21:08:55.493Z","0.3.3-unstable.11":"2019-10-23T17:46:06.126Z","0.3.3":"2019-10-23T20:43:27.181Z","0.3.4-unstable.0":"2019-10-23T22:41:56.852Z","0.3.4-unstable.1":"2019-10-24T19:07:46.765Z","0.3.4-unstable.2":"2019-10-25T00:19:23.792Z","0.3.4-unstable.3":"2019-10-25T00:31:48.440Z","0.3.4-unstable.4":"2019-10-25T02:08:58.971Z","0.3.4-unstable.5":"2019-10-25T20:27:15.571Z","0.3.4-unstable.7":"2019-10-29T21:40:28.298Z","0.3.4-unstable.10":"2019-10-30T18:27:48.209Z","0.3.4-unstable.11":"2019-10-30T19:01:20.093Z","0.3.4-unstable.12":"2019-10-31T18:13:46.619Z","0.3.4-unstable.13":"2019-10-31T18:34:59.039Z","0.3.4-unstable.14":"2019-10-31T19:33:09.572Z","0.3.4-unstable.15":"2019-11-01T17:50:57.273Z","0.3.4-unstable.16":"2019-11-05T02:06:57.517Z","0.3.4-unstable.17":"2019-11-05T22:44:00.123Z","0.3.4-unstable.18":"2019-11-06T00:25:29.464Z","0.3.4-unstable.19":"2019-11-09T03:00:44.965Z","0.3.4-unstable.20":"2019-11-12T01:07:40.730Z","0.3.4-unstable.21":"2019-11-14T00:31:38.211Z","0.3.4-unstable.22":"2019-11-14T17:05:13.137Z","0.3.4-unstable.23":"2019-11-14T19:59:14.921Z","1.1.0":"2019-11-15T00:01:45.970Z","1.1.1-unstable.0":"2019-11-19T20:39:55.654Z","1.1.1-unstable.4":"2019-11-21T21:59:25.807Z","1.1.1-unstable.5":"2019-11-22T21:32:14.501Z","1.1.1-unstable.6":"2019-11-28T00:56:21.653Z","1.1.1-unstable.7":"2019-12-03T00:28:04.978Z","1.1.1-unstable.8":"2019-12-03T00:42:37.332Z","1.1.1-unstable.9":"2019-12-03T07:29:44.999Z","1.1.1-unstable.10":"2019-12-03T10:08:51.392Z","1.1.1-unstable.11":"2019-12-03T20:31:25.321Z","1.1.1":"2019-12-03T21:06:13.335Z","1.1.2-unstable.0":"2019-12-04T04:06:43.478Z","1.1.2-unstable.1":"2019-12-06T19:36:50.027Z","1.1.2-unstable.2":"2019-12-09T16:48:10.453Z","1.1.2-unstable.3":"2019-12-09T19:36:14.265Z","1.1.2-unstable.4":"2019-12-09T23:00:45.451Z","1.1.2-unstable.5":"2019-12-10T20:01:38.443Z","1.1.2-unstable.6":"2019-12-13T22:38:41.512Z","1.1.2-unstable.7":"2019-12-18T21:18:33.310Z","1.1.2-unstable.9":"2019-12-18T23:18:59.148Z","1.1.2-unstable.10":"2019-12-20T18:54:15.679Z","1.1.2-unstable.11":"2019-12-20T19:58:10.871Z","1.1.2-unstable.12":"2019-12-20T22:12:35.160Z","1.1.2-unstable.13":"2019-12-23T17:45:16.338Z","1.1.2-unstable.14":"2019-12-27T19:20:36.052Z","1.1.2-unstable.15":"2019-12-27T21:40:09.752Z","1.1.2-unstable.16":"2019-12-27T22:28:06.767Z","1.1.2-unstable.17":"2019-12-30T20:15:46.254Z","1.1.2-unstable.18":"2019-12-31T18:27:53.364Z","1.1.2-unstable.19":"2019-12-31T22:19:26.542Z","1.1.2-unstable.20":"2020-01-01T01:19:30.392Z","1.1.2-unstable.21":"2020-01-08T00:42:40.558Z","1.1.2-unstable.22":"2020-01-08T19:05:59.513Z","1.1.2-unstable.23":"2020-01-09T20:28:01.747Z","1.1.2-unstable.24":"2020-01-09T20:37:40.363Z","1.1.2-unstable.25":"2020-01-09T21:58:10.066Z","1.1.2-unstable.27":"2020-01-09T23:13:19.105Z","1.1.2":"2020-01-10T21:16:28.918Z","0.4.0":"2020-01-10T23:04:22.922Z","0.4.2":"2020-01-11T00:20:38.547Z","0.4.4":"2020-01-11T01:00:16.959Z","1.1.3-unstable.0":"2020-01-13T19:05:09.871Z","0.4.1-ui-preview.3":"2020-01-15T01:11:44.799Z","0.4.1-ui-preview.4":"2020-01-15T22:15:16.965Z","0.4.1-ui-preview.5":"2020-01-16T19:04:45.853Z","0.4.1-ui-preview.6":"2020-01-16T22:17:12.122Z","1.1.3-unstable.1":"2020-01-17T18:35:02.947Z","0.4.1-ui-preview.7":"2020-01-21T20:17:21.711Z","1.1.3-unstable.2":"2020-01-21T23:56:01.841Z","1.1.3-unstable.3":"2020-01-22T18:31:43.419Z","1.1.3-unstable.4":"2020-01-22T19:15:40.047Z","1.1.3-unstable.5":"2020-01-22T19:42:09.680Z","1.1.3-unstable.6":"2020-01-22T21:03:07.494Z","1.1.3-unstable.7":"2020-01-22T22:20:30.326Z","1.1.3-unstable.8":"2020-01-22T22:38:31.400Z","1.1.3-unstable.9":"2020-01-22T23:05:26.184Z","1.1.3-unstable.10":"2020-01-22T23:44:36.866Z","0.4.1-ui-preview.8":"2020-01-24T21:51:32.853Z","1.1.3-unstable.11":"2020-01-27T19:26:27.662Z","0.4.1-ui-preview.9":"2020-01-28T22:07:59.385Z","1.1.3-unstable.12":"2020-01-29T18:55:41.451Z","1.1.3-unstable.13":"2020-01-30T18:42:20.844Z","1.1.3-unstable.15":"2020-01-30T21:02:44.855Z","1.1.3-unstable.16":"2020-01-31T18:06:03.889Z","1.1.3-unstable.17":"2020-02-03T22:44:11.436Z","0.4.1-ui-preview.10":"2020-02-04T00:43:04.650Z","1.1.3-unstable.18":"2020-02-04T22:02:45.570Z","1.1.3-unstable.20":"2020-02-07T19:47:18.823Z","1.1.3-unstable.21":"2020-02-07T22:40:13.418Z","1.1.4":"2020-02-07T23:05:55.350Z","0.2.14-preview.104":"2020-02-11T00:02:31.548Z","1.1.5-unstable.1":"2020-02-11T16:14:27.278Z","0.2.14-preview.107":"2020-02-12T00:39:45.643Z","0.4.1-ui-preview.12":"2020-02-12T00:39:54.419Z","1.1.5-unstable.2":"2020-02-12T16:36:49.883Z","1.1.5-rn-datastore.3":"2020-02-12T17:17:16.577Z","0.2.14-preview.108":"2020-02-12T23:18:47.068Z","0.2.14-preview.109":"2020-02-12T23:31:46.468Z","0.2.14-preview.110":"2020-02-13T01:57:13.049Z","1.1.5-unstable.3":"2020-02-13T03:16:27.910Z","1.1.5-unstable.4":"2020-02-14T00:30:42.803Z","0.2.14-preview.112":"2020-02-14T20:35:59.035Z","0.4.1-ui-preview.18":"2020-02-14T21:42:26.815Z","0.4.1-ui-preview.19":"2020-02-15T18:14:24.436Z","0.4.1-ui-preview.20":"2020-02-17T21:42:10.937Z","0.4.1-ui-preview.21":"2020-02-18T02:00:21.777Z","0.2.14-preview.113":"2020-02-18T02:15:55.952Z","0.4.1-ui-preview.22":"2020-02-18T17:47:48.999Z","1.1.5-unstable.7":"2020-02-19T19:52:55.275Z","1.1.5-unstable.8":"2020-02-20T18:44:31.913Z","1.1.5-rn-datastore.4":"2020-02-21T00:02:48.146Z","0.2.14-preview.114":"2020-02-21T23:17:51.800Z","0.4.1-ui-preview.26":"2020-02-21T23:28:46.229Z","0.4.1-ui-preview.27":"2020-02-22T00:23:35.764Z","1.1.5-rn-datastore.5":"2020-02-24T13:16:28.140Z","0.4.1-ui-preview.28":"2020-02-24T20:25:13.756Z","1.1.5-unstable.9":"2020-02-25T14:24:58.270Z","0.4.1-ui-preview.30":"2020-02-27T22:01:25.023Z","1.1.5-rn-datastore.6":"2020-02-27T22:05:59.113Z","1.1.5-unstable.10":"2020-02-28T01:41:01.073Z","1.1.5-unstable.13":"2020-02-28T15:54:03.957Z","1.1.5-unstable.14":"2020-02-28T18:07:07.841Z","0.4.1-ui-preview.31":"2020-02-28T22:01:59.676Z","1.1.5-unstable.15":"2020-02-28T22:58:14.392Z","1.1.5-unstable.16":"2020-02-28T23:35:46.954Z","1.1.5-unstable.17":"2020-03-03T23:10:16.055Z","1.1.5-unstable.19":"2020-03-04T00:33:12.568Z","1.1.5-unstable.18":"2020-03-04T00:40:29.534Z","1.1.5-unstable.20":"2020-03-05T00:09:46.303Z","0.4.1-ui-preview.32":"2020-03-06T22:38:49.001Z","0.2.14-preview.115":"2020-03-11T19:22:29.482Z","0.4.1-ui-preview.34":"2020-03-11T21:13:30.392Z","0.4.1-ui-preview.35":"2020-03-13T00:19:23.111Z","1.1.5-unstable.21":"2020-03-13T05:02:53.318Z","1.1.5-unstable.22":"2020-03-13T19:53:18.475Z","0.2.14-preview.116":"2020-03-13T23:48:00.760Z","0.4.1-ui-preview.36":"2020-03-16T17:43:41.273Z","1.1.5-unstable.23":"2020-03-16T22:05:20.325Z","0.2.14-preview.117":"2020-03-17T18:44:39.214Z","1.1.5-unstable.24":"2020-03-17T20:42:53.392Z","0.2.14-preview.118":"2020-03-17T21:10:27.313Z","1.1.5-unstable.25":"2020-03-18T03:19:38.162Z","0.2.14-preview.119":"2020-03-18T22:17:57.386Z","1.1.5-unstable.27":"2020-03-19T01:59:15.795Z","0.2.14-preview.123":"2020-03-19T18:20:17.741Z","0.4.1-ui-preview.38":"2020-03-19T22:53:47.937Z","0.2.14-preview.124":"2020-03-20T22:13:28.830Z","0.4.1-ui-preview.39":"2020-03-21T02:13:56.465Z","0.2.14-preview.125":"2020-03-23T18:10:34.269Z","1.1.5-unstable.28":"2020-03-24T19:17:59.345Z","0.4.1-ui-preview.40":"2020-03-25T00:30:59.525Z","1.1.5-unstable.31":"2020-03-26T03:10:43.769Z","1.1.5-unstable.32":"2020-03-26T16:51:46.734Z","1.1.5-unstable.33":"2020-03-26T20:28:13.277Z","1.1.5-PR-5187.49":"2020-03-27T00:58:12.532Z","1.1.5-unstable.34":"2020-03-27T01:55:35.290Z","1.1.5-unstable.35":"2020-03-27T02:14:58.479Z","1.1.5-unstable.36":"2020-03-27T02:39:52.512Z","1.1.5-unstable.37":"2020-03-27T20:16:19.017Z","1.1.5-unstable.38":"2020-03-30T20:49:15.807Z","0.2.14-preview.130":"2020-03-30T21:53:47.109Z","2.0.1-preview.0":"2020-03-30T23:51:41.636Z","0.4.1-ui-preview.54":"2020-03-31T02:07:02.008Z","2.1.0":"2020-03-31T23:15:41.441Z","2.1.1-preview.2":"2020-04-01T20:17:50.925Z","2.1.1-unstable.2":"2020-04-01T21:05:23.606Z","2.1.1-unstable.9":"2020-04-01T23:13:21.674Z","2.1.1-unstable.10":"2020-04-02T00:44:55.787Z","2.1.1":"2020-04-02T01:24:52.561Z","2.1.2-unstable.0":"2020-04-02T23:16:06.563Z","2.1.2-unstable.1":"2020-04-03T01:37:11.075Z","2.1.2-unstable.2":"2020-04-03T18:03:53.786Z","2.1.2-unstable.3":"2020-04-03T21:35:51.748Z","2.1.2-unstable.4":"2020-04-03T22:49:49.401Z","2.1.2-unstable.5":"2020-04-06T16:20:44.639Z","2.1.2-unstable.6":"2020-04-06T19:26:47.617Z","2.1.2-unstable.7":"2020-04-06T23:39:19.360Z","2.1.2-unstable.11":"2020-04-07T02:36:58.490Z","2.1.2-unstable.15":"2020-04-07T16:18:10.135Z","2.1.2-unstable.16":"2020-04-07T20:17:17.565Z","2.1.2-unstable.17":"2020-04-07T20:57:17.241Z","2.1.2-unstable.18":"2020-04-08T19:08:08.550Z","2.1.2-unstable.19":"2020-04-08T19:36:08.202Z","2.1.2-unstable.20":"2020-04-08T20:33:44.464Z","2.1.2-unstable.21":"2020-04-08T20:49:27.828Z","2.1.2-unstable.22":"2020-04-08T21:42:14.715Z","2.1.2-unstable.26":"2020-04-10T00:36:03.641Z","2.1.2-unstable.27":"2020-04-10T01:44:03.330Z","2.1.2-unstable.28":"2020-04-10T16:32:35.702Z","2.1.2-unstable.29":"2020-04-10T17:59:55.716Z","2.1.2-unstable.30":"2020-04-10T19:14:18.918Z","2.1.2-unstable.34":"2020-04-10T22:24:24.505Z","2.1.2-unstable.35":"2020-04-13T21:22:34.294Z","2.1.2-unstable.36":"2020-04-13T21:32:51.560Z","2.1.2-unstable.37":"2020-04-14T02:34:28.214Z","2.1.2-unstable.38":"2020-04-14T19:49:36.086Z","2.1.2-unstable.39":"2020-04-15T15:55:48.852Z","2.1.2-unstable.41":"2020-04-16T23:18:10.986Z","2.1.2-unstable.42":"2020-04-16T23:50:53.738Z","2.1.2-unstable.44":"2020-04-17T17:05:01.713Z","2.1.2-unstable.45":"2020-04-18T00:19:22.007Z","2.1.2-unstable.46":"2020-04-18T00:21:30.664Z","2.1.2-unstable.52":"2020-04-21T21:36:59.616Z","2.1.2-unstable.53":"2020-04-21T22:48:06.558Z","2.1.2-unstable.54":"2020-04-22T00:13:20.144Z","2.1.2-unstable.55":"2020-04-22T00:51:04.321Z","2.1.2-unstable.57":"2020-04-22T07:07:22.540Z","2.1.2-unstable.58":"2020-04-22T16:03:06.078Z","2.1.2-unstable.59":"2020-04-22T21:47:13.266Z","2.1.2-unstable.60":"2020-04-22T23:12:57.082Z","2.1.2-unstable.61":"2020-04-23T01:04:55.947Z","2.1.2-unstable.62":"2020-04-23T19:00:27.777Z","2.1.2-unstable.63":"2020-04-23T19:25:34.104Z","2.1.2-unstable.64":"2020-04-23T19:46:24.089Z","2.1.2-unstable.65":"2020-04-23T20:14:24.708Z","2.1.2-unstable.66":"2020-04-23T23:07:12.062Z","2.1.2-unstable.67":"2020-04-23T23:25:45.233Z","2.1.2-unstable.69":"2020-04-24T18:21:34.721Z","2.1.2-unstable.70":"2020-04-24T18:40:55.699Z","2.1.2-unstable.73":"2020-04-24T22:15:55.079Z","2.1.2-unstable.74":"2020-04-24T23:59:13.222Z","2.1.2-unstable.75":"2020-04-25T00:36:29.665Z","2.1.2-unstable.77":"2020-04-27T18:37:00.514Z","2.1.2-unstable.79":"2020-04-27T21:08:47.864Z","2.1.2-unstable.80":"2020-04-27T21:46:54.799Z","2.1.2-unstable.81":"2020-04-27T22:09:13.100Z","2.1.2-unstable.83":"2020-04-28T16:43:09.555Z","2.1.2-unstable.85":"2020-04-28T22:57:54.331Z","2.1.2-unstable.86":"2020-04-28T23:29:15.137Z","2.1.2-unstable.87":"2020-04-29T16:26:40.840Z","2.1.2-unstable.88":"2020-04-29T19:18:33.225Z","2.1.2-unstable.89":"2020-04-29T20:41:42.936Z","2.1.2-unstable.90":"2020-04-29T22:28:17.236Z","2.1.2-unstable.91":"2020-04-29T23:08:25.671Z","2.1.2-unstable.92":"2020-04-30T01:48:04.805Z","2.1.2-unstable.93":"2020-04-30T17:27:04.958Z","2.1.2-unstable.95":"2020-04-30T18:12:08.494Z","2.1.2-unstable.99":"2020-04-30T22:39:00.789Z","2.1.2-unstable.100":"2020-05-01T20:40:54.322Z","2.1.2-unstable.102":"2020-05-01T22:41:07.017Z","2.1.2-unstable.104":"2020-05-02T01:31:43.517Z","2.1.2-unstable.105":"2020-05-04T18:41:34.741Z","2.1.2-unstable.106":"2020-05-05T15:38:35.403Z","2.1.2-unstable.107":"2020-05-05T18:39:50.255Z","2.1.2-unstable.108":"2020-05-05T23:10:52.809Z","2.1.2-unstable.109":"2020-05-06T13:55:06.188Z","2.1.2-unstable.110":"2020-05-06T17:21:41.290Z","2.1.2-unstable.111":"2020-05-06T18:00:52.193Z","2.1.2-unstable.112":"2020-05-06T21:30:37.198Z","2.1.2-unstable.113":"2020-05-07T16:57:07.823Z","2.1.2-unstable.114":"2020-05-07T18:09:45.653Z","2.1.2-unstable.115":"2020-05-08T03:32:41.903Z","2.1.2-unstable.116":"2020-05-08T17:21:53.373Z","2.1.2-unstable.117":"2020-05-08T18:05:19.077Z","2.1.2-unstable.118":"2020-05-08T19:06:58.245Z","2.1.2-unstable.119":"2020-05-08T23:26:44.099Z","2.1.2-unstable.120":"2020-05-08T23:58:07.543Z","2.1.2-unstable.121":"2020-05-09T04:24:08.686Z","2.1.2-unstable.122":"2020-05-11T20:03:00.945Z","2.1.2-unstable.123":"2020-05-11T20:38:09.689Z","2.1.2-unstable.130":"2020-05-12T18:59:08.209Z","2.1.2-unstable.131":"2020-05-12T20:14:56.589Z","2.1.2-unstable.132":"2020-05-13T19:03:45.740Z","2.1.2-unstable.133":"2020-05-13T20:05:53.470Z","2.1.2-unstable.134":"2020-05-14T03:49:13.647Z","2.1.2-unstable.136":"2020-05-14T18:21:55.776Z","2.1.2-unstable.138":"2020-05-14T19:10:14.410Z","2.1.2-unstable.142":"2020-05-15T16:02:02.814Z","2.1.2-unstable.143":"2020-05-15T22:28:17.442Z","2.1.2-unstable.144":"2020-05-15T22:54:19.353Z","2.1.2-unstable.145":"2020-05-18T15:32:44.049Z","2.1.2-unstable.146":"2020-05-18T22:59:40.607Z","2.1.2-unstable.148":"2020-05-19T19:36:50.314Z","2.1.2-unstable.149":"2020-05-19T20:11:04.031Z","2.1.2-unstable.150":"2020-05-20T00:01:42.281Z","2.1.2-unstable.151":"2020-05-20T16:01:00.503Z","2.1.2-unstable.152":"2020-05-21T04:36:25.322Z","2.1.2-unstable.153":"2020-05-21T15:59:31.637Z","2.1.2-unstable.154":"2020-05-21T16:56:46.305Z","2.1.2-unstable.155":"2020-05-22T17:23:25.545Z","2.1.2-unstable.156":"2020-05-22T17:48:41.784Z","2.1.2-unstable.160":"2020-05-26T23:06:39.283Z","2.1.2-unstable.164":"2020-05-28T20:47:40.906Z","2.1.2-unstable.165":"2020-05-29T15:01:25.029Z","2.1.2-unstable.166":"2020-05-29T20:30:25.666Z","2.1.2-unstable.167":"2020-05-29T22:34:47.748Z","2.1.2-unstable.168":"2020-05-30T04:23:56.841Z","2.1.2-unstable.169":"2020-06-01T22:13:53.248Z","2.1.2-unstable.170":"2020-06-02T00:46:07.096Z","2.1.2-unstable.174":"2020-06-02T22:56:48.859Z","2.1.2-unstable.175":"2020-06-03T05:36:41.266Z","2.1.2-unstable.176":"2020-06-03T17:28:09.362Z","2.1.2-unstable.177":"2020-06-03T17:45:53.995Z","2.1.2-unstable.181":"2020-06-04T00:39:26.401Z","2.1.2-unstable.185":"2020-06-04T18:22:47.894Z","2.1.2-unstable.186":"2020-06-05T00:28:29.291Z","2.1.2-unstable.187":"2020-06-05T23:43:16.109Z","2.1.2-unstable.188":"2020-06-06T04:19:32.788Z","2.1.2-unstable.189":"2020-06-07T04:17:29.413Z","2.1.2-unstable.191":"2020-06-09T00:04:12.822Z","2.1.2-unstable.196":"2020-06-09T19:37:33.054Z","2.1.2-unstable.197":"2020-06-09T19:49:36.017Z","2.1.2-unstable.198":"2020-06-11T16:01:23.930Z","2.1.2-unstable.199":"2020-06-11T19:38:41.562Z","2.1.2-unstable.200":"2020-06-11T23:18:35.950Z","2.1.2-unstable.202":"2020-06-15T22:41:41.647Z","2.1.2-unstable.203":"2020-06-15T23:40:42.840Z","2.1.2-unstable.204":"2020-06-16T00:13:22.907Z","2.1.2-unstable.205":"2020-06-16T23:48:42.198Z","2.1.2-unstable.206":"2020-06-17T17:24:49.034Z","2.1.2-unstable.207":"2020-06-18T18:58:35.942Z","2.1.2-unstable.208":"2020-06-18T19:28:46.813Z","2.1.2-unstable.209":"2020-06-18T19:53:11.359Z","2.1.2-unstable.210":"2020-06-18T20:26:19.528Z","2.1.2-unstable.214":"2020-06-19T16:11:12.850Z","2.1.2-unstable.215":"2020-06-19T23:30:14.180Z","2.1.2-unstable.216":"2020-06-23T15:48:05.039Z","2.1.2-unstable.217":"2020-06-23T22:36:16.526Z","2.1.2-unstable.218":"2020-06-24T02:25:11.177Z","2.1.2-unstable.219":"2020-06-26T23:22:11.318Z","2.1.2-unstable.221":"2020-06-30T18:08:06.579Z","2.1.2-unstable.224":"2020-07-06T19:58:21.727Z","2.1.2-unstable.225":"2020-07-06T21:04:01.851Z","2.1.2-unstable.230":"2020-07-07T23:18:10.837Z","2.1.2-preview.240":"2020-07-08T16:34:39.792Z","2.1.2-unstable.232":"2020-07-08T23:02:47.510Z","2.1.2-unstable.233":"2020-07-08T23:56:01.905Z","2.1.2-unstable.234":"2020-07-09T02:49:26.879Z","2.1.2-unstable.235":"2020-07-09T19:16:19.419Z","2.1.2-unstable.239":"2020-07-10T00:59:51.002Z","2.1.2-unstable.240":"2020-07-10T15:32:29.667Z","2.1.2-unstable.241":"2020-07-10T23:27:53.921Z","2.1.2-unstable.242":"2020-07-13T18:19:32.835Z","2.1.2-unstable.243":"2020-07-13T19:08:21.796Z","2.1.2-unstable.244":"2020-07-15T04:42:53.571Z","2.1.2-unstable.245":"2020-07-15T23:18:10.922Z","2.1.2-unstable.246":"2020-07-16T00:14:24.409Z","2.1.2-unstable.247":"2020-07-16T17:38:57.831Z","2.1.2-unstable.248":"2020-07-17T17:24:25.756Z","2.1.2-unstable.249":"2020-07-17T19:42:09.192Z","2.1.2-unstable.250":"2020-07-17T20:47:10.778Z","2.1.2-unstable.251":"2020-07-17T21:09:59.220Z","2.1.2-unstable.252":"2020-07-20T20:38:02.211Z","2.1.2-unstable.253":"2020-07-21T16:54:33.677Z","2.1.2-unstable.254":"2020-07-22T00:10:40.743Z","2.1.2-unstable.258":"2020-07-22T21:44:17.382Z","2.1.2-unstable.260":"2020-07-23T22:47:59.128Z","2.1.2-unstable.261":"2020-07-23T23:40:51.305Z","2.1.2-unstable.264":"2020-07-27T19:27:20.833Z","2.1.2":"2020-07-27T22:41:03.664Z","2.1.3-unstable.1":"2020-07-28T00:25:19.452Z","2.1.3-unstable.2":"2020-07-28T01:57:51.067Z","2.1.3-unstable.3":"2020-07-28T19:23:50.066Z","2.1.3-unstable.4":"2020-08-04T16:50:55.578Z","2.1.3-unstable.6":"2020-08-05T21:35:08.337Z","2.1.3-unstable.7":"2020-08-05T22:01:50.206Z","2.1.3-unstable.8":"2020-08-06T17:34:59.434Z","2.1.3-unstable.9":"2020-08-06T18:32:51.465Z","2.1.3-unstable.14":"2020-08-07T21:32:43.454Z","2.1.3-unstable.15":"2020-08-10T16:30:15.471Z","2.1.3-unstable.16":"2020-08-10T20:01:10.466Z","2.1.3-unstable.17":"2020-08-11T18:44:24.004Z","2.1.3-unstable.18":"2020-08-12T15:12:12.113Z","2.1.3-unstable.19":"2020-08-12T21:10:07.822Z","2.1.3-unstable.20":"2020-08-12T23:55:12.143Z","2.1.3-unstable.21":"2020-08-13T00:20:16.933Z","2.1.3-unstable.22":"2020-08-13T19:01:15.872Z","2.1.3-unstable.23":"2020-08-17T17:04:09.478Z","2.1.3-unstable.27":"2020-08-19T22:34:49.368Z","2.1.3-unstable.28":"2020-08-19T23:42:13.520Z","2.1.3-unstable.29":"2020-08-20T18:18:43.941Z","2.1.3-unstable.30":"2020-08-20T18:34:22.933Z","2.1.3-unstable.31":"2020-08-20T20:36:56.193Z","2.1.3-unstable.32":"2020-08-24T22:43:33.309Z","2.1.3-unstable.33":"2020-08-24T23:00:28.632Z","2.1.3-unstable.34":"2020-08-24T23:41:21.922Z","2.1.3-unstable.36":"2020-08-25T18:09:48.263Z","2.1.3-ui-preview.35":"2020-08-25T19:21:16.181Z","2.1.3-ui-preview.37":"2020-08-26T00:01:39.758Z","2.1.3-unstable.39":"2020-08-26T00:21:32.187Z","2.1.3-unstable.40":"2020-08-26T16:36:47.960Z","2.1.3-unstable.42":"2020-08-26T22:07:23.218Z","2.1.3-ui-preview.40":"2020-08-28T20:29:09.608Z","2.1.3-unstable.43":"2020-08-31T21:41:14.128Z","2.1.3-unstable.47":"2020-09-01T16:42:02.243Z","2.1.3-unstable.48":"2020-09-02T17:49:01.984Z","2.1.3-unstable.49":"2020-09-02T21:57:19.343Z","2.1.3-unstable.54":"2020-09-03T17:12:16.588Z","2.1.3-unstable.55":"2020-09-03T17:54:35.625Z","2.1.3-ui-preview.41":"2020-09-03T19:10:32.324Z","2.1.3-ui-preview.42":"2020-09-03T19:42:43.549Z","2.1.3-unstable.59":"2020-09-03T20:57:33.936Z","2.1.3-unstable.60":"2020-09-04T21:19:53.499Z","2.1.3-unstable.62":"2020-09-09T12:30:55.694Z","2.1.3-unstable.63":"2020-09-09T17:40:19.190Z","2.1.3-unstable.64":"2020-09-09T21:24:08.759Z","2.1.3-unstable.68":"2020-09-12T14:35:12.496Z","2.1.3-unstable.69":"2020-09-15T15:30:29.357Z","2.1.3-unstable.70":"2020-09-15T17:56:20.871Z","2.1.3-unstable.71":"2020-09-15T18:09:17.478Z","2.1.3-unstable.72":"2020-09-15T18:26:04.947Z","2.1.3-unstable.77":"2020-09-16T19:55:43.572Z","2.1.3-unstable.76":"2020-09-16T19:59:16.702Z","2.1.3-unstable.78":"2020-09-16T21:53:24.503Z","2.1.3-unstable.82":"2020-09-17T16:25:56.670Z","2.1.3-unstable.84":"2020-09-17T21:49:16.824Z","2.1.3-unstable.85":"2020-09-18T21:27:45.415Z","2.1.3-unstable.86":"2020-09-22T19:55:20.970Z","2.1.3-unstable.87":"2020-09-23T17:02:34.560Z","2.1.3-unstable.88":"2020-09-23T18:20:15.495Z","2.1.3-unstable.89":"2020-09-24T15:52:46.673Z","2.1.3-ui-preview.48":"2020-09-24T20:09:56.519Z","2.1.3-unstable.90":"2020-09-24T23:48:57.076Z","2.1.3-unstable.94":"2020-09-25T17:58:19.085Z","2.1.3-unstable.95":"2020-09-26T13:03:59.157Z","2.1.3-unstable.97":"2020-09-28T17:37:23.353Z","2.1.3-unstable.98":"2020-09-29T22:00:05.419Z","2.1.3-unstable.99":"2020-09-29T22:32:05.944Z","2.1.3-unstable.100":"2020-09-30T18:47:18.519Z","2.1.3-unstable.101":"2020-10-01T16:12:31.693Z","2.1.3-unstable.103":"2020-10-01T22:33:32.731Z","2.1.3-unstable.107":"2020-10-02T21:46:30.892Z","2.1.3-unstable.108":"2020-10-08T22:52:28.500Z","2.1.3-unstable.109":"2020-10-12T21:59:31.117Z","2.1.3-unstable.110":"2020-10-12T23:49:48.860Z","2.1.3-unstable.111":"2020-10-13T01:54:21.389Z","2.1.3-unstable.112":"2020-10-13T02:45:24.732Z","2.1.3-unstable.114":"2020-10-14T00:46:26.267Z","2.1.3-unstable.116":"2020-10-15T20:44:23.736Z","2.1.3-unstable.115":"2020-10-15T20:44:46.962Z","2.1.3-unstable.117":"2020-10-15T22:22:28.226Z","2.1.3-unstable.102":"2020-10-16T02:41:35.796Z","2.1.3-unstable.124":"2020-10-20T00:55:22.415Z","2.1.3-unstable.125":"2020-10-20T18:42:33.460Z","2.1.3-unstable.126":"2020-10-20T20:42:39.455Z","2.1.3-unstable.127":"2020-10-21T02:50:18.610Z","2.1.3-unstable.128":"2020-10-22T17:53:02.883Z","2.1.3-unstable.129":"2020-10-22T18:33:04.736Z","2.1.3-unstable.130":"2020-10-23T15:11:55.827Z","2.1.3-unstable.133":"2020-10-29T00:39:09.660Z","2.1.3-unstable.134":"2020-10-29T18:59:37.203Z","2.1.3":"2020-10-29T21:14:20.875Z","2.1.4-unstable.1":"2020-10-30T19:34:25.048Z","2.1.3-ui-preview.52":"2020-10-30T23:23:42.505Z","2.1.4-unstable.2":"2020-10-31T01:13:39.045Z","2.1.4-unstable.6":"2020-10-31T14:23:00.033Z","2.1.4-unstable.7":"2020-11-03T00:00:31.051Z","2.1.4-unstable.11":"2020-11-03T19:02:24.717Z","2.1.4-pr-6530.16":"2020-11-05T08:46:12.229Z","2.1.4-pr-6530.17":"2020-11-05T09:36:28.345Z","2.1.3-pr-7040.136":"2020-11-06T21:41:10.221Z","2.1.4-unstable.12":"2020-11-06T23:51:02.615Z","2.1.3-pr-7040.137":"2020-11-09T23:01:02.207Z","2.1.4-unstable.13":"2020-11-09T23:12:41.582Z","2.1.4-unstable.15":"2020-11-12T00:40:52.758Z","2.1.4-unstable.16":"2020-11-12T03:06:25.489Z","2.1.4-unstable.17":"2020-11-12T16:56:39.381Z","2.1.4-native.18":"2020-11-12T18:29:49.034Z","2.1.4-unstable.18":"2020-11-12T21:38:18.139Z","2.1.4-unstable.19":"2020-11-12T22:58:02.057Z","2.1.4-unstable.23":"2020-11-13T22:03:42.278Z","2.1.4-unstable.24":"2020-11-16T16:18:08.095Z","2.1.4-unstable.25":"2020-11-17T19:10:37.656Z","2.1.4-unstable.26":"2020-11-17T19:52:33.481Z","2.1.4-unstable.28":"2020-11-17T22:15:28.629Z","2.1.4-unstable.29":"2020-11-17T23:08:21.136Z","2.1.4-unstable.30":"2020-11-18T23:19:47.292Z","2.1.4-sdk-bump.32":"2020-11-19T00:25:32.714Z","2.1.4-unstable.32":"2020-11-19T18:41:59.287Z","2.1.4-unstable.33":"2020-11-20T15:35:06.880Z","2.1.4-unstable.34":"2020-11-20T18:52:44.387Z","2.1.4-beta-ds.38":"2020-11-20T21:24:40.064Z","2.1.4-unstable.38":"2020-11-21T08:52:15.039Z","2.1.4-unstable.39":"2020-11-23T17:52:07.423Z","2.1.4-unstable.40":"2020-11-23T18:29:36.152Z","2.1.4-unstable.41":"2020-11-23T21:35:38.498Z","2.1.4-unstable.45":"2020-11-24T00:09:52.188Z","2.1.4-unstable.46":"2020-11-24T17:03:37.503Z","2.1.4-unstable.47":"2020-11-24T22:01:06.066Z","2.1.4-beta-ds.51":"2020-11-25T23:46:58.687Z","2.1.4-unstable.48":"2020-11-30T21:19:03.619Z","2.1.4-unstable.49":"2020-11-30T22:00:27.965Z","2.1.4-unstable.53":"2020-12-01T00:28:09.930Z","2.1.4-unstable.55":"2020-12-01T02:32:46.634Z","2.1.4-unstable.56":"2020-12-01T23:05:38.535Z","2.1.4-unstable.57":"2020-12-02T00:00:51.546Z","2.1.4-unstable.58":"2020-12-02T18:53:39.517Z","2.1.4-unstable.59":"2020-12-02T19:58:43.158Z","2.1.4-unstable.60":"2020-12-02T20:42:21.858Z","2.1.4-unstable.61":"2020-12-03T00:51:26.502Z","2.1.4-unstable.62":"2020-12-03T16:52:15.731Z","2.1.4-unstable.63":"2020-12-03T18:22:36.646Z","2.1.4-unstable.64":"2020-12-07T19:28:34.406Z","2.1.4-unstable.65":"2020-12-07T20:48:56.873Z","2.1.4-unstable.66":"2020-12-09T20:33:51.773Z","2.1.4-unstable.68":"2020-12-09T21:33:16.940Z","2.1.4-unstable.69":"2020-12-10T18:39:12.289Z","2.1.4-unstable.70":"2020-12-10T22:19:56.668Z","2.1.4-unstable.74":"2020-12-12T03:47:24.092Z","2.1.4-unstable.76":"2020-12-14T19:50:37.485Z","2.1.4-unstable.77":"2020-12-15T00:53:06.949Z","2.1.4-unstable.78":"2020-12-17T17:38:59.762Z","2.1.4-unstable.79":"2020-12-17T18:12:56.437Z","2.1.4-unstable.83":"2020-12-19T02:00:53.301Z","2.1.4-unstable.84":"2020-12-23T19:39:06.415Z","2.1.4-unstable.85":"2020-12-25T12:58:17.646Z","2.1.4-unstable.86":"2021-01-04T20:33:24.713Z","2.1.4-unstable.87":"2021-01-04T21:23:30.290Z","2.1.4-unstable.88":"2021-01-04T22:56:15.881Z","2.1.4-unstable.89":"2021-01-05T00:46:41.219Z","2.1.4-unstable.90":"2021-01-05T18:14:05.949Z","2.1.4-unstable.91":"2021-01-06T16:46:36.838Z","2.1.4-unstable.92":"2021-01-06T19:58:03.687Z","2.1.4-unstable.93":"2021-01-07T17:41:42.751Z","2.1.4-unstable.94":"2021-01-07T18:37:05.224Z","2.1.4-unstable.95":"2021-01-07T20:04:28.543Z","2.1.4":"2021-01-07T23:32:42.041Z","2.1.5-unstable.1":"2021-01-11T19:09:31.962Z","2.1.5-unstable.2":"2021-01-13T19:25:18.735Z","2.1.5-unstable.3":"2021-01-14T19:52:20.798Z","2.1.5-unstable.4":"2021-01-20T19:12:00.309Z","2.1.5-unstable.5":"2021-01-20T19:32:08.789Z","2.1.5-unstable.6":"2021-01-22T19:24:04.209Z","2.1.5-unstable.7":"2021-01-25T20:50:21.393Z","2.1.5-unstable.8":"2021-01-26T00:25:25.756Z","2.1.5-unstable.9":"2021-01-27T01:31:47.261Z","2.1.5-unstable.10":"2021-01-27T21:29:24.829Z","2.1.5-unstable.11":"2021-01-28T22:42:29.635Z","2.1.5":"2021-01-29T00:17:08.833Z","2.1.6-unstable.1":"2021-01-29T18:05:44.388Z","2.1.6-unstable.4":"2021-01-29T19:54:26.263Z","2.1.6-unstable.5":"2021-01-30T00:46:30.437Z","2.1.6-unstable.6":"2021-02-01T18:43:05.102Z","2.1.6-unstable.10":"2021-02-02T00:08:09.022Z","2.1.6-unstable.11":"2021-02-02T21:46:58.630Z","2.1.6-unstable.12":"2021-02-02T22:39:22.418Z","2.1.3-ui-preview.57":"2021-02-03T22:59:05.826Z","2.1.6-unstable.16":"2021-02-04T19:19:17.379Z","2.1.6-unstable.17":"2021-02-09T18:41:25.871Z","2.1.6-unstable.18":"2021-02-09T18:49:13.292Z","2.1.6-unstable.19":"2021-02-09T19:02:13.131Z","2.1.6-unstable.20":"2021-02-09T19:33:23.573Z","2.1.6-unstable.24":"2021-02-10T23:11:40.622Z","2.1.6-unstable.25":"2021-02-15T20:36:50.983Z","2.1.6-unstable.29":"2021-02-16T01:32:13.347Z","2.1.6-unstable.30":"2021-02-18T02:19:46.525Z","2.1.6-unstable.34":"2021-02-19T18:12:09.490Z","2.1.6-unstable.35":"2021-02-20T16:38:22.559Z","2.1.6-unstable.36":"2021-02-22T16:56:53.711Z","2.1.6-unstable.37":"2021-02-22T17:57:12.625Z","2.1.6-unstable.38":"2021-02-22T20:54:37.825Z","2.1.6-unstable.39":"2021-02-22T21:30:13.149Z","2.1.6-unstable.40":"2021-02-22T22:01:26.810Z","2.1.4-sdk-bump.35":"2021-02-24T20:59:31.856Z","2.1.4-sdk-bump.37":"2021-02-25T20:07:42.703Z","2.1.6-unstable.41":"2021-02-25T21:20:55.954Z","2.1.6-unstable.45":"2021-03-01T19:37:35.559Z","2.1.4-native.20":"2021-03-02T20:00:42.065Z","2.1.6-unstable.63":"2021-03-11T17:05:58.412Z","2.1.6-unstable.64":"2021-03-11T20:27:30.942Z","2.1.6-unstable.65":"2021-03-12T00:05:03.817Z","2.1.6-unstable.66":"2021-03-12T00:29:16.770Z","2.1.6-unstable.67":"2021-03-12T17:12:05.851Z","2.1.6-unstable.71":"2021-03-16T18:57:34.043Z","2.1.6-unstable.73":"2021-03-17T19:15:17.378Z","2.1.6-unstable.77":"2021-03-19T21:14:44.164Z","2.1.6-unstable.78":"2021-03-19T21:24:56.267Z","2.1.6-unstable.79":"2021-03-23T20:42:17.196Z","2.1.6-unstable.80":"2021-03-24T19:34:36.139Z","2.1.6-unstable.81":"2021-03-24T23:25:43.614Z","2.1.6-unstable.82":"2021-03-25T16:48:37.179Z","2.1.6-unstable.83":"2021-03-25T17:44:51.230Z","2.1.6-unstable.87":"2021-03-26T15:44:45.123Z","2.1.6-unstable.88":"2021-03-29T22:13:08.803Z","2.1.6-unstable.89":"2021-03-31T21:10:39.739Z","2.1.6-unstable.90":"2021-04-02T16:18:05.004Z","2.1.6-unstable.91":"2021-04-02T18:47:55.300Z","2.1.6-unstable.93":"2021-04-05T19:56:04.785Z","2.1.6-unstable.94":"2021-04-05T21:07:26.971Z","2.1.6-unstable.95":"2021-04-06T20:40:05.466Z","2.1.6-unstable.96":"2021-04-07T19:24:36.671Z","2.1.6-unstable.97":"2021-04-09T15:52:57.091Z","2.1.6-unstable.98":"2021-04-12T21:40:14.155Z","2.1.6-unstable.99":"2021-04-13T03:58:40.099Z","2.1.6-unstable.100":"2021-04-13T18:18:55.286Z","2.1.6-unstable.101":"2021-04-14T19:45:43.263Z","2.1.6-unstable.102":"2021-04-15T02:47:56.257Z","2.1.6-unstable.103":"2021-04-15T02:51:35.570Z","2.1.6-unstable.104":"2021-04-15T18:44:25.893Z","2.1.6-unstable.105":"2021-04-15T19:04:08.631Z","2.1.6-unstable.109":"2021-04-19T22:54:10.358Z","2.1.6-unstable.110":"2021-04-23T20:08:41.699Z","2.1.6-unstable.111":"2021-04-23T23:43:31.711Z","2.1.6-unstable.112":"2021-04-26T18:46:10.860Z","2.1.6-unstable.113":"2021-04-26T19:43:24.605Z","2.1.6-unstable.114":"2021-04-26T20:16:16.282Z","2.1.6-unstable.115":"2021-04-26T20:42:59.573Z","2.1.6-unstable.117":"2021-04-28T00:44:35.814Z","2.1.6-unstable.118":"2021-04-28T19:53:32.010Z","2.1.6-unstable.119":"2021-04-28T20:13:58.235Z","2.1.6-unstable.120":"2021-04-28T20:34:01.563Z","2.1.6-unstable.121":"2021-04-29T19:58:19.781Z","2.1.6-unstable.122":"2021-04-29T21:22:12.232Z","2.1.6-unstable.123":"2021-04-30T15:13:29.338Z","2.1.6-unstable.124":"2021-04-30T23:26:35.631Z","2.1.6-unstable.125":"2021-05-03T17:28:31.256Z","2.1.6-unstable.126":"2021-05-03T20:01:35.392Z","2.1.6-unstable.127":"2021-05-04T14:03:39.504Z","2.1.6-unstable.128":"2021-05-04T14:27:29.559Z","2.1.6-unstable.131":"2021-05-05T23:52:08.917Z","2.1.6-unstable.132":"2021-05-06T15:41:28.087Z","2.1.6-unstable.136":"2021-05-07T00:49:18.562Z","2.1.3-ui-preview.60":"2021-05-07T19:11:15.289Z","2.1.6-unstable.137":"2021-05-10T16:49:53.840Z","2.1.4-native.25":"2021-05-10T19:56:58.793Z","2.1.4-native.26":"2021-05-10T20:44:26.315Z","2.1.6-unstable.138":"2021-05-10T21:32:30.970Z","2.1.6-unstable.143":"2021-05-12T00:52:37.423Z","2.1.6-unstable.144":"2021-05-12T20:32:23.511Z","2.1.6-unstable.145":"2021-05-13T01:59:04.796Z","2.1.6-unstable.146":"2021-05-13T23:17:46.738Z","2.1.6-unstable.153":"2021-05-14T22:09:58.642Z","2.1.6-unstable.154":"2021-05-17T14:25:23.937Z","2.1.6-unstable.155":"2021-05-18T21:39:38.240Z","2.1.6-unstable.156":"2021-05-19T00:06:06.272Z","2.1.6-unstable.157":"2021-05-19T17:23:41.941Z","2.1.6-unstable.159":"2021-05-20T19:18:21.545Z","2.1.6-unstable.160":"2021-05-20T23:51:25.865Z","2.1.6-unstable.161":"2021-05-21T01:43:22.457Z","2.1.6-unstable.162":"2021-05-21T15:36:41.703Z","2.1.6-unstable.164":"2021-05-22T01:43:32.996Z","2.1.6-unstable.165":"2021-05-24T16:38:47.660Z","2.1.6-unstable.166":"2021-05-24T21:20:03.592Z","2.1.6-unstable.167":"2021-05-24T21:43:04.478Z","2.1.6-unstable.168":"2021-05-25T17:38:45.151Z","2.1.6-unstable.169":"2021-05-25T18:21:11.419Z","2.1.6-unstable.170":"2021-05-25T19:20:48.946Z","2.1.3-ui-preview.61":"2021-05-26T04:26:11.670Z","2.1.6-unstable.171":"2021-05-26T16:03:29.701Z","2.1.6-unstable.177":"2021-05-28T02:27:25.151Z","2.1.6-unstable.178":"2021-06-01T16:34:24.643Z","2.1.6-unstable.180":"2021-06-02T18:34:12.234Z","2.1.6-unstable.181":"2021-06-03T23:57:33.305Z","2.1.6-unstable.182":"2021-06-07T17:14:22.835Z","2.1.6-unstable.183":"2021-06-07T23:06:53.477Z","2.1.6-unstable.184":"2021-06-08T17:33:13.573Z","2.1.6-unstable.185":"2021-06-08T18:33:03.853Z","2.1.6-unstable.186":"2021-06-08T19:48:29.260Z","2.1.6-unstable.187":"2021-06-08T20:04:06.632Z","2.1.6-unstable.189":"2021-06-09T22:59:36.203Z","2.1.6-unstable.190":"2021-06-10T20:12:27.776Z","2.1.6-unstable.194":"2021-06-11T16:14:37.278Z","2.1.6-unstable.195":"2021-06-11T16:37:37.617Z","2.1.6-unstable.196":"2021-06-13T01:53:02.547Z","2.1.6-unstable.197":"2021-06-15T19:53:01.770Z","2.1.6-unstable.198":"2021-06-15T23:57:02.586Z","2.1.6-unstable.199":"2021-06-16T16:48:38.585Z","2.1.6-unstable.202":"2021-06-17T23:23:04.009Z","2.1.6-unstable.209":"2021-06-21T20:16:05.935Z","2.1.6-unstable.214":"2021-06-23T15:36:51.464Z","2.1.6-unstable.216":"2021-06-23T22:00:59.840Z","2.1.6-unstable.217":"2021-06-23T23:11:27.538Z","2.1.6-unstable.218":"2021-06-24T18:27:02.899Z","2.1.6-unstable.219":"2021-06-24T19:50:57.109Z","2.1.6-unstable.223":"2021-06-24T22:51:53.082Z","2.1.6-rn-sqlite.224":"2021-06-25T17:56:42.968Z","2.1.6-rn-sqlite.225":"2021-06-30T16:42:57.260Z","2.1.6-unstable.224":"2021-07-01T16:38:14.038Z","2.1.6-unstable.225":"2021-07-01T21:41:55.746Z","2.1.6-rn-sqlite.226":"2021-07-02T20:10:24.205Z","2.1.6-rn-sqlite.227":"2021-07-04T02:15:25.675Z","2.1.6-migrate-rn-picker.224":"2021-07-07T01:06:29.809Z","2.1.6-unstable.226":"2021-07-07T17:13:33.570Z","2.1.6-unstable.230":"2021-07-13T18:23:14.783Z","2.1.6-unstable.231":"2021-07-13T23:50:08.855Z","2.1.6-unstable.232":"2021-07-14T20:26:26.769Z","2.1.6-unstable.233":"2021-07-15T17:58:37.302Z","2.1.6-unstable.238":"2021-07-20T21:44:04.235Z","2.1.6-unstable.239":"2021-07-21T17:44:58.596Z","2.1.6-unstable.240":"2021-07-22T09:45:57.790Z","2.1.6-unstable.241":"2021-07-22T14:56:31.849Z","2.1.6-unstable.242":"2021-07-22T17:16:12.444Z","2.1.6-unstable.243":"2021-07-22T18:10:39.934Z","2.1.6-unstable.247":"2021-07-22T23:10:07.364Z","2.1.6-unstable.248":"2021-07-23T19:10:22.923Z","2.1.6-unstable.251":"2021-07-27T14:04:25.791Z","2.1.6-unstable.252":"2021-07-28T16:52:38.076Z","2.1.6-geo.248":"2021-07-29T21:33:11.578Z","2.1.6-geo.249":"2021-07-30T01:42:25.456Z","2.1.6-geo.250":"2021-07-30T18:34:25.880Z","2.1.6-unstable.256":"2021-08-02T17:59:29.753Z","2.1.6-geo.251":"2021-08-02T23:53:51.612Z","2.1.6-unstable.257":"2021-08-04T00:02:19.324Z","2.1.6-unstable.258":"2021-08-05T18:30:03.967Z","2.1.6-unstable.259":"2021-08-05T23:25:46.290Z","2.1.6-geo.253":"2021-08-06T23:57:54.236Z","2.1.6-geo.254":"2021-08-09T23:25:25.012Z","2.1.6-geo.255":"2021-08-10T18:30:33.248Z","2.1.6-unstable.260":"2021-08-10T21:58:22.559Z","2.1.6-unstable.261":"2021-08-10T22:29:01.517Z","2.1.6-geo.256":"2021-08-11T22:25:07.048Z","2.1.6-unstable.265":"2021-08-19T14:56:33.472Z","2.1.6-unstable.269":"2021-08-20T02:11:33.423Z","2.1.6-unstable.272":"2021-08-24T14:51:33.452Z","2.1.6-unstable.273":"2021-08-24T16:57:55.788Z","2.1.6-unstable.274":"2021-08-26T19:25:15.522Z","2.1.6-unstable.279":"2021-08-31T23:56:18.582Z","2.1.6-unstable.280":"2021-09-02T20:01:10.297Z","2.1.6-unstable.281":"2021-09-02T20:37:49.145Z","2.1.6-unstable.285":"2021-09-04T19:21:26.711Z","2.1.6-unstable.289":"2021-09-07T18:33:04.717Z","2.1.6-unstable.293":"2021-09-08T21:30:00.213Z","2.1.6-geo.259":"2021-09-14T21:28:30.961Z","2.1.6-unstable.297":"2021-09-17T20:12:33.122Z","2.1.6-unstable.301":"2021-09-20T18:22:57.266Z","2.1.6-unstable.302":"2021-09-21T17:46:05.372Z","2.1.6-unstable.303":"2021-09-22T01:57:55.413Z","2.1.6-geo.261":"2021-09-22T02:40:50.609Z","2.1.6-unstable.304":"2021-09-22T18:19:58.975Z","2.1.6-geo.263":"2021-09-23T00:47:49.817Z","2.1.6-unstable.308":"2021-09-23T15:04:13.593Z","2.1.6-geo.264":"2021-09-23T19:40:24.369Z","2.1.6-unstable.327":"2021-09-23T23:20:36.999Z","2.1.6-unstable.331":"2021-09-28T14:24:23.031Z","2.1.6-unstable.332":"2021-09-28T22:59:19.843Z","2.1.6-unstable.333":"2021-09-29T23:12:04.103Z","2.1.6-unstable.338":"2021-10-01T21:56:19.674Z","2.1.6-unstable.339":"2021-10-05T15:27:33.661Z","2.1.6-unstable.340":"2021-10-06T12:05:33.723Z","2.1.6-unstable.341":"2021-10-06T17:12:41.196Z","2.1.6-unstable.343":"2021-10-07T13:02:30.458Z","2.1.6-unstable.344":"2021-10-07T21:37:02.557Z","2.1.6-unstable.350":"2021-10-15T21:17:25.090Z","2.1.6-unstable.351":"2021-10-15T22:28:09.567Z","2.1.6-unstable.353":"2021-10-20T18:28:43.410Z","2.1.6-unstable.356":"2021-10-21T15:17:05.451Z","2.1.6-unstable.357":"2021-10-21T16:02:27.126Z","2.1.6-unstable.358":"2021-10-21T17:25:38.542Z","2.1.6-unstable.364":"2021-10-21T20:45:11.649Z","2.1.6-unstable.365":"2021-10-21T22:04:03.944Z","2.1.6-unstable.366":"2021-10-25T18:30:16.552Z","2.1.6-unstable.368":"2021-10-26T05:47:14.044Z","2.1.6-unstable.369":"2021-10-26T23:02:30.715Z","2.1.6-unstable.370":"2021-10-27T16:41:10.451Z","2.1.6-unstable.371":"2021-10-28T20:26:24.975Z","2.1.6-unstable.375":"2021-11-02T18:24:29.252Z","2.1.6-unstable.376":"2021-11-03T15:13:08.702Z","2.1.6-unstable.378":"2021-11-04T20:36:43.700Z","2.1.6-unstable.379":"2021-11-04T23:43:15.539Z","2.1.6-unstable.380":"2021-11-05T22:36:57.359Z","2.1.6-unstable.381":"2021-11-08T23:37:25.621Z","2.1.6-in-app-messaging.382":"2021-11-09T17:16:49.617Z","2.1.6-unstable.382":"2021-11-09T17:44:36.967Z","2.1.6-in-app-messaging.384":"2021-11-09T20:57:36.518Z","2.1.6-unstable.388":"2021-11-09T21:34:11.596Z","2.1.6-unstable.389":"2021-11-11T18:16:44.638Z","2.1.6-unstable.394":"2021-11-11T23:35:30.941Z","2.1.6-unstable.398":"2021-11-13T01:34:41.334Z","2.1.6-unstable.402":"2021-11-17T20:55:39.304Z","2.1.6-in-app-messaging.394":"2021-11-17T21:49:55.151Z","2.1.6-in-app-messaging.395":"2021-11-17T23:22:20.624Z","2.1.6-in-app-messaging.396":"2021-11-18T00:42:26.235Z","2.1.6-in-app-messaging.400":"2021-11-18T20:36:16.439Z","2.1.6-unstable.403":"2021-11-18T21:39:00.408Z","2.1.6-unstable.407":"2021-11-20T00:23:05.320Z","2.1.6-in-app-messaging.402":"2021-11-22T02:22:14.370Z","2.1.6-in-app-messaging.403":"2021-11-23T00:16:36.374Z","2.1.8-legacy-ui.77":"2022-09-24T19:13:34.877Z","2.1.8-legacy-ui-tests.82":"2022-10-07T19:29:58.732Z","2.1.8-legacy-ui-tests.90":"2022-10-07T22:57:04.407Z","2.1.9-unstable.10":"2022-10-26T20:05:04.277Z","2.1.9-unstable.11":"2022-10-26T22:37:09.396Z","2.1.9-unstable.12":"2022-10-27T00:25:01.467Z","2.1.9-unstable.13":"2022-10-27T16:03:22.256Z","2.1.9-unstable.14":"2022-10-27T16:49:13.964Z","2.1.9-unstable.15":"2022-10-27T18:19:15.675Z","2.1.9":"2022-10-27T22:10:44.643Z","2.1.10-unstable.1":"2022-11-01T16:31:46.021Z","2.1.10-unstable.2":"2022-11-02T20:51:37.607Z"},"author":{"name":"Amazon Web Services"},"license":"Apache-2.0","description":"The `aws-amplify-vue` package is a set of Vue components which integrates your Vue application with the AWS-Amplify library.","maintainers":[{"email":"osa-3p@amazon.com","name":"amzn-oss"},{"email":"aws-amplify@amazon.com","name":"aws-amplify-ops"},{"email":"aws-amplify-uibuilder@amazon.com","name":"amplify-studio-uibuilder"},{"email":"amplify-codegen+npm@amazon.com","name":"amplify-codegen"},{"email":"amplify-data-dev+npm@amazon.com","name":"amplify-data-dev-npm"},{"email":"amplify-data-dev@amazon.com","name":"aws-amplify-data-runtime"},{"email":"michaellabieniec@gmail.com","name":"mlabieniec"},{"email":"rthrelkeld1980@gmail.com","name":"undefobj"}],"readme":"","readmeFilename":""}